1. 程式人生 > >讓部落格園部落格自動生成章節目錄索引

讓部落格園部落格自動生成章節目錄索引

討論QQ群:135202158

對於比較長的文章,有一個好的目錄索引是很有必要的,可以讓讀者比較清楚地瞭解文章內容和層次。然而,目前(2015.7)部落格園不像csdn部落格那樣,會對釋出的文章自動生成目錄索引。不過,一些網友通過部落格園後臺提供的一些自定義功能,自己寫指令碼實現了這一功能。我用的指令碼主要就是參考@薰衣草的旋律 的,文章地址是:http://www.cnblogs.com/wangqiguo/p/4355032.html。

原作者的指令碼只支援1級目錄,我改了兩級:第1級是h2,第2級是h3。還添加了一些小玩意,比如討論qq群號。效果如下圖所示:

新增功能的具體步驟是:

    1. 確保自己的部落格園後臺支援js
      這個預設是不支援,需要向官方發個郵件申請開通(郵箱是[email protected]
      ),我簡單寫了封郵件,1小時就回復了,郵件內容我只寫了兩個字:如題。。。。
    2. 到後臺加入指令碼
      開啟部落格園後臺,進入“設定”標籤頁,在最下面的“頁尾Html程式碼”對應的編輯框貼上你的js程式碼,然後點“儲存”按鈕儲存。
    3. 按格式寫文章
      在寫新博文的時候,注意按照你js腳本里設定的格式來劃分章節,比如h2,h3等。當然,以前釋出的文章如果有h2,h3之類,也會自動生成目錄索引。

指令碼如下:

複製程式碼
 1 <script language="javascript" type="text/javascript">
 2 
 3 // 生成目錄索引列表
 4 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
