我们在写博客的时候，如果博文里面有目录，会给人结构清晰、一种一目了然的感觉，看目录就知道这篇博文要讲解的内容，并且点击目录标题就可以跳转到具体的内容，这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容，但是遗憾的是博客园不支持博文目录的生成，好像也有园友给博客园提建议，希望能够像CSDN那样能够自动生成博文目录，但是不知道是什么原因，博客园一直都没有把这个功能加上去，既然没有，那我就自己做吧，研究了2天，总算是按照自己的设想做出来了，最终效果如下：
下面来介绍一下这个小工具的实现。
一、功能描述
这个小工具要实现的核心功能只有两个：
1.自动生成博文目录。
2.点击目录标题定位到标题对应的具体内容，就像使用word生成的目录那样。
1.1、自动生成博文目录
小工具的第一个核心功能，就是通过代码自动抽取标题，然后再包装一下插入文档中。基本实现原理：首先要求博主在写博文的时候，将主标题和次级标题用 HTML标签中的 title tag（如：h1、h2、h3...）包起来；
比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式
将"1.1、自动生成博文目录"设置成"标题3"
然后通过 JS 代码遍历整个包含博文正文的
，过滤出这些标签，再把它们组装成自定义列表的形式，再插入到HTML文档中，如下：
复制代码
2
一、JAVA流式输入/输出原理 3
二、输入输出流分类 4
三、节点流和处理流 5
3.1.节点流类型 6
3.2.处理流类型 7
四、InputStream(输入流) 8
4.1.InputStream的基本方法 9
五、OutputStream(输出流)10
5.1.OutputStream的基本方法11
六、Reader流12
6.1.Reader的基本方法13
七、Writer流14
7.1.Writer的基本方法15
八、节点流讲解16
九、处理流讲解17
9.1.第一种处理流——缓冲流(Buffering)18
9.2.第二种处理流——转换流19
9.3.第三种处理流——数据流20
9.4.打印流——Print21
9.5. 对象流——Object22
十、IO流总结23
复制代码
如果不加任何样式，它在
动态生成的HTML代码结构如下
复制代码
1
5
7
一、功能描述 8
1.1、自动生成博文目录 9
1.2、点击目录标题定位到标题对应的具体内容10
二、源代码11
2.1 js代码12
2.2. CSS样式代码13
三、JS工具的使用14
3.1、后台管理的相关设置15
3.2、博文标题样式设置16
四、总结17
18
19
