本文介绍了在博客园中通过JavaScript自动生成文章目录索引的三种方案。第一种仅支持一级标题（h3），生成阅读目录及回到顶部链接；第二种基于h2和h3实现二级分类，并附加QQ群信息；第三种通过h2、h3、h4支持三级目录，优化SEO权重分布。用户只需将对应JS代码粘贴至博客园后台“页脚HTML代码”区域即可生效，无需手动维护目录结构。
第一种方案：仅支持一级目录
使用<h3>标签作为段落标题，不支持多层级分类。
一篇优质的博文不仅需要内容扎实，良好的结构也能提升阅读体验。观察发现，部分博客园用户的文章包含章节目录索引，点击后可跳转至对应章节并返回目录顶端，例如Fish Li的文章。若手动设置此类结构，将大幅增加写作负担。若能实现自动生成章节索引，则可显著减轻工作量。起初尝试通过FireBug查看Fish Li的源码实现，但其JS代码已加密。因此决定自行编写代码，实现过程并不复杂。
HTML结构示例
<h3>章节1</h3>
<p>这里是章节1的内容</p>
<h3>章节2</h3>
<p>这里是章节2的内容</p>
<h3>章节3</h3>
<p>这里是章节3的内容</p>
<h3>章节4</h3>
<p>小小代码，不值一提，如果您觉得对您还有一点用，就点个赞支持一下吧。</p>JavaScript核心代码
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>阅读目录</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>使用方法：登录博客园后台，进入“设置”选项卡，将上述JS代码粘贴至“页脚HTML代码”区域并保存。
注意：上述JS代码默认提取<h3>标签作为章节标题，若您的标题标签不同，请修改代码注释中的对应部分。该代码不仅会在文章开头生成目录索引，还会在每个章节末尾（即下一章节标题的右上角）生成“回到顶部”链接，方便读者返回目录。本文的目录结构即为自动生成效果，若觉得实用，欢迎尝试。
原文链接：https://www.cnblogs.com/wangqiguo/p/4355032.html
第二种方案：支持二级分类
通过<h2>和<h3>标签实现。
效果展示
对于篇幅较长的文章，提供清晰的目录索引至关重要，它有助于读者把握文章内容与结构层次。截至2015.7，博客园平台并未像CSDN那样自动为发布文章生成目录索引。不过，部分用户利用博客园后台提供的自定义功能，自行编写脚本实现了该效果。我所使用的脚本主要参考了@薰衣草的旋律 的作品，原文链接为：http://www.cnblogs.com/wangqiguo/p/4355032.html。
原作者的脚本仅支持一级目录，我将其修改为支持两级：第一级使用<h2>，第二级使用<h3>。此外，还添加了一些附加功能，例如显示讨论QQ群号。具体效果如下图所示：
添加功能的具体操作步骤如下：
1、确保博客园后台支持JS执行。 默认情况下此功能未开启，需向官方发送邮件申请开通（邮箱为contact@cnblogs.com）。我发送了一封简短邮件，仅包含主题，1小时内即收到回复。 2、在后台添加脚本。 打开博客园后台，进入“设置”标签页，在最下方的“页脚Html代码”编辑框中粘贴JS代码，然后点击“保存”按钮。 3、按格式撰写文章。 在撰写新博文时，请注意按照JS脚本中设定的格式划分章节，例如使用h2、h3等标签。当然，之前发布的文章若包含h2、h3等标签，也会自动识别并生成目录索引。
示例如下：
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '" rel="external nofollow" >' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p> </p>';
content += '<p style="font-size:18px"><b>正文</b></p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
var qqinfo = '<p style="color:navy;font-size:12px">讨论QQ群：135202158</p>';
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>第三种方案：支持三级目录
通过<h2>、<h3>和<h4>标签实现。
效果展示
演示页面：https://www.jb51.net/article/132341.htm
参考张果的页面，其使用的是<h1>、<h2>和<h3>标签。本站小编建议使用<h2>、<h3>和<h4>标签，根据SEO相关说法，页面中大量出现<h1>标签可能对权重产生不利影响。
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList() {
var jquery_h1_list = $('#content h2');
if (jquery_h1_list.length == 0) { return; }
if ($('#content').length == 0) { return; }
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>目录</b></p>';
// 一级目录 start
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++) {
var go_to_top = '<div style="text-align: right"><a name="_label' + i + '"></a></div>';
$(jquery_h1_list[i]).before(go_to_top);
// 一级目录的一条
var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(jquery_h1_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h3");
// 二级目录 start
if (jquery_h2_list.length > 0) {
//li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
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="_lab2_' + i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
// 二级目录的一条
li_content += '<li><a href="#_lab2_' + i + '_' + j + '" rel="external nofollow" >' + $(jquery_h2_list[j]).text() + '</a></li>';
var nextH2Index = j + 1;
var next;
if (nextH2Index == jquery_h2_list.length) {
if (i + 1 == jquery_h1_list.length) {
next = jquery_h1_list[0];
}
else {
next = jquery_h1_list[i + 1];
}
}
else {
next = jquery_h2_list[nextH2Index];
}
var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h4");
// 三级目录 start
if (jquery_h3_list.length > 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="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
// 三级目录的一条
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" rel="external nofollow" >' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0) {
li_content += '</ul>';
}
li_content += '</li>';
// 三级目录 end
}
if (jquery_h2_list.length > 0) {
li_content += '</ul>';
}
li_content += '</li>';
// 二级目录 end
content += li_content;
}
// 一级目录 end
content += '</ul>';
content += '</div>';
$($('#content')[0]).prepend(content);
}
GenerateContentList();
</script>参考链接：http://www.cnblogs.com/best/
至此文章结束，希望大家今后多多支持本站。