QQ爹の博客 QQ爹の博客

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

in 代码相关 文章转载请注明来源!

前言

早就想给博客文章加个目录了,以前是能力不够,即使看了别人的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定制博客

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

目录文章目录javascript
发表新评论
已有 13 条评论
  1. 尚寂新
    尚寂新 7Chrome 60
    回复

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

    1. 尚寂新
      尚寂新 7Chrome 60
      回复

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

      1. Jrotty
        Jrotty本文作者 OUC浏览器 11
        回复

        @尚寂新 jq放所有js前面不是常识吗

        1. 尚寂新
          尚寂新 LChrome 44
          回复

          @Jrotty 本以为这段是原生js

  2. 一日
    一日 10Chrome 56
    回复

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

    1. Jrotty
      Jrotty 10Chrome 56
      回复

      @一日 没事没事

    2. 一日
      一日 10Chrome 56
      回复

      @一日 啊呜,搞定了,,,谢谢啦!

    3. Jrotty
      Jrotty 10Chrome 56
      回复

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

    4. 一日
      一日 10Chrome 56
      回复

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

    5. Jrotty
      Jrotty 10Chrome 56
      回复

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

  3. pci
    pci 10Chrome 56
    回复

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

    1. Jrotty
      Jrotty 10Chrome 56
      回复

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

  4. 律通律师事务所管理软件

    谢谢分享

前篇 后篇
雷姆
拉姆