文章或博客自动生成章节目录索引(支持三级)的实现代码


Posted in Javascript onMay 10, 2020

自动生成章节目录索引(只支持一级)

一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量。如果能自动生成章节索引岂不是节省了一大堆工作量。本来想通过FireBug看看Fish Li源码是怎么实现的,但是好像js是加密过的。那我就自己动手了,其实也没多少代码,很简单。

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
  var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
  if(jquery_h3_list.length>0)
  {
    var content = '<a name="_labelTop"></a>';
    content  += '<div id="navCategory">';
    content  += '<p style="font-size:18px"><b>阅读目录</b></p>';
    content  += '<ul>';
    for(var i =0;i<jquery_h3_list.length;i++)
    {
      var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></div>';
      $(jquery_h3_list[i]).before(go_to_top);
      var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" >' + $(jquery_h3_list[i]).text() + '</a></li>';
      content += li_content;
    }
    content  += '</ul>';
    content  += '</div>';
    if($('#cnblogs_post_body').length != 0 )
    {
      $($('#cnblogs_post_body')[0]).prepend(content);
    }
  }  
}
GenerateContentList();
</script>

使用方法:登录到博客园之后,打开博客园的后台管理,切换到“设置”选项卡,将上面的代码,粘贴到 “页脚HTML代码” 区保存即可。

注意:上述js代码中提取的h3作为章节的标题,如果你的标题不是h3请在代码注释的地方自行修改。该代码除了在文章的最开始生成目录索引之外,还会在每一个章节最后右下角(也就是下一个章节标题的右上角)会生成一个“回到顶部”的链接,以方便读者回到目录。本篇文章的目录结构就是自动生成的效果,如果你觉得有用,就赶快试用一下吧。

自动生成三级目录

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
  var jquery_h1_list = $('#cnblogs_post_body h1');
  if (jquery_h1_list.length == 0) { return; }
  if ($('#cnblogs_post_body').length == 0) { return; }

  var content = '<a name="_labelTop"></a>';
  content  += '<div id="navCategory">';
  content  += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>';
  // 一级目录 start
  content += '<ul class="first_class_ul">';

  for (var i = 0; i < jquery_h1_list.length; i++)
  {
    var go_to_top = '<div style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部(go to top)</a><a name="_label' + i + '"></a></div>';
    $(jquery_h1_list[i]).before(go_to_top);

    // 一级目录的一条
    var li_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" >' + $(jquery_h1_list[i]).text() + '</a></li>';

    var nextH1Index = i + 1;
    if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
    var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
    // 二级目录 start
    if (jquery_h2_list.length > 0)
    {
      //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
      li_content += '<ul class="second_class_ul">';
    }
    for (var j = 0; j < jquery_h2_list.length; j++)
    {
      var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
      $(jquery_h2_list[j]).before(go_to_top2);
      // 二级目录的一条
      li_content +='<li><a href="#_lab2_'+ i +'_' + j + '" rel="external nofollow" >' + $(jquery_h2_list[j]).text() + '</a></li>';

      var nextH2Index = j + 1;
      var next;
      if (nextH2Index == jquery_h2_list.length) 
      {
        if (i + 1 == jquery_h1_list.length)
        {
          next = jquery_h1_list[0];
        }
        else
        {
          next = jquery_h1_list[i + 1];
        }
      }
      else
      {
        next = jquery_h2_list[nextH2Index];
      }
      var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
      // 三级目录 start
      if (jquery_h3_list.length > 0)
      {
        li_content += '<ul class="third_class_ul">';
      }
      
      for (var k = 0; k < jquery_h3_list.length; k++)
      {
        var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
        $(jquery_h3_list[k]).before(go_to_third_Content);
        // 三级目录的一条
        li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" rel="external nofollow" >' + $(jquery_h3_list[k]).text() + '</a></li>';
      }
      
      if (jquery_h3_list.length > 0)
      {
        li_content += '</ul>';
      }
      li_content += '</li>';
      // 三级目录 end
    }
    if (jquery_h2_list.length > 0)
    {
      li_content +='</ul>';
    }
    li_content +='</li>';
    // 二级目录 end

    content += li_content;
  }
  // 一级目录 end
  content += '</ul>';
  content += '</div>';

  $($('#cnblogs_post_body')[0]).prepend(content);
}

