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. 尚寂新
    尚寂新Windows 7谷歌浏览器
    回复

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

    1. 尚寂新
      尚寂新Windows 7谷歌浏览器
      回复

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

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

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

        1. 尚寂新
          尚寂新Android L谷歌浏览器
          回复

          @Jrotty 本以为这段是原生js

  2. 一日
    一日Windows 10谷歌浏览器
    回复

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

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @一日 没事没事

    2. 一日
      一日Windows 10谷歌浏览器
      回复

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

    3. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

      @一日 我的模板文章div中有个id=yl的你也需要对应的加个这个id。我的模板中的这个<div class="main-content-wrap" id="yl">

    4. 一日
      一日Windows 10谷歌浏览器
      回复

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

    5. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

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

  3. pci
    pciWindows 10谷歌浏览器
    回复

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

    1. Jrotty
      JrottyWindows 10谷歌浏览器
      回复

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

  4. 律通律师事务所管理软件
    律通律师事务所管理软件Windows 10谷歌浏览器
    回复

    谢谢分享

PREVIOUS NEXT
雷姆
拉姆
音乐加载中...
0:00