在hugo中添加可折叠部分

Question

使用hugo，我正在尝试制作一个带有可折叠部分的网页。在 html 中，这将通过以下方式完成：

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

hugo

使用markdown向网站添加内容。我认为

hugo

中很可能有一种方法可以在

markdown

文件中添加可折叠部分，因为我发现了一些 info online 一般可以在 markdown 中添加可折叠部分。

但是，我无法在

hugo

的特定背景下完成这项工作。 换句话说，仅仅在markdown中添加那段html代码是行不通的。这是有道理的，因为我假设 Hugo 的 markdown 引擎不处理原始 html。

如何在hugo中使用这段html代码？

Answer 1

如果将来有人感兴趣，我是这样解决这个问题的：

在

/layouts/shortcodes/details.html

中创建简码

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

然后可以在内容文件内部的 Markdown 中使用此短代码，方法如下：

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

Answer 2

您可能遇到了模板语言中常见的安全功能，该功能会阻止呈现原始 HTML。这个想法是，允许此类内容可能会带来安全问题，特别是如果它来自不受信任的用户输入。

Hugo 有 a

safeHTML

过滤器，可用于渲染 HTML 内容：

{{ contentWithHtmlTags | safeHTML }}

原始答案如下，涉及不同的问题。

---

由于您没有在问题中提供完整的示例，我将根据您的自我回答进行有根据的猜测。我认为你正在尝试做这样的事情：

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

最初的 Markdown 实现 根本没有在块级 HTML 标签内处理 Markdown ，但现代规范和实现的做法有点不同。 GitHub Flavored Markdown 和 CommonMark do 在 HTML 中通过空格与 HTML 分隔时处理 Markdown:

<details>
  <summary>

    **Lorem ipsum**

  </summary>

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

</details>

我不确定您在幕后使用的 Markdown 是什么风格，但 CommmonMark 已成为许多实现的标准。