让博客园自动生成目录

博客园自动生成目录

有几篇博客写得比较长，没有一个导航栏或者目录的话，查看起来十分不方便。博客园并没有像hexo或者hugo那样可以简单开启浮动导航栏，参考前人经验，我使用JS实现了页顶目录功能。

效果参考本网页。

当前版本目录来自于自动识别二级标题和三级标题。

首先需要开启JS功能，默认不开启。在博客园个人首页点击【管理】进入【设置】，在【侧边栏公告】处有一个【申请JS权限】，填写理由之后就可以申请JS权限。大改不到一个小时就能申请下来。

申请到JS权限之后就可以插入JS代码，可以插入到【页脚 HTML 代码】处，JS放在页面底部网页加载更快。

代码如下：

<script language="javascript" type="text/javascript">
    // 增加一段JS脚本，为目录生成使用

    // 生成目录索引列表
    // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
    // ref: https://www.cnblogs.com/zzqcn/p/4657124.html
    // ref: https://www.cnblogs.com/youngchaolin/p/11111647.html
    // modified by: zhcpku 20201011

    function GenerateContentList() {
        // 获取博文主体jquery对象
        var mainContent = $('#cnblogs_post_body');
        // 获取博文主体下所有的h2对象
        var h2_list = $('#cnblogs_post_body h2');
        // 如果文章中没有h2标题
        if (mainContent.length < 1 || h2_list.length < 1) {
            return;
        }
        // 目录内容
        var content = '';
        // 目录结构为div里面包含一个段落标题，和一个ul
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        // 遍历h2标题
        for (var i = 0; i < h2_list.length; i++) {
            // step1 在文章内容h2标题前面增加一段内容，点击它会超链接到页面顶部锚点
            // 同时新增一个锚点，属性name名为_label+h2目录序号i
            var go_to_top = '<div style="text-align: right"><a href="#top">返回顶部</a><a name="_label' + i + '"></a></div>';
            // 在h2标题的前面节点加的内容，相当于点击它，可以回到目录，同时点击目录时可以找到对应的锚点
            $(h2_list[i]).before(go_to_top);

            // step2 在文章当前h2标题下面获取所有的h3标题
            var h3_list = $(h2_list[i]).nextAll("h3");
            // step3 在h2标题下面获取h3标题，为其增加锚点，并且获得h3目录内容
            // 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;
                // 增加文章h3标题前锚点
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';//i代表h2标题序号，j代表h3标题序号
                $(h3_list[j]).before(li3_anchor);
                // 增加h3目录，点击它可以去到文章中h3标题前，目录内容为文章中h3标题文本内容
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            // step4 获取h2目录内容
            // h2目录内容
            var li2_content = '';
            // 如果有h3标题内容，h2三级目录下面增加一个h3四级目录li3_content
            if (li3_content.length > 0) {
                li2_content = '<li style="list-style-type: decimal"><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            // 否则就只有三级目录
            } else {
                li2_content = '<li style="list-style-type: decimal"><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            }
            // step5 更新目录内容
            content += li2_content;
        }
        // for循环完成后，添加了一堆的li，或者li里面嵌套ul
        content += '</ul>';
        content += '</div><p> </p>';
        // // 在文章正文前添加一个引言标题
        // content += '<p style="font-size:18px"><b>引言</b></p>';
        // 如果博文body有内容添加目录到前面
        if ($('#cnblogs_post_body').length != 0) {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }

    GenerateContentList();
</script>

如果希望网页加载更快，可以做一下js压缩再插入网页底部。可以直接谷歌搜索关键词js compress online进行压缩。
出于兼容性考虑，这里没有使用ES6及以上版本的JS写法。

以下是测试内容

二级标题（一）

某段正文

二级标题（二）

某段正文

三级标题（1）

某段正文

三级标题（2）

某段正文

测试内容结束。

参考博客：
让博客园博客自动生成章节目录索引 | 薰衣草的旋律
让博客园博客自动生成章节目录索引 | 赵子清
博客园添加目录索引 | 斐波那切