快捷導(dǎo)航

讓網(wǎng)站自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼

更新時(shí)間：2018年01月07日 23:25:13 作者：mdxy

這篇文章主要介紹了讓博客園博客自動(dòng)生成章節(jié)目錄索引的多個(gè)js代碼,需要的朋友可以參考下

第一種：只支持一級(jí)目錄

<h3>，作為段落不支持分類

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

html代碼

<h3>章節(jié)1</h3>
<p>這里是章節(jié)1的內(nèi)容</p>
<h3>章節(jié)2</h3>
<p>這里是章節(jié)2的內(nèi)容</p>
<h3>章節(jié)3</h3>
<p>這里是章節(jié)3的內(nèi)容</p>
<h3>章節(jié)4</h3>
<p>小小代碼，不值一提，如果您覺得對(duì)您還有一點(diǎn)用，就點(diǎn)個(gè)贊支持一下吧。</p>

js代碼

<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" 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>

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

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

原文：https://www.cnblogs.com/wangqiguo/p/4355032.html

第二種：支持二級(jí)分類

通過<h2><h3>

效果圖：

對(duì)于比較長(zhǎng)的文章，有一個(gè)好的目錄索引是很有必要的，可以讓讀者比較清楚地了解文章內(nèi)容和層次。然而，目前（2015.7）博客園不像csdn博客那樣，會(huì)對(duì)發(fā)布的文章自動(dòng)生成目錄索引。不過，一些網(wǎng)友通過博客園后臺(tái)提供的一些自定義功能，自己寫腳本實(shí)現(xiàn)了這一功能。我用的腳本主要就是參考@薰衣草的旋律的，文章地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。

原作者的腳本只支持1級(jí)目錄，我改了兩級(jí)：第1級(jí)是h2，第2級(jí)是h3。還添加了一些小玩意，比如討論qq群號(hào)。效果如下圖所示：

添加功能的具體步驟是：

1、確保自己的博客園后臺(tái)支持js
這個(gè)默認(rèn)是不支持，需要向官方發(fā)個(gè)郵件申請(qǐng)開通（郵箱是contact@cnblogs.com），我簡(jiǎn)單寫了封郵件，1小時(shí)就回復(fù)了，郵件內(nèi)容我只寫了兩個(gè)字：如題。。。。
2、到后臺(tái)加入腳本
打開博客園后臺(tái)，進(jìn)入“設(shè)置”標(biāo)簽頁，在最下面的“頁腳Html代碼”對(duì)應(yīng)的編輯框粘貼你的js代碼，然后點(diǎn)“保存”按鈕保存。
3、按格式寫文章
在寫新博文的時(shí)候，注意按照你js腳本里設(shè)定的格式來劃分章節(jié)，比如h2,h3等。當(dāng)然，以前發(fā)布的文章如果有h2,h3之類，也會(huì)自動(dòng)生成目錄索引。

如下：

<script language="javascript" type="text/javascript">

// 生成目錄索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
 var mainContent = $('#cnblogs_post_body');
 var h2_list = $('#cnblogs_post_body h2');//如果你的章節(jié)標(biāo)題不是h2,只需要將這里的h2換掉即可

 if(mainContent.length < 1)
 return;
 
 if(h2_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<h2_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>';
  $(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><a href="#_label' + i + '_' + j + '" rel="external nofollow" >' + $(h3_list[j]).text() + '</a></li>';
  }
  
  var li2_content = '';
  if(li3_content.length > 0)
  li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
  else
  li2_content = '<li><a href="#_label' + i + '" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + $(h2_list[i]).text() + '</a></li>';
  content += li2_content;
 }
 content += '</ul>';
 content += '</div><p>&nbsp;</p>';
 content += '<p style="font-size:18px"><b>正文</b></p>';
 if($('#cnblogs_post_body').length != 0 )
 {
  $($('#cnblogs_post_body')[0]).prepend(content);
 }
 } 

 var qqinfo = '<p style="color:navy;font-size:12px">討論QQ群：135202158</p>';
 $(mainContent[0]).prepend(qqinfo);
}

GenerateContentList();
</script>

第三種：支持三級(jí)目錄

通過<h2><h3><h4>實(shí)現(xiàn)

效果圖

演示頁面：http://chabaoo.cn/article/132341.htm

參考張果的頁面，他使用的是<h1><h2><h3>,這里腳本之家小編使用的是<h2><h3><h4>,根據(jù)seo的說法，頁面中大量出現(xiàn)h1對(duì)權(quán)重有影響。

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

  var content = '<a name="_labelTop"></a>';
  content += '<div id="navCategory">';
  content += '<p style="font-size:18px"><b>目錄</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 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" 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], "h3");
  // 二級(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, "h4");
   // 三級(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>';

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

 GenerateContentList();
 </script>

參考：http://www.cnblogs.com/best/

到此文章就結(jié)束了，希望大家以后多多支持腳本之家。

您可能感興趣的文章: