让网站自动生成章节目录索引的多个js代码

第一种：只支持一级目录

h3，分类不支持作为段落

一篇好的博文不仅质量更好，而且有更好的组织结构，可以让读者读起来更舒服、更方便。我觉得花园里有一些博文是分章节的，博文前面有章节的目录索引。点击索引后，可以跳转到对应的章节进行阅读，并返回目录顶部。鱼李的博文就是这样一个组织。当然，如果写博文的时候手动设置这个结构，非常麻烦，这无疑增加了作者的工作量，如果章节索引可以自动生成岂不是节省了很多工作？我想看看Fish Li源代码是如何通过FireBug实现的，但是看起来js是加密的。那我自己来。其实我代码不多。很简单。

Html代码

H3第1章/h3p这里是第1章/ph3的内容第2章/h3p这里是第2章/ph3的内容第3章/h3p这里是第3章/ph3的内容第4章/h3p的小代码，这是不值得一提的。如果你认为它对你仍然有用，请称赞我。/pjs代码

脚本语言=' JavaScript '类型=' text/JavaScript '//generate directory index list函数generate econtlist(){ var jquery _ H3 _ list=$(' # cnblogs _ post _ body H3 ')；//如果你的章节标题不是h3，只需要在这里替换H3 If(jquery _ H3 _ list . length 0){ var content=' a name=' _ labeltop '/a '；内容=' div id=' navCategorycontent=' p style=' font-size :18 px '正在读取内容/p '；内容=' ulfor(var I=0；ijquery _ h3 _ list.lengthI){ var go _ to _ top=' div style=' text-align : right ' a href=' # _ label top ' rel=' external no follow ' rel=' external no follow '回到顶部/aa name=' _ label ' I ' '/a/div '；$(jquery_h3_list[i])。之前(go _ to _ top)；var Li _ content=' lia href=' # _ label ' I ' ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' ' $(jquery _ H3 _ list[I])。text()'/a/Li '；内容=li _ content}内容='/ul '；内容='/div '；if($('#cnblogs_post_body ')。长度！=0){ $($(' # cn blogs _ post _ body ')[0])。prepend(内容)；} } } GenerateContentList()；/script用法：登录博客公园后，打开博客公园后台管理，切换到“设置”选项卡，将上面的代码粘贴到“页脚HTML Code”区域保存。

注：从上述js代码中提取的h3用作章节标题。如果您的标题不是h3，请在代码注释中自行修改。这段代码不仅在文章开头生成了目录索引，还在每章的右下角(即下一章标题的右上角)生成了“回顶”链接，方便读者返回目录。本文的目录结构是自动生成的效果。如果你觉得有用，就尽快尝试。

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

第二种：支持二级分类

通过h2h3

渲染：

对于长文章，要有一个好的目录索引，让读者清楚地了解文章的内容和水平。但目前(2015年7月)，与csdn博客不同，Blog Park会自动为发表的文章生成目录索引。但也有网友通过Blog Park后台提供的一些自定义功能，编写自己的脚本，实现了这个功能。我用的剧本主要是指@薰衣草的旋律。文章的地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html.

原作者的脚本只支持一级目录，但我改了两级：一级是h2，二级是h3。添加了一些小工具，例如讨论qq群号码。效果如下图所示：

添加功能的具体步骤如下：

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

如下：

脚本语言='javascript '类型='text/javascript'//生成目录索引列表//参考文献： http://www.cnblogs.com/wangqiguo/p/4355032.html//被： zzq函数GenerateContentList()修改{ var main content=$(' # cn blogs _ post _ body ')；var H2 _ list=$(' # cn blogs _ post _ body H2 ')；//如果你的章节标题不是h2，只需要将这里的氘换掉即可if(mainContent.length 1)返回；if(H2 _ list。长度0){ var content=' a name=' _ labelTop '/a '；内容=' div id=' NavCategoryContent=' p style=' font-size :18 px '目录/p '；内容=' ulfor(var I=0；ih2 _ list .纵向){ var go _ to _ top=' div style=' text-align : right ' a href=' # _ labelTop ' rel=' external no follow ' rel=' external no follow '回到顶部/aa name=' _ label ' I ' '/a/div '；$(h2_list[i]).之前(go _ to _ top)；var h3_list=$(h2_list[i]).下一个(H3)；var Li _ content=for(var j=0；jh3 _ list . length j){ var tmp=$(H3 _ list[j]).预报警(“h2”).first()；if(！tmp。是(H2 _ list[I])破；var Li _ anchor=' a name=' _ label ' I ' _ ' j ' '/a '；$(h3_list[j]).前(李_主播)；Li _ content=' lia href=' # _ label ' I ' _ ' j ' ' rel='外部无跟随' $(H3 _ list[j]).text()'/a/Li '；} var li2 _ content=if(Li _ content。长度0)li2 _ content=' lia href=' # _ label ' I ' ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' ' $(H2 _ list[I]).text()'/aul ' Li _ content '/ul/Li '；else li2 _ content=' lia href=' # _ label ' I ' ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' ' $(H2 _ list[I]).text()'/a/Li '；内容=li2 _ content}内容='/ul '；内容='/divp/p '；content=' p style=' font-size :18 px '正文/p '；if($('#cnblogs_post_body ').长度！=0){ $($(' # cn blogs _ post _ body ')[0]).前置(内容);} } var QQ info=' p style=' color : navy；'' font-size:12px '讨论即时通信软件群：135202158/p '；$(主要内容[0]).前置(QQ信息)；} GenerateContentList()；/script

