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

前言：

　　　　自己刚刚申请博客成功，早就对博客园自定义博客样式有所耳闻的我，自然要马上来自定义自己的博客界面（虽然还是很丑...）。

　　　　在设置章节目录索引的过程中，我发现了很多对此问题分析到位的博文，下面这篇对我帮助最大~ 现在分享给大家，希望对那些像我一样是博客园新成员的人能有所帮助~

　　一个好的博文除了博文的质量要好以外，好的组织结构也能让读者阅读的更加舒服与方便，我看园子里面有一些园友的博文都是分章节的，并且在博文的前面都带有章节的目录索引，点击索引之后会跳转到相应的章节阅读，并且还可以回到目录顶端，其中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

这里是章节1的内容

章节2

这里是章节2的内容

章节3

这里是章节3的内容

章节4

这里是章节4的内容

转载自：让博客园博客自动生成章节目录索引——薰衣草的旋律

转载于:https://www.cnblogs.com/yanglh6-jyx/p/blog_customize_index.html

让博客园博客自动生成章节目录索引相关推荐

2017.5.3 博客园自动生成章节目录
参考来自:http://www.cnblogs.com/zzqcn/p/4657124.html 1.效果图 2.申请js权限写邮件给contact@cnblogs.com. 3.复制代码至页脚ht ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...
前端小白也能快速学会的博客园博客美化全攻略[附源码]
前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介准备工作 js权限申请如何模仿一个博客园的自定义风格(样式css ...
博客园博客PDF生成器
周末写了一个博客园博客PDF生成器,由于博客园文件上传大小的限制,我把源代码放在CSDN上了(想信大家都有帐号哈),如果没有帐号的请留下邮箱,我会尽快发给你,当然如果哪位朋友能帮忙把源代码上传到博客园 ...
『Python开发实战菜鸟教程』实战篇：爬虫快速入门——统计分析CSDN与博客园博客阅读数据
文章目录 0x01:引子首先介绍一下网络爬虫是什么,可以用来做什么? 这里简单探讨一下网络爬虫的合法性正式进入爬虫实战前,需要我们了解下网页结构 HTML CSS JScript 写一个简单的 H ...
博客园博客账号意外被封怎么办？
今天我们就谈谈博客园博客账号意外被封如何申请解封,希望对新手有些帮助,事情是这样的,早上的时候我上了一下自己的博客园博客账号发现:咦!乍回事啊,怎么登不上去了呢? ================== ...
python爬虫入门教程-Python爬虫入门教程——爬取自己的博客园博客
互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...
无忧开通了博客园博客主页
无忧开通了博客园博客主页,今后在这里安家了. 分享一点工作经验和学习心得,有事没事常来看看.另一个独立博客www.wuyouseo.com 转载于:https://www.cnblogs.com/wu ...
博客园博客开通了，庆贺一下
博客园博客开通了,庆贺一下还是觉得博客园里面的技术气氛比较浓一些转载于:https://www.cnblogs.com/binghe021/archive/2011/02/14/1954370.h ...
python爬虫教程-Python爬虫入门教程——爬取自己的博客园博客
互联网时代里,网络爬虫是一种高效地信息采集利器,可以快速准确地获取网上的各种数据资源.本文使用Python库requests.Beautiful Soup爬取博客园博客的相关信息,利用txt文件转存. ...

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

前言：

使用方法：

章节1

章节2

章节3

章节4

让博客园博客自动生成章节目录索引相关推荐

最新文章

热门文章