博客園隨筆如何自動生成目錄（原理：頁腳js函數且執行）
博客園隨筆如何自動生成目錄（原理：頁腳js函數且執行）
1、總結
一句話總結：用的是jquery的dom操做知識，主要操做就是在標題那裏添加錨點，而後在目錄那裏連接到錨點
一、如何在標題前面添加錨點？
用before方法javascript
30 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; //添加錨點 31 $(h3_list[j]).before(li3_anchor);
二、如何在目錄那裏連接到錨點？
a標籤的href屬性到錨點a標籤的name屬性html
32 li3_content += '<li><a href="#_label' + i + '_' + j + '">' 33 + $(h3_list[j]).text() + '</a></li>'; //連接到錨點
三、將標題插入到開頭用的什麼方法？
prepend內部以前插入方法java
99 var title_h1 = $('#cnblogs_post_body h1');//將標題信息插入到開頭 100 $(mainContent[0]).prepend(title_h1[0]);
實現原理：在頁腳添加了一個js函數，而後調用執行，用了不少類選擇器和dom裏面的知識， 裏面有jqueryjquery
2、讓博客園博客自動生成章節目錄索引
對於比較長的文章，有一個好的目錄索引是頗有必要的，可讓讀者比較清楚地瞭解文章內容和層次。然而，目前（2015.7）博客園不像csdn博客那樣，會對發佈的文章自動生成目錄索引。不過，一些網友經過博客園後臺提供的一些自定義功能，本身寫腳本實現了這一功能。我用的腳本主要就是參考@薰衣草的旋律 的，文章地址是：http://www.cnblogs.com/wangqiguo/p/4355032.html。dom
原做者的腳本只支持1級目錄，我改了兩級：第1級是h2，第2級是h3。還添加了一些小玩意，好比討論qq羣號。效果以下圖所示：函數
添加功能的具體步驟是：post
- 確保本身的博客園後臺支持js
這個默認是不支持，須要向官方發個郵件申請開通（郵箱是contact@cnblogs.com），我簡單寫了封郵件，1小時就回復了，郵件內容我只寫了兩個字：如題。。。。 - 到後臺加入腳本
打開博客園後臺，進入「設置」標籤頁，在最下面的「頁腳Html代碼」對應的編輯框粘貼你的js代碼，而後點「保存」按鈕保存。 - 按格式寫文章
在寫新博文的時候，注意按照你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> </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>
【參考】@薰衣草的旋律： http://www.cnblogs.com/wangqiguo/p/4355032.htmlspa
參考：code
讓博客園博客自動生成章節目錄索引 - 趙子清 - 博客園
https://www.cnblogs.com/zzqcn/p/4657124.html
3、本身的目錄
修改了一下上面的代碼
- 優化了一下格式，
- 而且功能修改成在有h2的時候目錄結構爲h2和h3，沒有h2的時候目錄結構爲h3和h4，
- 也把標題放到了目錄以前
- 也增長了一些代碼註釋
1 <!-- 自動生成目錄 --> 2 <script language="javascript" type="text/javascript"> 3 // 生成目錄索引列表 4 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html 5 // modified by: zzq 6 // ref: https://www.cnblogs.com/zzqcn/p/4657124.html 7 // modified by: fry 8 function GenerateContentList() { 9 var mainContent = $('#cnblogs_post_body'); 10 var h2_list = $('#cnblogs_post_body h2');//若是你的章節標題不是h2,只須要將這裏的h2換掉便可 11 12 if (mainContent.length < 1) 13 return; 14 15 if (h2_list.length > 0) { 16 var content = '<a name="_labelTop"></a>'; 17 content += '<div id="navCategory">'; 18 content += '<p ><h2>目錄</h2></p>'; 19 content += '<ul>'; 20 for ( var i = 0; i < h2_list.length; i++) { 21 var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>'; //在h2上添加回到頂部 22 $(h2_list[i]).before(go_to_top); 23 24 var h3_list = $(h2_list[i]).nextAll("h3"); 25 var li3_content = ''; 26 for ( var j = 0; j < h3_list.length; j++) { 27 var tmp = $(h3_list[j]).prevAll('h2').first(); //找h3的所屬父親h2 28 if (!tmp.is(h2_list[i])) //若是h3不是當前這個h2的孩子 29 break; 30 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>'; //添加錨點 31 $(h3_list[j]).before(li3_anchor); 32 li3_content += '<li><a href="#_label' + i + '_' + j + '">' 33 + $(h3_list[j]).text() + '</a></li>'; //連接到錨點 34 } 35 36 var li2_content = ''; 37 if (li3_content.length > 0) //若是當前h2有h3,那麼h2和h3的內容都加到目錄 38 li2_content = '<li><a href="#_label' + i + '">' 39 + $(h2_list[i]).text() + '</a><ul>' + li3_content 40 + '</ul></li>'; 41 else 42 li2_content = '<li><a href="#_label' + i + '">' 43 + $(h2_list[i]).text() + '</a></li>'; 44 content += li2_content; 45 } 46 content += '</ul>'; 47 content += '</div><p> </p>'; 48 /* content += '<p style="font-size:18px"><b>正文</b></p>'; */ 49 if ($('#cnblogs_post_body').length != 0) { 50 $($('#cnblogs_post_body')[0]).prepend(content); 51 } 52 } else { //當頁面沒有h2標籤而有h3標籤的時候：就去檢索h3和h4 53 var h3_list = $('#cnblogs_post_body h3'); //獲取h3 54 if (h3_list.length > 0) { 55 var content = '<a name="_labelTop"></a>'; 56 content += '<div id="navCategory">'; 57 content += '<p ><h2>自動生成的目錄</h2></p>'; 58 content += '<ul>'; 59 for ( var i = 0; i < h3_list.length; i++) { 60 var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到頂部</a><a name="_label' + i + '"></a></div>'; 61 $(h3_list[i]).before(go_to_top); //在每一個h3以前添加回到頂部 62 63 var h4_list = $(h3_list[i]).nextAll("h4"); //獲取每一個h3下面的h4 64 var li4_content = ''; 65 for ( var j = 0; j < h4_list.length; j++) { 66 var tmp = $(h4_list[j]).prevAll('h3').first(); 67 if (!tmp.is(h3_list[i])) 68 break; 69 var li4_anchor = '<a name="_label' + i + '_' + j + '"></a>'; //添加錨點 70 $(h4_list[j]).before(li4_anchor); 71 li4_content += '<li><a href="#_label' + i + '_' + j + '">' 72 + $(h4_list[j]).text() + '</a></li>'; //連接到錨點 73 } 74 75 var li3_content = ''; 76 if (li4_content.length > 0) 77 li3_content = '<li><a href="#_label' + i + '">' 78 + $(h3_list[i]).text() + '</a><ul>' 79 + li4_content + '</ul></li>'; 80 else 81 li3_content = '<li><a href="#_label' + i + '">' 82 + $(h3_list[i]).text() + '</a></li>'; 83 content += li3_content; 84 } 85 content += '</ul>'; 86 content += '</div><p> </p>'; 87 /* content += '<p style="font-size:18px"><b>正文</b></p>'; */ 88 if ($('#cnblogs_post_body').length != 0) { 89 $($('#cnblogs_post_body')[0]).prepend(content); 90 } 91 92 } 93 94 } 95 96 var qqinfo = '<p style="text-align:right;color:navy;font-size:12px">討論QQ羣：********</p>'; 97 $(mainContent[0]).prepend(qqinfo); 98 99 var title_h1 = $('#cnblogs_post_body h1');//將標題信息插入到開頭 100 $(mainContent[0]).prepend(title_h1[0]); 101 } 102 103 GenerateContentList();//運行這個js函數 104 </script>
相關文章
- 1. 博客園文章自動生成導航目錄
- 2. 自動生成博客目錄
- 3. 博客自動生成目錄
- 4. 博客園美化博客隨筆目錄
- 5. 如何爲博客園添加目錄
- 6. 博客園首頁新隨筆聯繫訂閱管理 隨筆
- 7. 博客園文章版權聲明(js自動生成)
- 8. word如何自動生成目錄
- 9. 博客園 中 運行js
- 10. js 如何重複而且延時執行函數
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • Eclipse 生成jar包 - Eclipse 教程
- • ☆技術問答集錦（13）Java Instrument原理
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 博客園文章自動生成導航目錄
- 2. 自動生成博客目錄
- 3. 博客自動生成目錄
- 4. 博客園美化博客隨筆目錄
- 5. 如何爲博客園添加目錄
- 6. 博客園首頁新隨筆聯繫訂閱管理 隨筆
- 7. 博客園文章版權聲明(js自動生成)
- 8. word如何自動生成目錄
- 9. 博客園 中 運行js
- 10. js 如何重複而且延時執行函數