写个js小工具自动生成博文目录

2020-12-13 03:01

阅读:258

标签:des   style   blog   class   code   java   

  我们在写博客的时候,如果博文里面有目录,会给人结构清晰、一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下:

    soscw.com,搜素材

下面来介绍一下这个小工具的实现。

一、功能描述

  这个小工具要实现的核心功能只有两个:

    1.自动生成博文目录。

    2.点击目录标题定位到标题对应的具体内容,就像使用word生成的目录那样。

1.1、自动生成博文目录

  小工具的第一个核心功能,就是通过代码自动抽取标题,然后再包装一下插入文档中。基本实现原理:首先要求博主在写博文的时候,将主标题和次级标题用 HTML标签中的 title tag(如:h1、h2、h3...)包起来;

  比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式

soscw.com,搜素材

  将"1.1、自动生成博文目录"设置成"标题3"

soscw.com,搜素材

soscw.com,搜素材


评论


亲,登录后才可以留言!