标签：
对于比较长的文章，有一个好的目录索引是很有必要的，可以让读者比较清楚地了解文章内容和层次。然而，目前（2015.7）博客园不像csdn博客那样，会对发布的文章自动生成目录索引。不过，一些网友通过博客园后台提供的一些自定义功能，自己写脚本实现了这一功能。我用的脚本主要就是参考赵子清的，文章地址是：http://www.cnblogs.com/zzqcn/p/4657124.html。
原作者的脚本只支持1级目录，我改了两级：第1级是h2，第2级是h3。还添加了一些小玩意，比如讨论qq群号。效果如下图所示：
添加功能的具体步骤是：
1 <script language="javascript" type="text/javascript"> 2 //循环创建索引 3 function getHxList(jquery_h_list, level, offset) 4 { 5 var content = ""; 6 level += 1; 7 if(jquery_h_list.length>0 && level <= 4) 8 { 9 //content="alan"; 10 content += ‘<a name="_labelTop"></a>‘; 11 content += ‘<div id="navCategory">‘; 12 content += ‘<ul>‘; 13 for(var i=0; i<jquery_h_list.length; i++) 14 { 15 var go_to_top = ‘<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label‘ + offset + i + ‘"></a></div>‘; 16 $(jquery_h_list[i]).before(go_to_top); 17 var li_content = ‘<li><a href="#_label‘ + offset + i + ‘">‘ + $(jquery_h_list[i]).text() + ‘</a></li>‘; 18 content += li_content; 19 20 var jquery_h2_list = $(jquery_h_list[i]).nextUntil(jquery_h_list[i+1], "h"+level); 21 content += getHxList(jquery_h2_list, level, offset+i); 22 } 23 content += ‘</ul>‘; 24 content += ‘</div>‘; 25 } 26 return content; 27 } 28 29 //生成目录索引列表 30 function GenerateContentList() 31 { 32 var jquery_h2_list = $(‘#cnblogs_post_body h2‘);//如果你的章节标题不是h2,只需要将这里的h2换掉即可 33 var content = ‘<p style="font-size:18px"><b>阅读目录</b></p>‘; 34 content += getHxList(jquery_h2_list, 2, 0); 35 if($(‘#cnblogs_post_body‘).length != 0 ) 36 { 37 $($(‘#cnblogs_post_body‘)[0]).prepend(content); 38 } 39 return; 40 } 41 GenerateContentList(); 42 </script>
标签：
原文地址：http://www.cnblogs.com/1024Planet/p/5748934.html
