在 hugo 中添加可折叠部分答案

【问题标题】：Add collapsible section in hugo在 hugo 中添加可折叠部分
【发布时间】：2022-12-08 02:36:24
【问题描述】：

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

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

hugo 使用markdown 向网站添加内容。我认为 hugo 中很可能有一种方法可以在 markdown 文件中添加可折叠部分，因为我发现一些 info online 通常可以在降价中添加可折叠部分。

但是，我无法在hugo 的特定上下文中进行这项工作。换句话说，简单地在markdown中添加那段html代码是行不通的。这是有道理的，因为我假设 Hugo 的降价引擎不处理原始 html。

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

【问题讨论】：

具体来说，“我做不到”是什么意思？您在上面显示的示例只是没有任何 Markdown 的 HTML。你能提供一个具体的例子并描述发生了什么吗？
在 markdown 中使用那段 html 代码不起作用。

标签： markdown hugo

【解决方案1】：

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

Hugo 有 a safeHTML filter 可用于呈现 HTML 内容：

{{ contentWithHtmlTags | safeHTML }}

原始答案如下，它处理不同的问题。

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

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

原始的 Markdown 实现 simply didn't process Markdown inside block-level HTML tags，但现代规范和实现的方式有所不同。 GitHub 风格的 Markdown 和 CommonMark do process Markdown in HTML when it is separated from the HTML by whitespace：

<details>
  <summary>

    **Lorem ipsum**

  </summary>

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

</details>

我不确定您在幕后使用的是哪种 Markdown，但 CommmonMark 已成为许多实现中的标准。

【讨论】：

嘿，谢谢你的回答。我只是简单地尝试使用这段 html 代码，但是 Hugo 没有处理它。我编辑我的问题以尝试使其更清楚。
@DevShark，请查看我更新的答案是否有帮助。
| safeHTML 应该工作...
@雨果先生，谢谢！我无法找到它只是搜索“安全”，这是我在其他语言中习惯的。现在更新我的答案。
@DevShark，请查看上面最新更新的答案和雨果先生的评论。这比全局禁用 HTML 安全功能要好得多。

【解决方案2】：

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

在/layouts/shortcodes/details.html中创建一个简码

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

然后这个短代码可以在内容文件中使用，在降价中，通过以下方式：

{{< details "This is the summary" >}}
Collapsed text
{{< /details >}}

【讨论】：