博客园博客自动生成目录/目录索引

阅读目录

回到顶部

阅读目录

近来写了一些比较长的博客,阅读起来很不方便,看园子里其他园友的博客有些有目录,就想给自己的博客增加目录结构,增加文章可读性;

回到顶部

回到顶部

实现效果

通过点击目录索引,跳转到对应的章节,并可回到目录顶端;

回到顶部

回到顶部

添加功能的具体步骤

确保自己的博客园后台支持js
          这个默认是不支持,需要向官方申请,在博客设置中点击申请JS权限进行申请;

2、到后台加入脚本
打开博客园后台,进入“设置”标签页,在最下面的“页脚Html代码”对应的编辑框粘贴你的js代码,然后点“保存”按钮保存。

3、按格式写文章
在写新博文的时候,注意按照你js脚本里设定的格式来划分章节,我这里设置的是h1。以前发布的文章如果有h1,也会自动生成目录索引。

回到顶部

生成脚本

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
    var mainContent = $(‘#cnblogs_post_body‘);
    var h2_list = $(‘#cnblogs_post_body h1‘);//如果你的章节标题不是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"><h1>阅读目录</h1></p>‘;
        content += ‘<ul>‘;
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = ‘<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label‘ + i + ‘"></a></div>‘;
            $(h2_list[i]).before(go_to_top);

            var h3_list = $(h2_list[i]).nextAll("h2");
            var li3_content = ‘‘;
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll(‘h1‘).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 += ‘<p style="font-size:18px"><b>正文</b></p>‘;
    }
    if($(‘#cnblogs_post_body‘).length != 0 )
    {
        $($(‘#cnblogs_post_body‘)[0]).prepend(content);
    }
}
GenerateContentList();
</script>

Reference:

http://www.cnblogs.com/yx007/p/7171495.html#_label1

原文地址:https://www.cnblogs.com/ios9/p/9721462.html

时间: 2024-10-06 08:24:19

博客园博客自动生成目录/目录索引的相关文章

自定义博客园主题和自动生成目录

背景 最近觉得博客园网站太老旧了,不好看,并且没有移动端,于是想转到简书去写博客(主要简书有移动端),写出来的效果还是不满意,于是又回到了博客园,只能自己修改下博客主题了. 于是百度了下,找到了两篇参考博客: 主题修改参考了:一套简约漂亮的响应式博客园主题皮肤 添加目录参考了:让博客园博客自动生成章节目录索引 在他们的基础上做了相应的修改,值得注意的一点是,主题修改必须注意当前所使用的默认模板是什么,如果不一样可能会造成样式错乱,因为我发现博客园不同的官方主题之间有的存在HTML结构的差异.我这

博客园博客自动生成三级目录(generate three levels content using JS in cnblogs)

博客园博客自动生成三级目录(generate three levels content using JS in cnblogs) JS代码(JS code) 最近参考了(http://www.cnblogs.com/wangqiguo/p/4355032.html)自动生成目录的方法,我增加了能够自动生成三级目录的JS代码. I learned from (http://www.cnblogs.com/wangqiguo/p/4355032.html) about generating cont

博客园博客转至个人网站博客声明

博客园博客不在提供维护更新,个人博客转至:https://monsterlin.com/

使用Windows Live Writer 发布博客园博客

看了下论坛的帮助,把自己喜欢的WLW内容整理了一下: 下载地址 http://windows.microsoft.com/en-us/windows-live/download-windows-essentials 账号配置 首次运行会弹出配置界面 当然也可以在菜单FileàOptions 项中进行账号配置 点击Add按钮在What blog service do you use? 对话框中选中 Other services 点击Next 进入 Add a blog account 对话框, 在

使用Windows Live Writer发布博客园博客

在管理中发现可以使用windows live writer来发布博客园博客. 具体可以参考:http://home.cnblogs.com/group/topic/8550.html 代码着色插件:http://www.cnblogs.com/cmt/archive/2012/06/26/live_writer_cnblogs_code_highlight.html

开通博客园博客说明

博客园博客说明 之前准备用hexo+github搭建的博客来记录自己的前端之旅,原先的博客确实搭建好了,但是由于自己对博客内容太在乎,一些平常的练习没有记录在其中.为了监督自己,为了给平时的练习存放,所以选择了博客园,博客园中的博客都是平常的练习,等到练习到一定程度,在总结至自己的博客上去. OK,博客园之旅就从今日开启. 原文地址:https://www.cnblogs.com/iDouble/p/8287678.html

博客园博客小优化

博客园博客小优化 Fork me on Github 页首Html 代码部分增加以下代码: <a href="https://github.com/WeihanLi" target="_blank"> <img style="position: fixed; top: 0; right: 0; border: 0;z-index:233" src="https://github-camo.global.ssl.fast

博客园 博客积分与排名 查看设置

博客园 博客积分与排名 查看设置 博客园 博客积分与排名 默认是不显示的. 如果想要显示出来,需要在博客园的“设置”里进行设置. 具体操作步骤如下: 1.在博客园的“设置”中,选择“常用选项”,点击进入. 2.在“选项”中,找到“积分与排名”,勾选,保存即可. 3.刷新博客页面,即可看到自己博客的积分与排名情况,效果如下: 原文地址:https://www.cnblogs.com/miracle-luna/p/11789269.html

[转]JavaScript自动生成博文目录导航

转自:http://www.cnblogs.com/xdp-gacl/p/3718879.html 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做

写个js小工具自动生成博文目录

我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下: 下面来介绍一下这个小工具的实现. 一.