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

代码相关 目录 文章目录 javascript

前言

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

代码

<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定制博客

Comments (13)

    Generic placeholder image
    尚寂新

    如果文章里没有目录标题 console那边会报错 请问如果去掉报错(别让我给文章加h1h2h3那些 文章太多了毕竟)

    Windows7 681天前回复

      Generic placeholder image
      尚寂新
      @尚寂新

      好吧原来这个貌似有一部分是用jq的 放在jq下面就解决了2333

      Windows7 681天前回复

        Generic placeholder image
        Jrotty
        @尚寂新

        jq放所有js前面不是常识吗@(狂汗)

        安卓奥利奥 681天前回复

          Generic placeholder image
          尚寂新
          @Jrotty

          本以为这段是原生js@(汗)

          安卓棒棒糖 681天前回复

    Generic placeholder image
    一日

    我找到你模板里面的KZ.js 的添加目录的代码,在footer.php 的前面加了那段js 代码,然后再post.php 加了html 可是在文章页面还是不显示,我使用的是EditorMD ( DT27的插件)的markdown编辑器。 文章中包含了3个h2标题,审查元素后发现 div#mulu 是 0 x 0 尺寸。求问是什么问题呢? #[晕]

    Windows10 1072天前回复

      Generic placeholder image
      Jrotty
      @一日

      没事没事

      Windows10 1072天前回复

      Generic placeholder image
      一日
      @一日

      啊呜,搞定了,,,谢谢啦!

      Windows10 1072天前回复

      Generic placeholder image
      Jrotty
      @一日

      我的模板文章div中有个id=yl的你也需要对应的加个这个id。

      我的模板中的这个

      Windows10 1072天前回复

      Generic placeholder image
      一日
      @一日

      我现在用的不是你的模板呐 ("▔□▔)/

      Windows10 1072天前回复

      Generic placeholder image
      Jrotty
      @一日

      我那个模板本身就自带文章目录树的才对啊,你都不用加的呀

      Windows10 1072天前回复

    Generic placeholder image
    pci

    特色图好污( ̄ε(# ̄) Σ

    Windows10 1141天前回复

      Generic placeholder image
      Jrotty
      @pci

      随机缩略图,污能吸引点击嘿嘿(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 【尽管我也不需要点击量】

      Windows10 1140天前回复

    Generic placeholder image
    律通律师事务所管理软件

    谢谢分享

    Windows10 1142天前回复