概述
对于比较长的文章, 有一个好的目录索引是很有必要的, 可以让读者比较清楚地了解文章内容和层次. 然而, 目前 (2015.7) 博客园不像 csdn 博客那样, 会对发布的文章自动生成目录索引. 不过, 一些网友通过博客园后台提供的一些自定义功能, 自己写脚本实现了这一功能. 我用的脚本主要就是参考 @薰衣草的旋律 的, 文章地址是: http://www.cnblogs.com/wangqiguo/p/4355032.html .
原作者的脚本只支持 1 级目录, 我改了两级: 第 1 级是 h2, 第 2 级是 h3. 还添加了一些小玩意, 比如讨论 qq 群号. 效果如下图所示:
具体步骤
添加功能的具体步骤是:
确保自己的博客园后台支持 js
这个默认是不支持, 需要向官方发个邮件申请开通(邮箱是 mailto:contact@cnblogs.com ), 我简单写了封邮件, 1 小时就回复了, 邮件内容我只写了两个字: 如题....
到后台加入脚本
打开博客园后台, 进入 "设置" 标签页, 在最下面的 "页脚 Html 代码" 对应的编辑框粘贴你的 js 代码, 然后点 "保存" 按钮保存.
按格式写文章
在写新博文的时候, 注意按照你 js 脚本里设定的格式来划分章节, 比如 h2,h3 等. 当然, 以前发布的文章如果有 h2,h3 之类, 也会自动生成目录索引.
javascript 脚本
脚本如下:
- <script language="javascript" type="text/javascript">
- // 生成目录索引列表
- // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
- // modified by: zzq
- 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">';
- 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">回到顶部</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> </p>';
- content += '<p style="font-size:18px"><b > 正文</b></p>';
- if($('#cnblogs_post_body').length != 0 )
- {
- $($('#cnblogs_post_body')[0]).prepend(content);
- }
- }
- var qqinfo = '<p style="color:navy;font-size:12px">广告招租: xxx</p>';
- $(mainContent[0]).prepend(qqinfo);
- }
- GenerateContentList();
- </script>
参考资料:
- http://www.cnblogs.com/zzqcn/p/4657124.html
- http://www.cnblogs.com/wangqiguo/p/4355032.html
来源: http://www.bubuko.com/infodetail-2666294.html