Добавить складной раздел в Хьюго

Используя Хьюго, я пытаюсь создать веб-страницу со сворачиваемым разделом. В html это делается следующим образом:

<details>
      <summary>Click to expand!</summary>
      
     Hidden explanation
</details>

hugo использует уценка для добавления контента на сайт. Я думаю, что, скорее всего, есть способ hugo добавить сворачиваемый раздел в файл markdown, потому что я нашел какой-то информация онлайн для добавления сворачиваемых разделов в уценке вообще.

Однако я не мог заставить это работать в конкретном контексте hugo. Другими словами, простое добавление этого фрагмента html-кода в уценку не сработало. Это имеет смысл, поскольку я предполагаю, что механизм уценки Hugo не обрабатывает необработанный html.

Как я могу использовать этот фрагмент html-кода в Hugo?


1
50
2

Ответы:

Если кому-то в будущем будет интересно, вот как я это решил:

Создайте шорткод в /layouts/shortcodes/details.html

<details>
  <summary>{{ (.Get 0) | markdownify }}</summary>
  {{ .Inner | markdownify }}
</details>

Затем этот шорткод можно использовать внутри файла содержимого в уценке следующим образом:

{{< details >}}
Collapsed text
{{< /details >}}

Решено

Вы, вероятно, сталкиваетесь с общей функцией безопасности в языках шаблонов, которая предотвращает визуализацию необработанного HTML. Идея состоит в том, что разрешение такого контента может привести к проблемам с безопасностью, особенно если оно исходит от ненадежного пользовательского ввода.

У Hugo есть фильтр safeHTML, который можно использовать для рендеринга HTML-контента:

{{ contentWithHtmlTags | safeHTML }}

Далее следует исходный ответ, который касается другого вопроса.


Поскольку вы не привели полный пример в своем вопросе, я делаю обоснованное предположение, основанное на вашем самостоятельном ответе. Я думаю, вы пытались сделать что-то вроде этого:

<details>
  <summary>**Lorem ipsum**</summary>
  Lorem ipsum _dolor sit amet_, consectetur [adipiscing elit](https://example.org/)
</details>

Исходная реализация Markdown просто не обрабатывал Markdown внутри HTML-тегов блочного уровня, но современные спецификации и реализации работают немного по-другому. GitHub Flavored Markdown и CommonMark делать обрабатывает Markdown в HTML, когда он отделен от HTML пробелом:

<details>
  <summary>

    **Lorem ipsum**

  </summary>

  Lorem ipsum _dolor sit amet_, consectetur [adipiscing elit](https://example.org/)

</details>

Я не уверен, какую разновидность Markdown вы используете под капотом, но CommonMark стал чем-то вроде стандарта во многих реализациях.