快捷導(dǎo)航

文章或博客自動(dòng)生成章節(jié)目錄索引(支持三級(jí))的實(shí)現(xiàn)代碼

更新時(shí)間：2020年05月10日 11:51:20 作者：BIT祝威

一個(gè)好的博文除了博文的質(zhì)量要好以外，好的組織結(jié)構(gòu)也能讓讀者閱讀的更加舒服與方便，我看很多網(wǎng)站里面有一些園友的博文都是分章節(jié)的，并且在博文的前面都帶有章節(jié)的目錄索引，點(diǎn)擊索引之后會(huì)跳轉(zhuǎn)到相應(yīng)的章節(jié)閱讀

自動(dòng)生成章節(jié)目錄索引(只支持一級(jí))

一個(gè)好的博文除了博文的質(zhì)量要好以外，好的組織結(jié)構(gòu)也能讓讀者閱讀的更加舒服與方便，我看園子里面有一些園友的博文都是分章節(jié)的，并且在博文的前面都帶有章節(jié)的目錄索引，點(diǎn)擊索引之后會(huì)跳轉(zhuǎn)到相應(yīng)的章節(jié)閱讀，并且還可以回到目錄頂端，其中 Fish Li 的博文就是這種組織，當(dāng)然這種結(jié)構(gòu)如果是在寫(xiě)博文的時(shí)候人工設(shè)置那是非常麻煩的，無(wú)疑是增加了寫(xiě)作人的工作量。如果能自動(dòng)生成章節(jié)索引豈不是節(jié)省了一大堆工作量。本來(lái)想通過(guò)FireBug看看Fish Li源碼是怎么實(shí)現(xiàn)的，但是好像js是加密過(guò)的。那我就自己動(dòng)手了，其實(shí)也沒(méi)多少代碼，很簡(jiǎn)單。

<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
  var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節(jié)標(biāo)題不是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>

使用方法：登錄到博客園之后，打開(kāi)博客園的后臺(tái)管理，切換到“設(shè)置”選項(xiàng)卡，將上面的代碼，粘貼到 “頁(yè)腳HTML代碼” 區(qū)保存即可。

注意：上述js代碼中提取的h3作為章節(jié)的標(biāo)題，如果你的標(biāo)題不是h3請(qǐng)?jiān)诖a注釋的地方自行修改。該代碼除了在文章的最開(kāi)始生成目錄索引之外，還會(huì)在每一個(gè)章節(jié)最后右下角(也就是下一個(gè)章節(jié)標(biāo)題的右上角)會(huì)生成一個(gè)“回到頂部”的鏈接，以方便讀者回到目錄。本篇文章的目錄結(jié)構(gòu)就是自動(dòng)生成的效果，如果你覺(jué)得有用，就趕快試用一下吧。

自動(dòng)生成三級(jí)目錄

<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>';
  // 一級(jí)目錄 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);

    // 一級(jí)目錄的一條
    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");
    // 二級(jí)目錄 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);
      // 二級(jí)目錄的一條
      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");
      // 三級(jí)目錄 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);
        // 三級(jí)目錄的一條
        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>';
      // 三級(jí)目錄 end
    }
    if (jquery_h2_list.length > 0)
    {
      li_content +='</ul>';
    }
    li_content +='</li>';
    // 二級(jí)目錄 end

    content += li_content;
  }
  // 一級(jí)目錄 end
  content += '</ul>';
  content += '</div>';

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

GenerateContentList();
</script>
levels of contents

如何使用(How to Use)

把上述JS代碼復(fù)制到“頁(yè)腳Html代碼”里。

在寫(xiě)博客的時(shí)候，給每個(gè)章節(jié)的標(biāo)題設(shè)置“標(biāo)題1”或“標(biāo)題2”或“標(biāo)題3”格式。

然后一切就緒，欣賞效果吧。

示例(Demo)

http://chabaoo.cn/article/186217.htm

腳本之家小編注：為了seo考慮,不建議大量用h1，一個(gè)頁(yè)面可以存在多個(gè)h2,h3,h4，所以腳本之家網(wǎng)站采用的是h2,h3,h4實(shí)現(xiàn)三級(jí)目錄。

補(bǔ)充：

腳本之家小編從別的地方看到的相關(guān)文章可以當(dāng)個(gè)參考

<!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>一個(gè)段落而已</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章節(jié)</h1></a>
    <div class="seg-content"></div>
    <a name="seg-2" class="seg-begin"><h1>第2章節(jié)</h1></a>
    <div class="seg-content"></div>
    <a name="seg-3" class="seg-begin"><h1>第3章節(jié)</h1></a>
    <div class="seg-content"></div>
    <a name="seg-4" class="seg-begin"><h1>第4章節(jié)</h1></a>
    <div class="seg-content"></div>
  </div>
</body>
</html>

具體的使用可以參考下面的文章。

您可能感興趣的文章: