码迷,mamicode.com
首页 > 其他好文 > 详细

让博客园博客自动生成章节目录索引

时间:2019-07-11 15:40:29      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:修改   生成   后台   一个   源码   blank   lang   文章   body   

 

 

一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量。如果能自动生成章节索引岂不是节省了一大堆工作量。本来想通过FireBug看看Fish Li源码是怎么实现的,但是好像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>

使用方法:登录到博客园之后,打开博客园的后台管理,切换到“设置”选项卡,将上面的代码,粘贴到 “页脚HTML代码” 区保存即可。

注意:上述js代码中提取的h3作为章节的标题,如果你的标题不是h3请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外,还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接,以方便读者回到目录。本篇文章的目录结构就是自动生成的效果,如果你觉得有用,就赶快试用一下吧。

章节1

这是章节一

章节2

这是章节二

章节3

这是章节三

让博客园博客自动生成章节目录索引

标签:修改   生成   后台   一个   源码   blank   lang   文章   body   

原文地址:https://www.cnblogs.com/longchengruoxi/p/11170329.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!