我们在做网站的时候，有时候会用到TOC，它的全称是什么呢？table of content

TOC有什么用呢？

可以提取一个目录放到文章的开头，有利于读者非常容易的点击对应的段落。打个比方说，有一篇文章是讲解如何种树，这篇文章有一万字，在第8000字到第9000字的时候，讲解如何施肥。我本来就是想进来看看如何施肥的，但是由于网页有10000字，如果没有目录，我就需要一点点的看，直到在第8000字的时候看到了关于如何施肥的文章。

有同学可能会讲，我们写文章都会写标题啊，会有H1标题，比如第一个标题是“种树的时间？”，第二个标题是“什么季节适合种什么树？”，第N个标题是“种树如何施肥”，用户可以看这个标题来寻找内容。这个逻辑没有毛病，但是一篇文章一万字，即使有标题，是不是也需要不断的用鼠标往下滑动才能翻到对应的段落？

假如我们将各个标题整理一下放到文章的开头，或者悬浮在网页两侧的话，用户只要点击任意一个标题就能到达对应的位置，是不是用户体验更好？

想达到这种效果，就可以利用TOC，实际上TOC是一个术语，并不是指插件。但是我们使用WordPress搭建网站的时候，只要去搜TOC这三个英文字母，就会找到实现TOC所用的插件。

如何实现TOC？

直接在WordPress后台的插件库中搜索“TOC”，就可以看到好多插件。或者直接搜索“table of contents plus”也可以，这个插件是比较出名的一个插件了。

Table of Contents Plus

如何配置TOC？

插件安装完成以后，会有一个默认配置。所以需要检查一下自己期望的页面是否会生成TOC。比如期望POST页面生成TOC，Page页面不生成TOC。

一般情况下文章都会以POST的形式发表，所以POST页面是需要生成TOC了。不过如果需要做一个特殊的Page，那么Page页面也需要生成TOC。

来看一下我博客中使用的TOC的配置：

Position：决定了TOC显示在网页哪个位置

Show When：也就是标题超过几个的时候才会显示TOC，比如我我现在设置的是4，也就是只有H标题达到4个或者更多的时候才会有TOC目录的显示。

Heading text：就是TOC目录的一个标题，可以不用改，因为好多网站也都在使用默认的名字。

看一下Advanced的这个配置，都没有改动过，都是默认配置

其中要注意“Hyphenate”这个配置，默认是下划线，而不是“-”这种中联线，如果在意的话可以更改一下，不过好多个TOC插件默认都是使用的下划线。

但实际上我们现在用WordPress搭建好的网站，使用的URL一般都是中横线的，比如我们看看Ahrefs这篇文章的锚链接：https://ahrefs.com/blog/content-hub/#what-are-content-hubs，对于what-are-content-hubs都是中横线，而不是下划线。不过Ahrefs这篇文章内的目录，不是TOC插件做出来的。

TOC有什么效果呢？

目录效果

下面我们来看看TOC插件安装以后，会有什么效果？

如下图所示，这是我博客另一篇文章的一个TOC效果，红框中的是TOC生成的，就是一个目录效果。当用户点击“研究代码”的时候，就会跳到对应的段落。

锚链接效果

TOC除了上述的一个目录效果，还有啥效果呢？还有一个锚链接的效果，为什么我们点击目录会进入对应的段落，就是因为锚链接起的作用。

比如这个链接：https://ensky.tech/is-toc-different-with-anchor-link/#i-2

我们看到最后面有一个#i-2，这个#是锚链接的标识，然后“i-2″是一个ID，实际上是HTML代码的作用。只要知道这个可以作为一个锚链接就可以了。

如果一篇文章有了TOC，那么可能就会有好几个锚链接，当我们在其余文章引用这篇文章的时候，就可以使用这个锚链接，比如使用https://ensky.tech/is-toc-different-with-anchor-link/#i-2，而不是使用https://ensky.tech/is-toc-different-with-anchor-link/，如果你使用的是”https://ensky.tech/is-toc-different-with-anchor-link/#i-2“，这样就会进入这个网页的第一段。

如果使用的是”https://ensky.tech/is-toc-different-with-anchor-link/#i-2“，那么就会进入这个网页的后半部分”研究代码“这个段落。所以说对于内链的使用上，我们使用TOC的话，可以更好的定位到相关内容，对于内容相关性上会比较有利。

还有一个小点需要注意的就是，我刚才借用的TOC，锚链接是i-2，这个”i-2″并不是友好型的URL，如果友好型的话，应该是“research-code”，因为中文是”研究代码“。这就是因为中文的关系，TOC插件识别不好，搞了一个”i-2″出来，如果是英文的话，会直接使用标题的，比如英文是research code，那么TOC多数时候是#research-code，这样的URL就友好多了，Google看到了也容易认识这个URL是做啥用的。

TOC和HTML代码中的锚链接有什么关系？

关于这个TOC与锚链接的作用，我专门写过一篇文章来分析。可以读一下这篇文章https://ensky.tech/is-toc-different-with-anchor-link/

TOC插件是否可以互换？

插件“Table of Contents”和“Table of Contents Plus”应该是可以互换的，因为我有一个网站，用的是Plus这个插件，但是不知道哪个插件升级影响了它，怎么整也显示不出来了，然后我就换了一个TOC插件，但是之前的锚链接并没有发生变化。所以说，我们配置的时候尽量使用默认配置，这样换其余插件，也可以平移过去。