使用CSS计数器，在目录名称前加上了序号，让目录看起来更加井然有序

目录（Text of Contents缩写为TOC），其实就是一篇文章的概要或简述。这好比，去书店买书，先是被这本书的标题所吸引，而后我们才会，翻开这本书目录，看看这本书主要是在讲些什么？我们在看目录的同时，脑中也在不停的思衬，”这本书到底值不值得买呢？但是没有什么实战内容耶！“

文章目录

其实，一篇文章也不非要目录的，只要段落分的好，就算是长篇大论也是无关紧要的！

只是文章有了目录，让人一眼就能瞧出这篇文章到底讲了什么？虽然标题上有说，但还是得为哪几个段落起个副标题。

再说了，文章目录可以让用户在页面上，点击到达指定目录名称下进行浏览。虽然这在很大层度上是可以通过鼠标滑动，滚动到想要浏览的位置。

Hugo-theme-kiwi开源博客主题已然有了 文章目录 这一功能，也就是 秋码记录 站点正在使用的博客主题（由于 秋码记录 托管于 Github.com Pages，故而国内的友人在访问时，比较缓慢，甚至有时可能出现 无法打开该网站）。

对目录名称前添加序号，我们首先想到的当然是使用 Hugo 模板渲染去实现。

序号 ，顾名思义，就是有顺序的号码，通俗来讲，便是 1、，2、，3、，4、，……。可在Hugo 模板渲染中使用 计数器 来实现。

css 计数器

或许也只有在使用了 CSS 计数器 后，你就会摒弃代码中使用 Hugo 模板渲染的那部分 又长又拖 代码了。

在 CSS 计数器中，counter-reset和 counter-increment 属性是必不可少的。counter-reset在每次新的列表开始时重置计数器，而 counter-increment 在每个列表项上增加计数器。

需要注意的是：counter-reset 是 需要计数的父标签上 的！

那么，就将 counter-reset设置在 ol 标签上即可，即便是某一项有子目录，那也还是在 ol 标签内的！

.toc-content  ol{
     list-style-type: none;
      counter-reset: item
 }

现在，我们就可以对 目录名称 设置 伪选择器 了。

在编写 CSS 样式之前，有必要说下 counters() 函数，在 CSS 中，它返回一个计数器的列表值，这个列表可以包含一个或者多个嵌套的计数器。

函数 counters() 有两个参数：

1. 第一个参数是你要访问的计数器的名称，在你的例子中，该名称就是 item。
2. 第二个参数是字符串，用来分隔计数器的各个级别。在你的例子中，这个分隔符是英文的句点 .

.toc-content ol li a:first-of-type::before{
        counter-increment: item;
        content: counters(item,".")"、";
        font-weight: 700;
        margin-right: 1px;
    }

比如在多级嵌套的列表中，如果在第一级的第二个项中的第三个小项，那么 counters() 的值就会是 2.3、。

字符串 、 紧接着 counters(item, ".") 的作用是将结果后面添加一个 顿号，使其格式化输出更美观。

所以 counters(item, ".") "." 的作用就是生成并显示一个根据当前嵌套列表项的层级和序号构成的数字序列，每一级数字之间用句点分隔，并在最后跟着一个 顿号。例如输出1、，2.1、，2.2、，等等。