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

标签: 博客 博客 成章 | 发表时间:2015-03-21 00:47 | 作者:薰衣草的旋律
出处:

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

小小代码,不值一提,如果您觉得对您还有一点用,就点个赞支持一下吧。


本文链接: 让博客园博客自动生成章节目录索引,转载请注明。

相关 [博客 博客 成章] 推荐:

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

- - 博客园_首页
一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量.

博客之尾

- FQX - Nings blog
中国的博客时代,2006-2010. 机器人控制世界的时代虽然仍未到来,然而部分机器人如Google Trends已经可以做到这些无伤大雅的数据分析了. 感慨的话不再多说,知者自知,不知者无所谓. 总结一下发现的几个标志着博客时代尾声的点,可能片面些,仅供路过. 在博客时代,博客圈曾盛行一些传播游戏或立场之争.

博客2.0:社交博客的兴起

- maple - GeekPark 捕风捉影
作者:网易科技专栏作家 师北宸(微博). 最近三四年,随着社交网络和微博客的兴起,博客衰退的速度已经快到大家很久都看不到新闻上出现“博客”的程度了——即便出现,也是在讲博客衰退得有多厉害. 我去年建了一个独立博客,贴了几篇文章后,再没有更新. 今年主机商发信要求我续费时,我也没续,只把域名保留了下来.

SpringCloud Gateway与k8s_zhangjunli的博客-CSDN博客

- -
接下来的内容由以下几部分组成:. 什么是SpringCloud Gateway. SpringCloud Gateway实战参考. kubernetes上的SpringCloud Gateway. 开发k8sgatewaydemo. 什么是SpringCloud Gateway. SpringCloud Gateway是SpringCloud技术栈下的网关服务框架,在基于SpringCloud的微服务环境中,外部请求会到达SpringCloud Gateway应用,该应用对请求做转发、过滤、鉴权、熔断等前置操作,一个典型的请求响应流程如下所示:.

轻博客之重

- lijingjing_11 - 月光博客
  从最初的点点、到推他、再到新浪轻博客,后面还有虎视眈眈的腾讯. 似乎只是在不经意之间,轻博客似乎便引燃了整个中国互联网的热情. 尽管在此之前,tumblr已经出现了一段时间,不过在很长一段时间里,tumblr仅仅只是一小众人手中的玩具,就像很多在我的博客上留言的读者所认为的那样,“图床”. 一直到了去年年底,tumblr才真正进入了主流的目光中,直至今日.

博客启用InstantClick

- - 阅微堂
博客 » IT技术 » 阅微堂系统 ». 之前我发现有些网站能瞬间显示新页面,几乎没有延迟,非常类似于AJAX的刷新,但页面URL的确又变了(如果是AJAX刷新,页面地址不会变). 现在我知道这可以用InstantClick实现. 本着阅微堂一直在尝鲜最新技术的传统,我毫不犹豫就装上了. InstantClick的官方主页见 http://instantclick.io/download.

opensips - bw_0927 - 博客园

- -
随着通信IP化的发展,IP传输的高带宽、低成本等优势使得越来越多的企业、电信运营商加快建设基于IP的各种通信应用. 在通信协议IP化发展中,SIP协 议毫无争议地成为各大电信运营商构建其未来网络的基础协议,越来越多的SIP软件产品也不断出现在行业应用中. SIP协 议的标准化,同时也造就了一大批优秀的开源软件产品,包括Asterisk、SipXecs、FreeSWITCH、OpenSIPS等SIP服务端软 件,也包括X-lite、LinPhone、eyeBeam等SIP客户端软件.

Tribalfish = Twitter + 博客 + 论坛

- Kofai - 36氪
在网络上讨论流行话题有多重选择,你可以在Twitter上追踪话题或名人,也可以在博客上分享经验,更可以在论坛上你来我往,不过,Twitter上的讨论不够深入,博客讨论足够深入又不够及时,Tribalfish 就是集以上讨论工具的大成. 注册登陆后,你会看到好像论坛的界面,只是,不同于一般的论坛界面必须前后查找不同的话题,开启一页又一页的分布,Tribalfish让你可以仪在原页,直接点选感兴趣的内容,并在右方预览,也可以点选分享人的名字后追踪该使用者,这些设计也很像Twitter.

Tumblr博客数超WordPress.com

- jason - 36氪
著名的轻博客Tumblr成立只有四年时间,今天该网站托管的博客数超过了已有八年历史的WordPress.com. 一月份时Tumblr上有700万个独立博客,到目前为止,该网站上的博客计数器显示已有20873182个博客,比WordPress.com上的博客数「20820425」大约多出了8.5万个.