5 // modified by: zzq 6 function GenerateContentList() 7 { 8 var mainContent = $('#cnblogs_post_body'); 9 var h2_list = $('#cnblogs_post_body h2');//如果你的章節標題不是h2,只需要將這裡的h2換掉即可 10 11 if(mainContent.length < 1) 12 return; 13 14 if(h2_list.length>0) 15 { 16 var
content = '<a name="_labelTop"></a>'; 17 content += '<div id="navCategory">'; 18 content += '<p style="font-size:18px"><b>目錄</b></p>'; 19 content += '<ul>'; 20 for(var i=0; i<h2_list.length; i++) 21 { 22 var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>'; 23 $(h2_list[i]).before(go_to_top); 24 25 var h3_list = $(h2_list[i]).nextAll("h3"); 26 var li3_content = ''; 27 for(var j=0; j<h3_list.length; j++) 28 { 29 var tmp = $(h3_list[j]).prevAll('h2').first(); 30 if(!tmp.is(h2_list[i])) 31 break; 32 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; 33 $(h3_list[j]).before(li3_anchor); 34 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; 35 } 36 37 var li2_content = ''; 38 if(li3_content.length > 0) 39 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; 40 else 41 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; 42 content += li2_content; 43 } 44 content += '</ul>'; 45 content += '</div><p>&nbsp;</p>'; 46 content += '<p style="font-size:18px"><b>正文</b></p>'; 47 if($('#cnblogs_post_body').length != 0 ) 48 { 49 $($('#cnblogs_post_body')[0]).prepend(content); 50 } 51 } 52 53 var qqinfo = '<p style="color:navy;font-size:12px">討論QQ群:135202158</p>'; 54 $(mainContent[0]).prepend(qqinfo); 55 } 56 57 GenerateContentList(); 58 </script>
複製程式碼

相關推薦

博客博客自動生成章節目錄索引

博文 cli fun nsf indent 簡單 click style init 討論QQ群:135202158 對於比較長的文章,有一個好的目錄索引是很有必要的,可以讓讀者比較清楚地了解文章內容和層次。然而,目前(2015.7)博客園不像csdn博客那樣,會對發布的

自定義部落主題和自動生成目錄 部落部落自動生成章節目錄索引

背景 最近覺得部落格園網站太老舊了,不好看,並且沒有移動端,於是想轉到簡書去寫部落格(主要簡書有移動端),寫出來的效果還是不滿意,於是又回到了部落格園,只能自己修改下部落格主題了。 於是百度了下,找到了兩篇參考部落格: 主題修改參考了:一套簡約漂亮的響應式部落格園主題面板 新增目錄參考了:讓部落格園部

部落部落自動生成章節目錄索引

討論QQ群:135202158 對於比較長的文章,有一個好的目錄索引是很有必要的,可以讓讀者比較清楚地瞭解文章內容和層次。然而,目前(2015.7)部落格園不像csdn部落格那樣,會對釋出的文章自動生成目錄索引。不過,一些網友通過部落格園後臺提供的一些自定義功能,自己寫指令碼實現了這一功能。我用的指令碼主要

部落部落自動生成目錄/目錄索引

<script language="javascript" type="text/javascript"> function GenerateContentList() { var mainContent = $('#cnblogs_post_body'); var h2_li

部落搬家系列(三)-爬取部落部落

部落格搬家系列(三)-爬取部落格園部落格 一.前情回顧  部落格搬家系列(一)-簡介:https://blog.csdn.net/rico_zhou/article/details/83619152  部落格搬家系列(二)-爬取CSDN部落格:https://bl

部落---部落美化彙總

轉載自:https://www.cnblogs.com/WhiteTears/p/8824544.html   1、申請js許可權 直接在設定裡點選申請,稽核較慢且通過率較低。因此可以向[email protected]發郵件,簡單說明理由,一般很快就能得到回覆了。

統計自己部落部落的流量

統計站點              CNZZ 註冊使用     點選進入,沒賬號的註冊一個,選擇產品---->選擇網站統計(U-Web)          進入後的介面        新增站點 &

Python模組學習之Timer定時任務,函式自調實現定時獲取部落部落瀏覽量

Timer定時任務 下面是Timer函式的官方doc介紹資訊 “”” Call a function after a specified number of seconds: t = Timer(30.0, f, args=No

自定義部落部落的背景圖片

> 看到別人的部落格背景自己也想弄一個,搜了很多方法,但是都只是把一堆程式碼貼著,完全沒有告訴我設定背景圖片的程式碼到底是什麼,自己研究了一下,現在把它分享給跟我一樣有好奇心的朋友。 步驟一共2步: ### 1.上傳圖片到相簿 首先把自己想要做背景的圖片上傳到部落格園,步驟如下: 首先進入到自己的部落

博客博客自動生成目錄/目錄索引

ali 回到頂部 next ora get tmp title logs 只需要 閱讀目錄 閱讀目錄 實現效果 添加功能的具體步驟 生成腳本 回到頂部 閱讀目錄 實現效果 添加功能的具體步驟 生成腳本 近來寫了一些比較長的博客,閱讀起來很不方便,看

myql中的資料庫表自動生成javaBean的模板

不積跬步,無以至千里 問題所在 今天重構以前的程式碼,因為資料庫有比較大的改動,所以需要寫很多javaBean! 作為一個程式設計師,重複意味著沒有效率,更意味著無聊,一旦無聊便沒有想程式設計的慾望,程式碼質量肯定刷刷刷的下降,質量下降了就意味著重寫。。。。

博客博文生成章節目錄

xtu ali 步驟 size index 添加 fir dex before 一、自動生成章節目錄 為博文添加目錄索引可以得到更加舒適的閱讀感受,為此,本文為博客園博客自動生成章節目錄索引。 1. 介紹 本代碼同時適配如下三種復雜標題情況: “只有一級標題”或“只有二

linux建立賬戶並自動生成目錄和主目錄下的檔案 linux建立賬戶並自動生成目錄和主目錄下的檔案

linux建立賬戶並自動生成主目錄和主目錄下的檔案   # useradd -d /home/test -m test; 然後給test設定密碼。 # passwd test;       1. useradd

linux創建賬戶並自動生成目錄和主目錄下的文件

格式 linux 口令失效 -m 選項 -s 語法 ear 初始 # useradd -d /home/test -m test; 然後給test設置密碼。 # passwd test; 1. useradd 添加用戶或更新新創建用戶的默認信息 語法:u

用React實現一個自動生成文章目錄的組件

name 地址 ati type soc 非貪婪 開發者 component key 原文地址:小寒的博客 功能介紹 這個組件的效果吶,就是你在瀏覽這個頁面的時候點擊右上角的叉叉看到的那個文章目錄。 功能很簡單,就是根據文章內容自動生成這個目錄,可以快速跳轉。

Maven利用Archetype自動生成專案目錄結構

使用Archetype建立專案目錄 Maven3以上建議使用命令:mvn archetype:generate Maven2建議使用命令:mvn org.apache.maven.plugins:maven-archetype-plugin:2.0-alpha-5:gene

利用org.springframework.beans.factory.InitializingBean自動生成檔案目錄

做專案時如果遇到檔案處理,經常會遇到檔案目錄不存在這個問題,因為它不是業務處理的核心部分,起碼我是不想花時間去檢查目錄有沒有,需不需要我自己去建立?但這個微小的事情又經常能讓程式報錯,每次自己去建立的話也覺得這些程式碼是冗餘的,影響程式核心業務閱讀性最終我在專案中使用了spr

idea建立Gradle專案無法自動生成src目錄

1.在用idea建立好自己的專案時,發現目錄結構如下: 2.這時會不會很苦惱為什麼沒有自動建立src目錄呢 這時因為新建的資料夾不是Source Dir,所以需要自己在gradle裡面新增一個Tas

部落自動生成目錄

部落格園自動生成目錄 頁首自動生成目錄 在部落格園後臺管理頁面找到設定, 找到頁尾HTML程式碼,複製自動生成目錄的js程式碼,儲存即可 生成三級目錄程式碼 <script language="javascript" type="text/javascript"> //生成目

Python自動提取生成部落年度報告

## 小狼的世界 的部落格園年度報告 Hi 小狼的世界 你在部落格園已經發表了**373**篇文章 2020年你一共寫了**24**篇文章 你在部落格園中的文章已經獲得了**2525064**次閱讀 **460**評論以及**208**次推薦 你閱讀量最高的一篇文章是 **Crontab的格式**,共有