这篇文章主要介绍了让博客园博客自动生成章节目录索引的多个js代码,需要的朋友可以参考下

第一种：只支持一级目录

，作为段落不支持分类

一个好的博文除了博文的质量要好以外，好的组织结构也能让读者阅读的更加舒服与方便，我看园子里面有一些园友的博文都是分章节的，并且在博文的前面都带有章节的目录索引，点击索引之后会跳转到相应的章节阅读，并且还可以回到目录顶端，其中 Fish Li 的博文就是这种组织，当然这种结构如果是在写博文的时候人工设置那是非常麻烦的，无疑是增加了写作人的工作量。如果能自动生成章节索引岂不是节省了一大堆工作量。本来想通过FireBug看看Fish Li源码是怎么实现的，但是好像js是加密过的。那我就自己动手了，其实也没多少代码，很简单。

html代码

章节1
 
这里是章节1的内容
 
章节2
 
这里是章节2的内容
 
章节3
 
这里是章节3的内容
 
章节4
 
小小代码，不值一提，如果您觉得对您还有一点用，就点个赞支持一下吧。

登录后复制

js代码

登录后复制

使用方法：登录到博客园之后，打开博客园的后台管理，切换到“设置”选项卡，将上面的代码，粘贴到 “页脚HTML代码” 区保存即可。

注意：上述js代码中提取的h3作为章节的标题，如果你的标题不是h3请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外，还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接，以方便读者回到目录。本篇文章的目录结构就是自动生成的效果，如果你觉得有用，就赶快试用一下吧。

原文：https://www.cnblogs.com/wangqiguo/p/4355032.html

第二种：支持二级分类

通过

效果图：

对于比较长的文章，有一个好的目录索引是很有必要的，可以让读者比较清楚地了解文章内容和层次。然而，目前（2015.7）博客园不像csdn博客那样，会对发布的文章自动生成目录索引。不过，一些网友通过博客园后台提供的一些自定义功能，自己写脚本实现了这一功能。我用的脚本主要就是参考@薰衣草的旋律 的，文章地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。

原作者的脚本只支持1级目录，我改了两级：第1级是h2，第2级是h3。还添加了一些小玩意，比如讨论qq群号。效果如下图所示：

添加功能的具体步骤是：

1、确保自己的博客园后台支持js
这个默认是不支持，需要向官方发个邮件申请开通（邮箱是contact@cnblogs.com），我简单写了封邮件，1小时就回复了，邮件内容我只写了两个字：如题。。。。
2、到后台加入脚本
打开博客园后台，进入“设置”标签页，在最下面的“页脚Html代码”对应的编辑框粘贴你的js代码，然后点“保存”按钮保存。
3、按格式写文章
在写新博文的时候，注意按照你js脚本里设定的格式来划分章节，比如h2,h3等。当然，以前发布的文章如果有h2,h3之类，也会自动生成目录索引。

如下：

登录后复制

第三种：支持三级目录

通过

实现

效果图

演示页面：//www.jb51.net/article/132341.htm

参考张果的页面，他使用的是

,这里脚本之家小编使用的是

,根据seo的说法，页面中大量出现h1对权重有影响。

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

有关v4 history不能访问的原因

为何response.body().string()不能实现多次调用？

使用Vue组件如何实现日历（详细教程）

以上是关于网站生成章节目录代码示例的详细内容。更多信息请关注PHP中文网其他相关文章！