雕琢文字细节，用 Markdown 自动生成目录，提升阅读体验

2023-12-25 16:54:00

Markdown 的魅力

在上一篇博文中，我们讨论了如何使用 Markdown 为文章提供美观大方的排版。Markdown 不仅如此，它还可以自动提取文章的目录结构。

让我们回顾一下文章详情页的视图。在 detail 视图函数中，我们将文章的 body 字段传递给 Markdown 进行解析。Markdown 将文章的内容解析为 HTML 格式，同时也会自动提取文章的标题标签，并将它们组织成一个有序的目录结构。这个目录结构可以用来在文章详情页中生成一个导航栏，方便读者快速浏览和访问文章内容。

如何为文章自动生成目录

1. 使用标题标签

为了让 Markdown 能够自动提取目录结构，我们需要在文章中使用标题标签来标记各个标题和段落。Markdown 支持六种不同的标题标签，从 H1 到 H6，H1 是最高级别的标题，H6 是最低级别的标题。

在 Markdown 中，可以使用以下语法来创建

# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题

2. 使用目录生成工具

当我们使用 Markdown 为文章创建了标题标签后，就可以使用目录生成工具来将标题标签转换为一个有序的目录结构。

有多种不同的目录生成工具可供选择，例如：

TOC.js
Markdown TOC Generator
Markdown Directory Generator

这些工具可以帮助您快速生成文章的目录结构。您可以在线使用这些工具，也可以将它们集成到您的编辑器中。

3. 将目录结构添加到文章详情页

当我们使用目录生成工具生成了文章的目录结构后，就可以将其添加到文章详情页中。

我们可以使用 HTML 代码来将目录结构添加到文章详情页中，如下所示：

<nav class="table-of-contents">
  <ul>
    <li><a href="#h1-标题">H1 标题</a></li>
    <li><a href="#h2-标题">H2 标题</a></li>
    <li><a href="#h3-标题">H3 标题</a></li>
  </ul>
</nav>