Файлы данных с содержанием 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 умно показывает / скрывает описания с помощью '+' / '-' символы - вся эта сторона вещей работает просто прекрасно)

Answer 1

Измените {{ question.answer }} на {{ question.answer | safe }}

(см. https://www.11ty.dev/docs/layouts/#prevent -double-escaping-in-layout - это ясно, как только вы поймете, о чем он говорит :))

Answer 2

Он должен работать, вставляя символы прямо в кавычки в json. Используйте неразрывные пробелы для отступов и точки юникода для точек. В противном случае каркас сломан.