讓網站自動生成章節(jié)目錄索引的多個js代碼
更新時間：2018年01月07日 23:25:13 作者：mdxy
這篇文章主要介紹了讓博客園博客自動生成章節(jié)目錄索引的多個js代碼,需要的朋友可以參考下
第一種：只支持一級目錄
<h3>，作為段落不支持分類
一個好的博文除了博文的質量要好以外，好的組織結構也能讓讀者閱讀的更加舒服與方便，我看園子里面有一些園友的博文都是分章節(jié)的，并且在博文的前面都帶有章節(jié)的目錄索引，點擊索引之后會跳轉到相應的章節(jié)閱讀，并且還可以回到目錄頂端，其中 Fish Li 的博文就是這種組織，當然這種結構如果是在寫博文的時候人工設置那是非常麻煩的，無疑是增加了寫作人的工作量。如果能自動生成章節(jié)索引豈不是節(jié)省了一大堆工作量。本來想通過FireBug看看Fish Li源碼是怎么實現(xiàn)的，但是好像js是加密過的。那我就自己動手了，其實也沒多少代碼，很簡單。
html代碼
<h3>章節(jié)1</h3> <p>這里是章節(jié)1的內容</p> <h3>章節(jié)2</h3> <p>這里是章節(jié)2的內容</p> <h3>章節(jié)3</h3> <p>這里是章節(jié)3的內容</p> <h3>章節(jié)4</h3> <p>小小代碼，不值一提，如果您覺得對您還有一點用，就點個贊支持一下吧。</p>
js代碼
<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章節(jié)標題不是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>
使用方法：登錄到博客園之后，打開博客園的后臺管理，切換到“設置”選項卡，將上面的代碼，粘貼到 “頁腳HTML代碼” 區(qū)保存即可。
注意：上述js代碼中提取的h3作為章節(jié)的標題，如果你的標題不是h3請在代碼注釋的地方自行修改。該代碼除了在文章的最開始生成目錄索引之外，還會在每一個章節(jié)最后右下角(也就是下一個章節(jié)標題的右上角)會生成一個“回到頂部”的鏈接，以方便讀者回到目錄。本篇文章的目錄結構就是自動生成的效果，如果你覺得有用，就趕快試用一下吧。
原文：https://www.cnblogs.com/wangqiguo/p/4355032.html
第二種：支持二級分類
通過<h2><h3>
效果圖：
對于比較長的文章，有一個好的目錄索引是很有必要的，可以讓讀者比較清楚地了解文章內容和層次。然而，目前（2015.7）博客園不像csdn博客那樣，會對發(fā)布的文章自動生成目錄索引。不過，一些網友通過博客園后臺提供的一些自定義功能，自己寫腳本實現(xiàn)了這一功能。我用的腳本主要就是參考@薰衣草的旋律 的，文章地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。
原作者的腳本只支持1級目錄，我改了兩級：第1級是h2，第2級是h3。還添加了一些小玩意，比如討論qq群號。效果如下圖所示：
添加功能的具體步驟是：
1、確保自己的博客園后臺支持js
這個默認是不支持，需要向官方發(fā)個郵件申請開通（郵箱是contact@cnblogs.com），我簡單寫了封郵件，1小時就回復了，郵件內容我只寫了兩個字：如題。。。。
2、到后臺加入腳本
打開博客園后臺，進入“設置”標簽頁，在最下面的“頁腳Html代碼”對應的編輯框粘貼你的js代碼，然后點“保存”按鈕保存。
3、按格式寫文章
在寫新博文的時候，注意按照你js腳本里設定的格式來劃分章節(jié)，比如h2,h3等。當然，以前發(fā)布的文章如果有h2,h3之類，也會自動生成目錄索引。
如下：
<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é)標題不是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> </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>
第三種：支持三級目錄
通過<h2><h3><h4>實現(xiàn)
效果圖
演示頁面：http://chabaoo.cn/article/132341.htm
參考張果的頁面，他使用的是<h1><h2><h3>,這里腳本之家小編使用的是<h2><h3><h4>,根據seo的說法，頁面中大量出現(xiàn)h1對權重有影響。
<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>';
// 一級目錄 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);
// 一級目錄的一條
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");
// 二級目錄 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, "h4");
// 三級目錄 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>';
$($('#content')[0]).prepend(content);
}
GenerateContentList();
</script>
參考：http://www.cnblogs.com/best/
到此文章就結束了，希望大家以后多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄狫S獲取字符串實際長度(包含漢字)的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
本文給大家分享日常中比較熟悉的常用的幾個算法用JS的實現(xiàn)，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-11-11
晚上要下班了老板發(fā)來一個任務：把一個300M左右的視頻壓縮到100M以內,以便在微信上發(fā)送。于是就是抽空搞了起來，下面小編把過程分享到腳本之家平臺，需要的朋友參考下吧2018-11-11
隱式轉換就是自動轉換,通常發(fā)生在一些數(shù)學運算中,本文就來介紹一下JS不同運算符下隱式類型轉換的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
前端url拼接參數(shù)格式&?用&和??=拼接方法實例
在一些情況下需要直接往url上拼接請求參數(shù),下面這篇文章主要給大家介紹了關于前端url拼接參數(shù)格式&?用&和??=拼接的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
大家討論下constructor的作用哈,需要的朋友可以參考下。從51js摘編而來。2011-11-11
微信小程序報錯:does?not?have?a?method?"xxxx"?to?ha
這篇文章主要給大家介紹了關于微信小程序報錯:does?not?have?a?method?"xxxx"?to?handle?event?"tap"的解決方案,文中將解決的辦法介紹的非常詳細,需要的朋友可以參考下2023-01-01
JavaScript的public、private和privileged模式
公共/私有變量和方法通過一個簡單的的例子，來展示如何使用JavaScript在類里面創(chuàng)建私有變量和方法2009-12-12
本文主要介紹了個人對于javascript中回調函數(shù)的理解和使用方法及示例,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)電子簽名功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07