第三种：支持三级目录

通过h2h3h4实现

效果图

演示页面：//www .JB 51。net/article/132341。html文件的后缀

参考张果的页面，他使用的是h1h2h3，这里我们小编使用的是h2h3h4，根据搜索引擎优化的说法，页面中大量出现氕对权重有影响。

脚本语言='javascript '类型='text/javascript' //生成目录索引列表函数GenerateContentList(){ var jquery _ h1 _ list=$(' # content H2 ')；if(jquery _ h1 _ list。长度==0){ return；} if($(“# content”).长度==0){ return；} var content=' a name=' _ labelTop '/a '；内容=' div id=' NavCategoryContent=' p style=' font-size :18 px '目录/p '；//一级目录开始内容=' ul class=' first _ class _ ulfer(var I=0；i jquery _ h1 _ list .纵向){ var go _ to _ top=' div style=' text-align : right ' a name=' _ label ' I ' '/a/div '；$(jquery_h1_list[i]).之前(go _ to _ top)；//一级目录的一条var Li _ content=' lia href=' # _ label ' I ' ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' ' $(jquery _ h1 _ list[I]).text()'/a/Li '；var下一个h1指数=I ^ 1；if(下一个h1索引==jquery _ h1 _ list。长度){下一个h1索引=0；} var jquery _ H2 _ list=$(jquery _ h1 _ list[I]).下一个直到(jquery_h1_list[nextH1Index]，' H3 ')；//二级目录开始if(jquery _ H2 _ list。长度0){//Li _ content=' ul style=' list-style-type : none；文本-左对齐：边距33602 px2px '；Li _ content=' ul class=' second _ class _ ul '；} for(var j=0；j jquery _ H2 _ list . length j){ var go _ to _ top2=' div style=' text-align : right ' a name=' _ lab 2 _ ' I ' _ ' j ' '/a/div '；$(jquery_h2_list[j]).之前(go _ to _ top2)；//二级目录的一条Li _ content=' lia href=' # _ lab 2 _ ' I ' _ ' j ' ' rel='外部无跟随' $(jquery _ H2 _ list[j]).text()'/a/Li '；var nexth2指数=j 1；var nextif(下一个H2索引==jquery _ H2 _ list。长度){ if(I ^ 1==jquery _ h1 _ list。length){ next=jquery _ h1 _ list[0]；} else { next=jquery _ h1 _ list[I ^ 1]；} } else { next=jquery _ H2 _ list[next H2索引]；} var jquery _ H3 _ list=$(jquery _ H2 _ list[j]).然后直到(下一部《H4》)；//三级目录开始if(jquery _ H3 _ list。长度0){ Li _ content=' ul class=' third _ class _ ul '；} for(var k=0；k jquery _ H3 _ list . length k){ var go _ to _ third _ Content=' div style=' text-align : right ' a name=' _ label 3 _ ' I ' _ ' j ' _ ' k ' '/a/div '；$(jquery_h3_list[k]).之前（转到第三个内容);//三级目录的一条Li _ content=' lia href=' # _ label 3 _ ' I ' _ ' j ' _ ' k ' ' rel='外部无跟随' $(jquery _ H3 _ list[k]).text()'/a/Li '；} if(jquery _ H3 _ list。长度0){ Li _ content='/ul '；} Li _ content='/Li '；//三级目录end } if(jquery _ H2 _ list。长度0){ Li _ content='/ul '；} Li _ content='/Li '；//二级目录结束内容=li _ content} //一级目录结束内容='/ul '；内容='/div '；$($("# content")[0]).前置(内容);} GenerateContentList()；/script参考：http://www.cnblogs.com/best/

到此文章就结束了，希望大家以后多多支持我们。