在 hugo 中添加可折叠部分

Question

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

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

hugo 通常使用 markdown to add content to the website. I think it's very likely there is a way in hugo to add a collapsible section in the markdown file, because I found some info online 在 markdown 中添加可折叠部分。

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

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

Answer 1

如果以后有人感兴趣，我是这样解决的：

在 /layouts/shortcodes/details.html

中创建简码

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

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

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

Answer 2

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

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

{{ contentWithHtmlTags | safeHTML }}

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

由于您没有在您的问题中提供完整的示例，我根据您的 self-answer 进行有根据的猜测。我想你是想做这样的事情：

<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, but modern specifications and implementations do things a bit differently. GitHub Flavored Markdown and 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 已成为许多实现中的标准。

在 hugo 中添加可折叠部分

Add collapsible section in hugo

markdown

hugo