关于如何让博客自动生成章节目录索引

一、前言

对于一篇比较长的文章，我们需要去创建一个目录索引，这样才能让浏览我们文章的人更好的获取重点，从我们的文章中学到东西。
但目前博客园中并没有这类功能（2019.3），我看到部分同学博客中也弄了目录，同时发现手动创建目录实在是太麻烦了，我查阅了网上的一些资料，并且做出了一些修改，在这里给大家总结一下，并放上具体过程图片

二、内容

我一开始上网搜索结果后，发现需要向博客园申请开通后台支持js，于是我发了一封邮件给博客园团队

很尴尬，我不清楚要在后台申请，以为在邮箱中发申请就可以了（更多的人竟然是在讨论组中艾特博客园团队来发，我佛了），
正确的申请过程和填写过程如下文（使用张智敏同学的博客进行截图）

向下翻动之后

输入申请信息

申请结果大概会在半小时到一个小时左右出来，基本会成功，
之后如图所示

输入的脚本代码为

<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">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(jquery_h3_list[i]).before(go_to_top);
            var li_content = '<li><a href="#_label' + i + '">' + $(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>

填入代码之后保存就行了

参考资料
1.让博客园博客自动生成章节目录索引
2.让博客园博客自动生成章节目录索引

转载于:https://www.cnblogs.com/jxxydwt1999/p/10568121.html