網站自動產生章節目錄索引的js程式碼範例-js教程-PHP中文網

首頁

web前端

js教程

網站自動產生章節目錄索引的js程式碼範例

小云云

Jan 09, 2018 am 09:12 AM

javascript索引自動生成

網站很多功能都是由js實現的，本文主要介紹了讓博客園博客自動生成章節目錄索引的多個js代碼,需要的朋友可以參考下，希望能幫助到大家。

第一種：只支援一級目錄

，作為段落不支援分類

一個好的博文除了博文的品質要好以外，好的組織結構也能讓讀者閱讀的更加舒服與方便，我看園子裡面有一些園友的博文都是分章節的，並且在博文的前面都帶有章節的目錄索引，點擊索引之後會跳到相應的章節閱讀，並且還可以回到目錄頂端，其中Fish Li 的博文就是這種組織，當然這種結構如果是在寫博文的時候人工設置那是非常麻煩的，無疑是增加了寫作人的工作量。如果能自動產生章節索引豈不是省了一大堆工作量。本來想透過FireBug看看Fish Li原始碼是怎麼實現的，但好像js是加密過的。那我就自己動手了，其實也沒多少程式碼，很簡單。

html程式碼

<h3 id="章节">章节1</h3>
<p>这里是章节1的内容</p>
<h3 id="章节">章节2</h3>
<p>这里是章节2的内容</p>
<h3 id="章节">章节3</h3>
<p>这里是章节3的内容</p>
<h3 id="章节">章节4</h3>
<p>小小代码，不值一提，如果您觉得对您还有一点用，就点个赞支持一下吧。</p>

js程式碼

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

使用方法：登入部落格花園之後，開啟部落格園的後台管理，切換到「設定」選項卡，將上面的程式碼，貼到「頁腳HTML代碼」區儲存即可。

注意：上述js程式碼中提取的h3作為章節的標題，如果你的標題不是h3請在程式碼註解的地方自行修改。該程式碼除了在文章的最開始生成目錄索引之外，還會在每一個章節最後右下角(也就是下一個章節標題的右上角)會生成一個“回到頂部”的鏈接，以方便讀者回到目錄。這篇文章的目錄結構就是自動產生的效果，如果你覺得有用，就趕快試試看吧。

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

第二種：支持二級分類

#透過

效果圖：

#對於比較長的文章，有一個好的目錄索引是很有必要的，可以讓讀者比較清楚了解文章內容和層次。然而，目前（2015.7）部落格園不像csdn部落格那樣，會對發佈的文章自動產生目錄索引。不過，有些網友透過部落格園區後台提供的一些自訂功能，自己寫腳本實現了這項功能。我用的腳本主要是參考@薰衣草的旋律的，文章網址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。

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

新增功能的具體步驟是：

#1、確保自己的部落格園區後台支援js
這個預設是不支持，需要向官方發個郵件申請開通（郵箱是contact@cnblogs.com），我簡單寫了封郵件，1小時就回覆了，郵件內容我只寫了兩個字：如題。。。。
2、到後台加入腳本
開啟部落格園區後台，進入「設定」標籤頁，在最下面的「頁腳Html程式碼」對應的編輯框貼上你的js程式碼，然後點「儲存」按鈕保存。
3、按格式寫文章
在寫新博文的時候，注意按照你js腳本裡設定的格式來劃分章節，比如h2,h3等。當然，以前發布的文章如果有h2,h3之類，也會自動產生目錄索引。

如下：

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

// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
 var mainContent = $(&#39;#cnblogs_post_body&#39;);
 var h2_list = $(&#39;#cnblogs_post_body h2&#39;);//如果你的章节标题不是h2,只需要将这里的h2换掉即可

 if(mainContent.length < 1)
 return;
 
 if(h2_list.length>0)
 {
 var content = &#39;<a name="_labelTop"></a>&#39;;
 content += &#39;<p id="navCategory">&#39;;
 content += &#39;<p style="font-size:18px"><b>目录</b></p>&#39;;
 content += &#39;<ul>&#39;;
 for(var i=0; i<h2_list.length; i++)
 {
  var go_to_top = &#39;<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label&#39; + i + &#39;"></a></p>&#39;;
  $(h2_list[i]).before(go_to_top);
  
  var h3_list = $(h2_list[i]).nextAll("h3");
  var li3_content = &#39;&#39;;
  for(var j=0; j<h3_list.length; j++)
  {
  var tmp = $(h3_list[j]).prevAll(&#39;h2&#39;).first();
  if(!tmp.is(h2_list[i]))
   break;
  var li3_anchor = &#39;<a name="_label&#39; + i + &#39;_&#39; + j + &#39;"></a>&#39;;
  $(h3_list[j]).before(li3_anchor);
  li3_content += &#39;<li><a href="#_label&#39; + i + &#39;_&#39; + j + &#39;" rel="external nofollow" >&#39; + $(h3_list[j]).text() + &#39;</a></li>&#39;;
  }
  
  var li2_content = &#39;&#39;;
  if(li3_content.length > 0)
  li2_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(h2_list[i]).text() + &#39;</a><ul>&#39; + li3_content + &#39;</ul></li>&#39;;
  else
  li2_content = &#39;<li><a href="#_label&#39; + i + &#39;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + $(h2_list[i]).text() + &#39;</a></li>&#39;;
  content += li2_content;
 }
 content += &#39;</ul>&#39;;
 content += &#39;</p><p> </p>&#39;;
 content += &#39;<p style="font-size:18px"><b>正文</b></p>&#39;;
 if($(&#39;#cnblogs_post_body&#39;).length != 0 )
 {
  $($(&#39;#cnblogs_post_body&#39;)[0]).prepend(content);
 }
 } 

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

GenerateContentList();
</script>

第三種：支援三級目錄

透過

效果圖

示範頁：http://www.jb51.net/article/132341.htm

參考張果的頁面，他使用的是

,這裡腳本之家小編使用的是

,根據seo的說法，頁面中大量出現h1對權重有影響。

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

  var content = &#39;<a name="_labelTop"></a>&#39;;
  content += &#39;<p id="navCategory">&#39;;
  content += &#39;<p style="font-size:18px"><b>目录</b></p>&#39;;
  // 一级目录 start
  content += &#39;<ul class="first_class_ul">&#39;;

  for (var i = 0; i < jquery_h1_list.length; i++) {
  var go_to_top = &#39;<p style="text-align: right"><a name="_label&#39; + i + &#39;"></a></p>&#39;;
  $(jquery_h1_list[i]).before(go_to_top);

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

  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");
  // 二级目录 start
  if (jquery_h2_list.length > 0) {
   //li_content +=&#39;<ul style="list-style-type:none; text-align: left; margin:2px 2px;">&#39;;
   li_content += &#39;<ul class="second_class_ul">&#39;;
  }
  for (var j = 0; j < jquery_h2_list.length; j++) {
   var go_to_top2 = &#39;<p style="text-align: right"><a name="_lab2_&#39; + i + &#39;_&#39; + j + &#39;"></a></p>&#39;;
   $(jquery_h2_list[j]).before(go_to_top2);
   // 二级目录的一条
   li_content += &#39;<li><a href="#_lab2_&#39; + i + &#39;_&#39; + j + &#39;" rel="external nofollow" >&#39; + $(jquery_h2_list[j]).text() + &#39;</a></li>&#39;;

   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");
   // 三级目录 start
   if (jquery_h3_list.length > 0) {
   li_content += &#39;<ul class="third_class_ul">&#39;;
   }

   for (var k = 0; k < jquery_h3_list.length; k++) {
   var go_to_third_Content = &#39;<p style="text-align: right"><a name="_label3_&#39; + i + &#39;_&#39; + j + &#39;_&#39; + k + &#39;"></a></p>&#39;;
   $(jquery_h3_list[k]).before(go_to_third_Content);
   // 三级目录的一条
   li_content += &#39;<li><a href="#_label3_&#39; + i + &#39;_&#39; + j + &#39;_&#39; + k + &#39;" rel="external nofollow" >&#39; + $(jquery_h3_list[k]).text() + &#39;</a></li>&#39;;
   }

   if (jquery_h3_list.length > 0) {
   li_content += &#39;</ul>&#39;;
   }
   li_content += &#39;</li>&#39;;
   // 三级目录 end
  }
  if (jquery_h2_list.length > 0) {
   li_content += &#39;</ul>&#39;;
  }
  li_content += &#39;</li>&#39;;
  // 二级目录 end

  content += li_content;
  }
  // 一级目录 end
  content += &#39;</ul>&#39;;
  content += &#39;</p>&#39;;

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

 GenerateContentList();
 </script>

大家學會了嗎？趕快嘗試一下吧。

相關推薦：

PHP 禁止顯示目錄索引

#jQuery Jsonp跨網域模擬搜尋引擎實例分享

#php轉換索引數組為json

mysql資料庫索引操作總結

實例詳解javascript實現數組內值索引隨機化及創建隨機數組方法

以上是網站自動產生章節目錄索引的js程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn