包含 html 内容的数据文件

Question

我正在使用外部数据制作一个非常简单的 html 页面...这是让我感到悲伤的一点：

<section class="faq_main">
{% for section in faq.sections %}
    <h3>{{ section.heading }}</h3>
    {% for question in section.questions %}
        <article class="faq_question">
            <a id="hide_{{ section.code }}_{{ question.code }}"
               href="#hide_{{ section.code }}_{{ question.code }}"
               class="hide"><span class="faq_toggler">+</span> {{ question.question }}</a>
            <a id="show_{{ section.code }}_{{ question.code }}"
               href="#show_{{ section.code }}_{{ question.code }}"
               class="show"><span class="faq_toggler">-</span> {{ question.question }}</a>
            <div class="details">
                {{ question.answer }}
            </div>
        </article>
    {% endfor %}
    <p>&nbsp;</p>
{% endfor %}
</section>

...和匹配的 faq.json 文件：

{
    "sections" : [
      { "heading" : "Section the first",
        "code" : "gn",
        "questions" : [
                {
                    "question": "What do questions need?",
                    "code" : "1",
                    "answer": "An answer"
                },
                {
                    "question": "Is this also a question?",
                    "code" : "2",
                    "answer": "Yes, it is"
                },
                {
                    "question": "Is this junk data?",
                    "code" : "a",
                    "answer": "Yes"
                },
            ]
        },
        {
            "heading": "Another section",
            "code" : "f",
            "questions": [
                {
                    "question": "Can I have html in my answer?",
                    "code" : "2",
                    "answer": "<ul>\n<li>First, json needs newlines escaped to be newlines</li>\n<li>Eleventy seems to 'sanitize' the string</li>\n</ul>"
                },
                {
                    "question": "question b",
                    "code" : "b",
                    "answer": "answer b"
                },
                {
                    "question": "question c",
                    "code" : "or",
                    "answer": "answer c"
                },
            ]
        }
    ]
}

..... 相关答案的呈现文本是：

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

这里有什么选择吗？有没有办法允许[甚至是] html 元素的子集进入页面？

（是的，CSS 使用“+”/“-”符号进行了巧妙的 show/hide 描述 - 所有这些方面都很好用）

Answer 1

它应该通过将符号直接插入 json 中的引号来工作。使用不间断空格作为缩进，使用 unicode 点作为点。不然框架就坏了。

Answer 2

将{{ question.answer }}更改为{{ question.answer | safe }}

（请参阅 https://www.11ty.dev/docs/layouts/#prevent-double-escaping-in-layouts - 很清楚，一旦您理解了它的意思:)）

包含 html 内容的数据文件

Data files with html content

eleventy