11ty（skeleventy-starter）读取YAML评论数据失败求助

看起来你遇到的问题大概率是数据目录配置不对或者遍历方式错误，结合你的情况，我分几个可能的原因和解决方法来梳理：

1. 最可能的原因：数据目录名称不符合Eleventy默认规则 #

Eleventy 默认只会识别**_data**作为全局数据目录，如果你把评论文件放在data/reviews而非_data/reviews，Eleventy根本不会读取这些文件，导致reviews变量是空的（Nunjucks访问未定义变量不会报错，只会静默输出空内容）。

解决办法： #

• 要么把data文件夹重命名为_data（推荐，符合Eleventy默认规范）；
• 要么在Eleventy配置文件中自定义数据目录路径：

  const yaml = require("js-yaml");
  module.exports = (eleventyConfig) => {
    // 自定义数据目录为"data"
    eleventyConfig.dir = {
      data: "data"
    };
    // YAML解析配置
    eleventyConfig.addDataExtension("yaml", (contents) => yaml.safeLoad(contents));
  };
  

2. 遍历方式错误（即使数据加载成功也会失效） #

假设数据已经正确加载，reviews其实是一个对象（键是每个YAML文件的文件名，比如entry-7128372832，值是对应的评论内容），而不是数组。直接用{% for review in reviews %}遍历的是文件名字符串，自然访问review.name会没有内容。

解决办法（Nunjucks模板）： #

方法1：遍历对象的键值对

{% for filename, review in reviews %}
<div class="review">
  <p><strong>{{ review.name }}</strong></p>
  <p>Rating: {{ review.rating }}/5</p>
  <p>{{ review.review }}</p>
</div>
{% endfor %}

方法2：转成数组后遍历（更直观）

用Nunjucks的dictvalues过滤器把对象的值提取成数组：

{% for review in reviews | dictvalues %}
<div class="review">
  <p><strong>{{ review.name }}</strong></p>
  <p>Rating: {{ review.rating }}/5</p>
  <p>{{ review.review }}</p>
  <p>Date: {{ review.date | date("YYYY-MM-DD") }}</p>
</div>
{% endfor %}

方法3：排序后遍历（可选）

如果需要按评论日期排序，可以先转数组再排序：

{% set sortedReviews = reviews | dictvalues | sort(false, false, "date") | reverse %}
{% for review in sortedReviews %}
<div class="review">
  <p><strong>{{ review.name }}</strong></p>
  <p>Rating: {{ review.rating }}/5</p>
  <p>{{ review.review }}</p>
  <p>Date: {{ review.date | date("YYYY-MM-DD") }}</p>
</div>
{% endfor %}

3. 额外验证技巧 #

不确定数据是否加载？可以在模板中输出reviews的结构来确认：

<pre>{{ reviews | dump(2) }}</pre>

• 如果输出是空对象{}：回到原因1，检查数据目录配置；
• 如果输出是包含文件名键的对象：说明数据已加载，调整遍历方式即可。

4. 排查YAML解析问题 #

虽然你配置了YAML解析，但可以做个小检查：

• 确保js-yaml已安装：运行npm install js-yaml --save；
• 检查单个YAML文件的语法是否正确（比如有没有未闭合的引号、缩进错误），语法错误会导致文件解析失败，无法加载数据。

内容的提问来源于stack exchange，提问作者Jay