在hugo中添加可折叠部分

Question

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

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

hugo使用Markdown向网站添加内容。我认为很可能有一种方法hugo可以在文件中添加可折叠部分markdown，因为我在网上找到了一些信息来一般在 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 "This is the summary" >}}
Collapsed text
{{< /details >}}

Answer 2

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

Hugo 有一个safeHTML可用于渲染 HTML 内容的过滤器：

{{ contentWithHtmlTags | safeHTML }}

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

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

{{ contentWithHtmlTags | safeHTML }}

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

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

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