網站自動產生章節目錄索引的js程式碼範例
- 小云云原創
- 2018-01-09 09:12:122194瀏覽
網站很多功能都是由js實現的，本文主要介紹了讓博客園博客自動生成章節目錄索引的多個js代碼,需要的朋友可以參考下，希望能幫助到大家。
第一種：只支援一級目錄
684271ed9684bde649abda8831d4d355，作為段落不支援分類
一個好的博文除了博文的品質要好以外，好的組織結構也能讓讀者閱讀的更加舒服與方便，我看園子裡面有一些園友的博文都是分章節的，並且在博文的前面都帶有章節的目錄索引，點擊索引之後會跳到相應的章節閱讀，並且還可以回到目錄頂端，其中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 = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<p 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 = '<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></p>';
$(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 += '</p>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>使用方法：登入部落格花園之後，開啟部落格園的後台管理，切換到「設定」選項卡，將上面的程式碼，貼到「頁腳HTML代碼」 區儲存即可。
注意：上述js程式碼中提取的h3作為章節的標題，如果你的標題不是h3請在程式碼註解的地方自行修改。該程式碼除了在文章的最開始生成目錄索引之外，還會在每一個章節最後右下角(也就是下一個章節標題的右上角)會生成一個“回到頂部”的鏈接，以方便讀者回到目錄。這篇文章的目錄結構就是自動產生的效果，如果你覺得有用，就趕快試試看吧。
原文：https://www.cnblogs.com/wangqiguo/p/4355032.html
第二種：支持二級分類
#透過c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355
效果圖：
#對於比較長的文章，有一個好的目錄索引是很有必要的，可以讓讀者比較清楚了解文章內容和層次。然而，目前（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 = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<p 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 = '<p style="text-align: right"><a href="#_labelTop" rel="external nofollow" rel="external nofollow" >回到顶部</a><a name="_label' + i + '"></a></p>';
$(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 += '</p><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>第三種：支援三級目錄
透過c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355033da605a1c36582d5f8daa31af887dcc1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d355,這裡腳本之家小編使用的是c1a436a314ed609750bd7c7d319db4da684271ed9684bde649abda8831d4d3553f7b3decd2dcafb07b84d2d3985d9f40,根據seo的說法，頁面中大量出現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 += '<p 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 = '<p style="text-align: right"><a name="_label' + i + '"></a></p>';
$(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 = '<p style="text-align: right"><a name="_lab2_' + i + '_' + j + '"></a></p>';
$(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 = '<p style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></p>';
$(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 += '</p>';
$($('#content')[0]).prepend(content);
}
GenerateContentList();
</script>大家學會了嗎？趕快嘗試一下吧。
相關推薦：
實例詳解javascript實現數組內值索引隨機化及創建隨機數組方法
以上是網站自動產生章節目錄索引的js程式碼範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！