求助：Eleventy渲染FAQ页面时JSON中HTML内容转义问题解决

你遇到的核心问题是Eleventy默认会自动转义模板输出的内容，导致JSON里的HTML实体（比如<）被原样显示，而非解析成对应的HTML标签。下面是几个可行的解决办法：

1. 使用Eleventy的safe过滤器 #

Eleventy提供了safe过滤器，用来标记内容是安全的，不需要转义。你只需要修改模板里输出answer的部分：

原来的代码：

<div class="details">
  {{ question.answer }}
</div>

修改为：

<div class="details">
  {{ question.answer | safe }}
</div>

这个过滤器会告诉Eleventy直接输出内容，不做HTML转义处理。

2. 修正JSON里的HTML内容格式 #

你的JSON里的answer部分用了HTML实体（<、>），这会导致即使加了safe过滤器，浏览器也会把它们当成文本显示。你需要把JSON里的实体替换成真实的HTML标签，同时确保JSON字符串的转义正确：

原来的JSON片段：

"answer": "<ul>\n<li>First, json needs newlines escaped to be newlines</li>\\n<li>Eleventy seems to 'sanitize' the string</li>\\n</ul>"

修正后：

"answer": "<ul>\n<li>First, json needs newlines escaped to be newlines</li>\n<li>Eleventy seems to 'sanitize' the string</li>\n</ul>"

这样配合safe过滤器，HTML标签就能被正常渲染了。

3. 可选：用Markdown代替直接写HTML #

如果觉得直接写HTML比较繁琐，你可以把answer写成Markdown格式，然后用Eleventy的markdown过滤器转换为HTML，再加上safe过滤器：

JSON里改成Markdown格式：

"answer": "- First, json needs newlines escaped to be newlines\n- Eleventy seems to 'sanitize' the string"

模板里修改为：

<div class="details">
  {{ question.answer | markdown | safe }}
</div>

这样既不用写繁琐的HTML标签，也能得到正常渲染的列表。

⚠️ 注意：使用safe过滤器时，要确保你信任JSON里的内容（比如是你自己维护的，不是用户输入的），避免XSS安全风险。

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