TOC插件研究

群里讨论问题，有个大佬说TOC与一般的锚链接是不一样的。来研究研究它。

首选我安装的是“Table of Contents Plus”，官网地址：https://wordpress.org/plugins/table-of-contents-plus/，这个插件的安装次数已经有300,000+，已经具有标杆价值了。

首先随便创建一篇文章

注意：文章到多做几个H2的标题，至少4个，看TOC的默认设置。

查看TOC的效果

现在TOC的效果已经出来了，可以看到标题了。

研究代码

打开网页，点击查看源文件，然后搜索how are you，就能找到我们所需要的代码了。

然后我们看下面的代码，分为两部分：

第一部分：是一个div，然后id=toc_container，class是no_bullets

第二部分：div结束以后，是一些H2标签和P标签。

我们来研究研究上述两部分。

首先看第二部分

是H2和P标签，这个无任何特殊不同，和普通格式是一样的。不过多一个span，其中span中有一个id，这个id是定位使用的，没有“google SEO”的技术意义。

span标签的解释：

id标签是定位使用的，我们普通的锚链接也需要使用id来定位。

我们来看看第一部分代码：

第一部分代码中有一部分是锚链接， 比如这行代码，就是一个锚链接的作用，只是多了一个span。

<a href=”#How_do_you_do”><span class=”toc_number toc_depth_1″>3</span> How do you do?</

在这部分代码中，一些div, p, span, ul, li等标签都没有特殊意义，就是起一个普通HTML标签的作用，但还有一些class，我们看看里面都有啥。其中使用到了4个class：

no_bullets
toc_title
toc_number
toc_depth_1

其中都是格式控制，无特殊不同

CSS源码在这里：

代码来自于 domain.com/wp-content/plugins/table-of-contents-plus/screen.min.css?ver=2106

li,.toc_widget_list.no_bullets,.toc_widget_list.no_bullets li {
	background: 0 0;
	list-style-type: none;
	list-style: none
}

#toc_container.have_bullets li {
	padding-left: 12px
}

#toc_container ul ul {
	margin-left: 1.5em
}

#toc_container {
	background: #f9f9f9;
	border: 1px solid #aaa;
	padding: 10px;
	margin-bottom: 1em;
	width: auto;
	display: table;
	font-size: 95%
}

#toc_container.toc_light_blue {
	background: #edf6ff
}

#toc_container.toc_white {
	background: #fff
}

#toc_container.toc_black {
	background: #000
}

#toc_container.toc_transparent {
	background: none transparent
}

#toc_container p.toc_title {
	text-align: center;
	font-weight: 700;
	margin: 0;
	padding: 0
}

#toc_container.toc_black p.toc_title {
	color: #aaa
}

#toc_container span.toc_toggle {
	font-weight: 400;
	font-size: 90%
}

#toc_container p.toc_title+ul.toc_list {
	margin-top: 1em
}

.toc_wrap_left {
	float: left;
	margin-right: 10px
}

.toc_wrap_right {
	float: right;
	margin-left: 10px
}

#toc_container a {
	text-decoration: none;
	text-shadow: none
}

#toc_container a:hover {
	text-decoration: underline
}

.toc_sitemap_posts_letter {
	font-size: 1.5em;
	font-style: italic
}