溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<h4>，作為段落不支持分類
一個好的博文除了博文的質量要好以外，好的組織結構也能讓讀者閱讀的更加舒服與方便，我看園子里面有一些園友的博文都是分章節的，并且在博文的前面都帶有章節的目錄索引，點擊索引之后會跳轉到相應的章節閱讀，并且還可以回到目錄頂端，其中 Fish Li 的博文就是這種組織，當然這種結構如果是在寫博文的時候人工設置那是非常麻煩的，無疑是增加了寫作人的工作量。如果能自動生成章節索引豈不是節省了一大堆工作量。本來想通過FireBug看看Fish Li源碼是怎么實現的，但是好像js是加密過的。那我就自己動手了，其實也沒多少代碼，很簡單。
html代碼
<h4>章節1</h4> <p>這里是章節1的內容</p> <h4>章節2</h4> <p>這里是章節2的內容</p> <h4>章節3</h4> <p>這里是章節3的內容</p> <h4>章節4</h4> <p>小小代碼，不值一提，如果您覺得對您還有一點用，就點個贊支持一下吧。</p>
js代碼
<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList()
{
var jquery_h4_list = $('#cnblogs_post_body h4');//如果你的章節標題不是h4,只需要將這里的h4換掉即可
if(jquery_h4_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p ><b>閱讀目錄</b></p>';
content += '<ul>';
for(var i =0;i<jquery_h4_list.length;i++)
{
var go_to_top = '<div ><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到頂部</a><a name="_label' + i + '"></a></div>';
$(jquery_h4_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_h4_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代碼” 區保存即可。
注意：上述js代碼中提取的h4作為章節的標題，如果你的標題不是h4請在代碼注釋的地方自行修改。該代碼除了在文章的最開始生成目錄索引之外，還會在每一個章節最后右下角(也就是下一個章節標題的右上角)會生成一個“回到頂部”的鏈接，以方便讀者回到目錄。本篇文章的目錄結構就是自動生成的效果，如果你覺得有用，就趕快試用一下吧。
原文：https://www.cnblogs.com/wangqiguo/p/4355032.html
通過<h3><h4>
效果圖：
對于比較長的文章，有一個好的目錄索引是很有必要的，可以讓讀者比較清楚地了解文章內容和層次。然而，目前（2015.7）博客園不像csdn博客那樣，會對發布的文章自動生成目錄索引。不過，一些網友通過博客園后臺提供的一些自定義功能，自己寫腳本實現了這一功能。我用的腳本主要就是參考@薰衣草的旋律 的，文章地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。
原作者的腳本只支持1級目錄，我改了兩級：第1級是h3，第2級是h4。還添加了一些小玩意，比如討論qq群號。效果如下圖所示：
添加功能的具體步驟是：
1、確保自己的博客園后臺支持js
這個默認是不支持，需要向官方發個郵件申請開通（郵箱是contact@cnblogs.com），我簡單寫了封郵件，1小時就回復了，郵件內容我只寫了兩個字：如題。。。。
2、到后臺加入腳本
打開博客園后臺，進入“設置”標簽頁，在最下面的“頁腳Html代碼”對應的編輯框粘貼你的js代碼，然后點“保存”按鈕保存。
3、按格式寫文章
在寫新博文的時候，注意按照你js腳本里設定的格式來劃分章節，比如h3,h4等。當然，以前發布的文章如果有h3,h4之類，也會自動生成目錄索引。
如下：
<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 h3_list = $('#cnblogs_post_body h3');//如果你的章節標題不是h3,只需要將這里的h3換掉即可
if(mainContent.length < 1)
return;
if(h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p ><b>目錄</b></p>';
content += '<ul>';
for(var i=0; i<h3_list.length; i++)
{
var go_to_top = '<div ><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到頂部</a><a name="_label' + i + '"></a></div>';
$(h3_list[i]).before(go_to_top);
var h4_list = $(h3_list[i]).nextAll("h4");
var li3_content = '';
for(var j=0; j<h4_list.length; j++)
{
var tmp = $(h4_list[j]).prevAll('h3').first();
if(!tmp.is(h3_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h4_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '" rel="external nofollow" >' + $(h4_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" >' + $(h3_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" >' + $(h3_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p> </p>';
content += '<p ><b>正文</b></p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
var qqinfo = '<p >討論QQ群：135202158</p>';
$(mainContent[0]).prepend(qqinfo);
}
GenerateContentList();
</script>
通過<h3><h4><h5>實現
效果圖
演示頁面：https://www.jb51.net/article/132341.htm
參考張果的頁面，他使用的是<h2><h3><h4>,這里億速云小編使用的是<h3><h4><h5>,根據seo的說法，頁面中大量出現h2對權重有影響。
<script language="javascript" type="text/javascript">
//生成目錄索引列表
function GenerateContentList() {
var jquery_h2_list = $('#content h3');
if (jquery_h2_list.length == 0) { return; }
if ($('#content').length == 0) { return; }
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p ><b>目錄</b></p>';
// 一級目錄 start
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h2_list.length; i++) {
var go_to_top = '<div ><a name="_label' + i + '"></a></div>';
$(jquery_h2_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_h2_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; }
var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[nextH1Index], "h4");
// 二級目錄 start
if (jquery_h3_list.length > 0) {
//li_content +='<ul >';
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h3_list.length; j++) {
var go_to_top2 = '<div ><a name="_lab2_' + i + '_' + j + '"></a></div>';
$(jquery_h3_list[j]).before(go_to_top2);
// 二級目錄的一條
li_content += '<li><a href="#_lab2_' + i + '_' + j + '" rel="external nofollow" >' + $(jquery_h3_list[j]).text() + '</a></li>';
var nextH2Index = j + 1;
var next;
if (nextH2Index == jquery_h3_list.length) {
if (i + 1 == jquery_h2_list.length) {
next = jquery_h2_list[0];
}
else {
next = jquery_h2_list[i + 1];
}
}
else {
next = jquery_h3_list[nextH2Index];
}
var jquery_h4_list = $(jquery_h3_list[j]).nextUntil(next, "h5");
// 三級目錄 start
if (jquery_h4_list.length > 0) {
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h4_list.length; k++) {
var go_to_third_Content = '<div ><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h4_list[k]).before(go_to_third_Content);
// 三級目錄的一條
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '" rel="external nofollow" >' + $(jquery_h4_list[k]).text() + '</a></li>';
}
if (jquery_h4_list.length > 0) {
li_content += '</ul>';
}
li_content += '</li>';
// 三級目錄 end
}
if (jquery_h3_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/
到此文章就結束了，希望大家以后多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
