30 Markdown 生成目录

1. 前言

目录是文章内容的整体索引，是文章结构的最直观表现形式。

Markdown 为生成目录提供了快捷方式，大大降低了文章目录的编排复杂度。

环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。
「TOC」是 Markdown 扩展语法，Typora 默认已支持该扩展。

2. 语法详解

2.1 目录的自动生成

在 Markdown 中，自动生成目录非常简单，只需要在恰当的位置添加 [TOC] 符号，凡是以 # 定义的标题都会被编排到目录中。

实例 1：

使用 [TOC] 生成文档目录导航。

[TOC]

# 一级标题

一些内容。。。。

## 二级标题

一些内容。。。。

### 三级标题

一些内容。。。。

渲染效果如下：

其 Html 内容如下：

<div class="md-toc" mdtype="toc">
	<p class="md-toc-content" role="list">
    <span role="listitem" class="md-toc-item md-toc-h1" data-ref="n2">
      <a class="md-toc-inner" href="#一级标题">一级标题</a>
    </span>
    <span role="listitem" class="md-toc-item md-toc-h2" data-ref="n3">
      <a class="md-toc-inner" href="#二级标题">二级标题</a>
    </span>
    <span role="listitem" class="md-toc-item md-toc-h3" data-ref="n4">
      <a class="md-toc-inner" href="#三级标题">三级标题</a>
    </span>
  </p>
</div>

2.2 手动书写目录

尽管自动生成目录非常方便，我们也难免有自定义目录的需求，如只显示一二级大标题等。

手动添加目录的方法就是将「列表」和「页内超链接」相结合。

实例 2：

用列表和链接做出目录效果。

- [一级标题](#一级标题)
  - [标题 1-1](#二级标题 1-1)
  - [标题 1-2](#二级标题 1-2)
- [二级标题](#二级标题)
  - [标题 2-1](#二级标题 2-1)
  - [标题 2-2](#二级标题 2-2)
- [一级标题](#一级标题)
  - [标题 1-1](#二级标题 1-1)
  - [标题 1-2](#二级标题 1-2)
- [二级标题](#二级标题)
  - [标题 2-1](#二级标题 2-1)
  - [标题 2-2](#二级标题 2-2)

# 一级标题
一些内容……
## 二级标题 1-1
一些内容……
## 二级标题 1-2
一些内容……
# 二级标题
一些内容……
## 二级标题 2-1
一些内容……
## 二级标题 2-2
一些内容……

其渲染效果如下：

3. 使用场景

目录适用于有章节标题的文章，通常用于跳转，所以适合在网页或 PDF 文件中使用。

4. 小结

• Markdown 支持自动使用 [toc] 标记生成目录；
• 当自动生成的目录无法满足需求时，我们仍可通过「页内超链接」的形式定义目录；
• 由于 Markdown 没有分页的概念，所以目录中无法自动页码。