關於網站產生章節目錄程式碼範例-js教程-PHP中文網

這篇文章主要介紹了讓部落格花園部落格自動產生章節目錄索引的多個js程式碼,需要的朋友可以參考下

第一種：只支援一級目錄

，作為段落不支持分類

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

html程式碼

<h3>章节1</h3>
<p>这里是章节1的内容</p>
<h3>章节2</h3>
<p>这里是章节2的内容</p>
<h3>章节3</h3>
<p>这里是章节3的内容</p>
<h3>章节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>

登入後複製

第三種：支援三級目錄

透過

實作
效果圖片
示範頁：//www.jb51.net/article/132341.htm
參考張果的頁面，他使用的是< h1>

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

,根據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>

登入後複製

上面是我整理給大家的，希望未來會對大家有幫助。

有關v4 history不能存取的原因

為何response.body().string()不能實作多次調用？

使用Vue元件如何實作行事曆（詳細教學）

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