博客园添加顶层目录

 

前言

目的：想要为自己的博客添加一个目录，方便阅读。

参考链接：https://www.cnblogs.com/xuehaoyue/p/6650533.html#_labelTop

要求：按照格式写文章，这里只设定了h2,h3，对应普通编辑器中的二级标题和三级标题

伸手党福利：只用完成第一步和第四步即可。

 

添加顶部目录

第一步：申请JS权限

在 【管理】- 【设置】-【博客侧边栏公告】看到如下界面表示申请成功。

 

第二步：编写JS代码

content.js

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" style="color:#152e97;">';
        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" style="color:#f68a33">回到顶部</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 + '">' + $(h3_list[j]).text() + '</a></li>';
            }

            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
}

GenerateContentList();

 

 

第三步：上传JS代码

上传到 【管理】-【文件】

 

第四步：编写页脚HTML

位置：【管理】-【设置】-【页脚 HTML 代码】

<!-- 顶部目录 -->
<script language="javascript" type="text/javascript" src="https://files.cnblogs.com/files/smart-zihan/content.js"></script>

 

不成功原因

问题：第一次尝试失败

分析问题：标题格式设置错误，第一次设置是修改字体的大小。以为二级标题、三级标题就是字体大小为第二、第三的字体，只能说太天真了。

解决问题：设置标题的大小，在段落里设置

测试成功。