将目录添加到 Hugo 中的 hyde-hyde 主题答案

【问题标题】：Add table of contents to hyde-hyde theme in Hugo将目录添加到 Hugo 中的 hyde-hyde 主题
【发布时间】：2018-06-10 22:43:52
【问题描述】：

我正在使用 Hugo (https://github.com/htr3n/hyde-hyde) 为我的网站使用 hyde-hyde 主题，但我无法找到一种方法来为我的帖子添加内容表格，尤其是长帖子。这个主题有简单的方法吗？

谢谢。

【问题讨论】：

标签： hugo hyde

【解决方案1】：

2018 年 9 月 30 日更新：

我误读了关于 TOC 的原始问题，而是在 Markdown 中的表格上给出了答案。

关于目录，基本上有两种做法：

a) 使用 Hugo support for TOC 并添加一些 CSS 规则以根据需要设置 TOC 样式

b) 使用可以扫描 HTML 内容并提取标题以创建 TOC 的外部库，例如 Tocbot。 Tocbot 很powerful and configurable。

特别是在hyde-hyde，你可以做如下实现一个TOC：

a) 例如，将{{ .TableOfContents }} 添加到layouts/partials/page-single/content.html

{{ if .Site.Params.toc }}
    {{ .TableOfContents }}
{{ end }}

b) 使用根元素 nav#TableOfContents 为原始 Hugo 生成的 TOC 设置样式，例如

#TableOfContents > ul {
  list-style-type: none;
  padding-left: 0;
}
#TableOfContents > ul > li ul {
  list-style-type: none;
  padding-left: 1em;
}

您可以进一步研究示例代码 here，我在其中开发了可折叠 TOC。

我是hyde-hyde 的作者，所以希望我能提出一些建议。

hyde-hyde 是gohugo 用来从 Markdown (MD) 内容生成静态网页 (HTML/CSS/JS) 的公正主题。因此，您需要在 Markdown 文件中添加表格。

请注意，original Markdown 中未指定表格，但在 MultiMarkdown (MMD) 或 Github Flavored Markdown (GFM) 等许多变体中都支持表格。

另一种可能的方法是使用 Markdown 支持的内联 HTML 来根据需要添加 <table>...</table>。如果您需要复杂的表（例如使用 rowspan 或 colspan），这会更好地工作，如您所见 here。

上述方法也可以与其他 Hugo 主题一起使用。无论哪种方式，Hugo 都能很好地处理表格。

【讨论】：

【解决方案2】：

我是gohugo的新手，所以无法提供准确的支持。但似乎 gohugo 带有一个内置系统，用于在帖子中添加目录。这是该功能的 gohugo 文档：https://gohugo.io/content-management/toc/

我不确定 TOC 将出现在以 Hyde-Hyde 主题发布的帖子中的位置和方式。该主题的作者可能对此有所了解。

【讨论】：