js为博客文章自动生成目录

前言

早就想给博客文章加个目录了，以前是能力不够，即使看了别人的Demo，也不会搞，现在只要克服懒癌，应该也没啥困难。于是开始搞起。 代码

代码语言：javascript复制

<script language="javascript" type="text/javascript">// 生成两级目录索引列表
function GenerateContentList()
{
 var mainContent = $('#mulu'); //在id为mulu的div里面加载目录
 var h1_list = $('#yl h1');　　
  var h2_list = $('#yl h2');  //代码中所有的yl指的是在id为yl的div里面匹配h1,h2,h3
 if(mainContent.length < 1)
  return;  
 if(h1_list.length>0)
 {
  var content = '';
  content  = '';
  content  = '<h2 id="table-of-contents">目录</h2>';
  content  = '<ol class="toc">';
  for(var i=0; i<h1_list.length; i  )
  {
   var go_to_top = '<a name="_label'   i   '"></a>';
   $(h1_list[i]).before(go_to_top);   
   var h2_list = $(h1_list[i]).nextAll("h2");
   var li2_content = '';
   for(var j=0; j<h2_list.length; j  )
   {
    var tmp = $(h2_list[j]).prevAll('h1').first();
    if(!tmp.is(h1_list[i]))
     break;
    var li2_anchor = '<a name="_label'   i   '_'   j   '"></a>';
    $(h2_list[j]).before(li2_anchor);
    li2_content  = '<li class="toc-item toc-level-'   i   '_'   j   '"><a class="toc-link" href="#_label'   i   '_'   j   '"><span class="toc-text">'   $(h2_list[j]).text()   '</span></a></li>';
   } 
   var li1_content = '';
   if(li2_content.length > 0)
    li1_content = '<li class="toc-item toc-level-'   i   '"><a class="toc-link" href="#_label'   i   '"><span class="toc-text">'   $(h1_list[i]).text()   '</span></a></li><ol class="toc-child">'   li2_content   '</ol>';
   else
    li1_content = '<li class="toc-item toc-level-'   i   '"><a class="toc-link" href="#_label'   i   '"><span class="toc-text">'   $(h1_list[i]).text()   '</span></a></li>';
   content  = li1_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } else{
if(h1_list.length==0&&h2_list.length>0)
 {
  var content = '';
  content  = '';
  content  = '<h2 id="table-of-contents">目录</h2>';
  content  = '<ol class="toc">';
  for(var i=0; i<h2_list.length; i  )
  {
   var go_to_top = '<a name="_label'   i   '"></a>';
   $(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 class="toc-item toc-level-'   i   '_'   j   '"><a class="toc-link" href="#_label'   i   '_'   j   '"><span class="toc-text">'   $(h3_list[j]).text()   '</span></a></li>';
   }  
   var li2_content = '';
   if(li3_content.length > 0)
    li2_content = '<li class="toc-item toc-level-'   i   '"><a class="toc-link" href="#_label'   i   '"><span class="toc-text">'   $(h2_list[i]).text()   '</span></a></li><ol class="toc-child">'   li3_content   '</ol>';
   else
    li2_content = '<li class="toc-item toc-level-'   i   '"><a class="toc-link" href="#_label'   i   '"><span class="toc-text">'   $(h2_list[i]).text()   '</span></a></li>';
   content  = li2_content;
  }
if($('#mulu').length != 0 )
  {
   $($('#mulu')[0]).prepend(content);
  }
 } 
}
}
GenerateContentList();
</script>

留言

以上是我的代码，需要说明的地方我加了注释，其他的标签可根据你的模板自行更改。这个代码能匹配h1,h2,h3。其中h1,h2可单独匹配，h3无法单独匹配，简单来说就是文章中只有h3的话目录不会启用。

参考

脚本之家：利用JS生成博文目录及CSS定制博客

css h2 博客 脚本

0 人点赞