GenerateContentList();
</script>
levels of contents

如何使用(How to Use)

把上述JS代码复制到“页脚Html代码”里。

文章或博客自动生成章节目录索引(支持三级)的实现代码

在写博客的时候,给每个章节的标题设置“标题1”或“标题2”或“标题3”格式。

文章或博客自动生成章节目录索引(支持三级)的实现代码

然后一切就绪,欣赏效果吧。

示例(Demo)

三水点靠木小编注:为了seo考虑,不建议大量用h1,一个页面可以存在多个h2,h3,h4,所以三水点靠木网站采用的是h2,h3,h4实现三级目录。

补充:

三水点靠木小编从别的地方看到的相关文章可以当个参考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
      word-break: break-all;
    }
    #toc {
      width: 200px;
      position: fixed;
      left: 0;
      top: 0;
    }
    #toc a.active {
      color: red;
    }
    #content {
      margin-left: 200px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      for (var i = 0; i < 50; ++i) {
        $(".seg-content").append("<p>一个段落而已</p>")
      }

      (function () {
        var segs = [];
        $(".seg-begin").each(function (idx, node) {
          segs.push(node)

          var link = $("<a></a>").attr("href", "#" + $(node).attr("name")).html($(node).children("h1").html())
          if (!idx) {
            link.addClass("active")
          }
          var row = $("<li></li>").append(link)
          $("#toc ul").append(row)
        })

        $(window).bind("scroll", function() {
          var scrollTop = $(this).scrollTop()

          var topSeg = null
          for (var idx in segs) {
            var seg = segs[idx]
            if (seg.offsetTop > scrollTop) {
              continue
            }
            if (!topSeg) {
              topSeg = seg
            } else if (seg.offsetTop >= topSeg.offsetTop) {
              topSeg = seg
            }
          }
          if (topSeg) {
            $("#toc a").removeClass("active")

            var link = "#" + $(topSeg).attr("name")
            console.log('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" ]')
            $('#toc a[href="' + link + '" rel="external nofollow" rel="external nofollow" ]').addClass("active")
            // console.log($(topSeg).children("h1").text())
          }
        })
      })()
    })
  </script>
</head>
<body>
  <div id="toc">
    <ul>

    </ul>
  </div>
  <div id="content">
    <a name="seg-1" class="seg-begin"><h1>第1章节</h1></a>
    <div class="seg-content"></div>
    <a name="seg-2" class="seg-begin"><h1>第2章节</h1></a>
    <div class="seg-content"></div>
    <a name="seg-3" class="seg-begin"><h1>第3章节</h1></a>
    <div class="seg-content"></div>
    <a name="seg-4" class="seg-begin"><h1>第4章节</h1></a>
    <div class="seg-content"></div>
  </div>
</body>
</html>

具体的使用可以参考下面的文章。

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue滑动吸顶及锚点定位的示例代码
May 10 #Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 #Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 #Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 #Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 #Javascript
JavaScript 装逼指南(js另类写法)
May 10 #Javascript
js中!和!!的区别与用法
May 09 #Javascript
You might like
杏林同学录(八)
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jquery图片切换插件
2015/03/16 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
python uuid模块使用实例
2015/04/08 Python
为Python的web框架编写前端模版的教程
2015/04/30 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
对python:print打印时加u的含义详解
2018/12/15 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
岗位职责的含义
2013/11/17 职场文书
给男朋友的道歉信
2014/01/12 职场文书
大学生个人事迹材料
2014/01/21 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
实习协议书范本
2014/09/25 职场文书
催款函怎么写
2015/06/24 职场文书
小学运动会入场词
2015/07/18 职场文书