一、原因

最近看大家的博客都比我优秀。然后就是不论博客大小都有这个目录导航功能。而且我自己在翻看自己的博客站点的时候觉得没有导航功能很麻烦。所以就给自己的博客升级下，增加了导航功能。

写出来的原因是因为这个功能比较冷门。写出来分享一下。

二、编写生成目录

1、先分析你的编辑器生成的文章html结构。

这一步很重要。为什么我不是在编辑器直接去生成目录呢？因为编辑器本身功能就很重，然后你如果在编辑器去生成目录，那么就需要存入数据库，那么就涉及增删改查。真的很low，而且这个其实说白了就是爬虫一样，你分析下html结构，然后for循环之后拿出来就行了。

这里我用的quill.js，生成的所有元素都是单独成行元素。

放个我自己的html结构图

这里只是html结构，最好是看childNodes字段，仔细去看。我的属于所有元素单独一行。不存在html嵌套

2、用js遍历你的文章的内部html结构

这时候比较简单了，就是遍历下html元素。得到一个数组

上代码

// 生成目录
generate_catalog() {
  // 保证渲染成功
  this.$nextTick(() => {
    const article_content = this.$refs["article"];
    const nodes = ["H1", "H2", "H3"];
    let titles = [];
    article_content.childNodes.forEach((e, index) => {
      if (nodes.includes(e.nodeName)) {
        const id = "header-" + index;
        e.setAttribute("id", id);
        titles.push({
          id: id,
          title: e.innerHTML,
          level: Number(e.nodeName.substring(1, 2)),
          nodeName: e.nodeName
        });
      }
    });
    this.catalog = titles;
  });

可以看到，我生成的时候还给H1——H6标签设置了id，这个是很有必要的，因为你需要做锚点连接。

然后就是存储标题之类的

3、写html代码

数据都有了，那么也没什么难度了，

就是开写html就行了

<ul class="catalog">
  <template v-for="(item, index) in catalog">
    <li :key="index" :style="{ paddingLeft: item.level * 22 + 'px' }">
      <a
        :href="'#' + item.id"
        :style="{ fontSize: 18 * (1 - 0.1 * item.level) + 'px' }"
        >{{ item.title }}</a
      >
    </li>
  </template>
</ul>

4、css吸顶效果

这里我没考虑兼容性，就是用了

position: sticky;

5、锚点连接

这里比较简单，说白了就是利用a标签的href属性里面是id属性的时候那么就会跳转到页面对应的html下面。

示例：

<a href="#ceshi">biaoti</a>
<div id="ceshi"></div>

实现文章生成目录导航