爲博客園博文添加目錄的兩種方法

時間 2019-11-16

原文原文鏈接

準備工做：

確認你的博客有js權限，能夠設計界面風格。這個須要跟管理員申請。

方法一：在正文上方直接添加目錄

1.把下面的腳本添加到博客後臺設置裏的「頁腳html代碼」裏頭：

 1 <script language="javascript" type="text/javascript">
 2 // 生成目錄索引列表
 3 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
 4 // modified by: zzq
 5 function GenerateContentList()
 6 {
 7     var mainContent = $('#cnblogs_post_body');
 8     var h2_list = $('#cnblogs_post_body h2');//若是你的章節標題不是h2,只須要將這裏的h2換掉便可
 9 
10     if(mainContent.length < 1)
11         return;
12  
13     if(h2_list.length>0)
14     {
15         var content = '<a name="_labelTop"></a>';
16         content += '<div id="navCategory" style="color:#152e97;">';
17         content += '<p style="font-size:18px;"><b>目錄</b></p>';
18         content += '<ul>';
19         for(var i=0; i<h2_list.length; i++)
20         {
21             var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">Top</a><a name="_label' + i + '"></a></div>';
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             {
28                 var tmp = $(h3_list[j]).prevAll('h2').first();
29                 if(!tmp.is(h2_list[i]))
30                     break;
31                 var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
32                 $(h3_list[j]).before(li3_anchor);
33                 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
34             }
35             
36             var li2_content = '';
37             if(li3_content.length > 0)
38                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
39             else
40                 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
41             content += li2_content;
42         }
43         content += '</ul>';
44         content += '</div><p>&nbsp;</p>';
45         content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
46         if($('#cnblogs_post_body').length != 0 )
47         {
48             $($('#cnblogs_post_body')[0]).prepend(content);
49         }
50     }   
51 }
52 
53 GenerateContentList();
54 </script>

2.備註：

這個腳本支持h2，h3兩種標題，寫博文時按照h二、h3格式寫文字，腳本會生效，幫你創建目錄，並在博文正上方顯示。javascript

方法二：在文章右上角添加目錄導航

1. 添加css代碼到「頁面定製CSS代碼」

 1 /*生成博客目錄的CSS*/
 2 #uprightsideBar{
 3     font-size:12px;
 4     font-family:Arial, Helvetica, sans-serif;
 5     text-align:left;
 6     position:fixed;/*將div的位置固定到距離top:50px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/
 7     top:50px;
 8     right:0px;
 9     width: auto;
10     height: auto; 
11 }
12 #sideBarTab{
13     float:left;
14     width:30px; 
15     border:1px solid #e5e5e5;
16     border-right:none;
17     text-align:center;
18     background:#ffffff;
19 }
20 
21 #sideBarContents{
22     float:left;
23     overflow:auto; 
24     overflow-x:hidden;!important;
25     width:200px;
26     min-height:108px;
27     max-height:460px;
28     border:1px solid #e5e5e5;
29     border-right:none; 
30     background:#ffffff;
31 }
32 #sideBarContents dl{
33     margin:0;
34     padding:0;
35 }
36 
37 #sideBarContents dt{
38     margin-top:5px;
39     margin-left:5px;
40 }
41 
42 #sideBarContents dd, dt {
43     cursor: pointer;
44 }
45 
46 #sideBarContents dd:hover, dt:hover {
47     color:#A7995A;
48 }
49 #sideBarContents dd{
50     margin-left:20px;
51 }

2. 添加js腳本到「頁首Html代碼」

  1 <script type="text/javascript">
  2 /*
  3     功能：生成博客目錄的JS工具
  4     測試：IE8，火狐，google測試經過
  5     孤傲蒼狼
  6     2014-5-11
  7 */
  8 var BlogDirectory = {
  9     /*
 10         獲取元素位置，距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top）
 11     */
 12     getElementPosition:function (ele) {        
 13         var topPosition = 0;
 14         var leftPosition = 0;
 15         while (ele){              
 16             topPosition += ele.offsetTop;
 17             leftPosition += ele.offsetLeft;        
 18             ele = ele.offsetParent;     
 19         }  
 20         return {top:topPosition, left:leftPosition}; 
 21     },
 22 
 23     /*
 24     獲取滾動條當前位置
 25     */
 26     getScrollBarPosition:function () {
 27         var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
 28         return  scrollBarPosition;
 29     },
 30     
 31     /*
 32     移動滾動條，finalPos 爲目的位置，internal 爲移動速度
 33     */
 34     moveScrollBar:function(finalpos, interval) {
 35 
 36         //若不支持此方法，則退出
 37         if(!window.scrollTo) {
 38             return false;
 39         }
 40 
 41         //窗體滾動時，禁用鼠標滾輪
 42         window.onmousewheel = function(){
 43             return false;
 44         };
 45           
 46         //清除計時
 47         if (document.body.movement) { 
 48             clearTimeout(document.body.movement); 
 49         } 
 50 
 51         var currentpos =BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置
 52 
 53         var dist = 0; 
 54         if (currentpos == finalpos) {//到達預約位置，則解禁鼠標滾輪，並退出
 55             window.onmousewheel = function(){
 56                 return true;
 57             }
 58             return true; 
 59         } 
 60         if (currentpos < finalpos) {//未到達，則計算下一步所要移動的距離
 61             dist = Math.ceil((finalpos - currentpos)/10); 
 62             currentpos += dist; 
 63         } 
 64         if (currentpos > finalpos) { 
 65             dist = Math.ceil((currentpos - finalpos)/10); 
 66             currentpos -= dist; 
 67         }
 68         
 69         var scrTop = BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置
 70         window.scrollTo(0, currentpos);//移動窗口
 71         if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，則解禁鼠標滾輪，並退出
 72         {
 73             window.onmousewheel = function(){
 74                 return true;
 75             }
 76             return true;
 77         }
 78         
 79         //進行下一步移動
 80         var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 
 81         document.body.movement = setTimeout(repeat, interval); 
 82     },
 83     
 84     htmlDecode:function (text){
 85         var temp = document.createElement("div");
 86         temp.innerHTML = text;
 87         var output = temp.innerText || temp.textContent;
 88         temp = null;
 89         return output;
 90     },
 91 
 92     /*
 93     建立博客目錄，
 94     id表示包含博文正文的 div 容器的 id，
 95     mt 和 st 分別表示主標題和次級標題的標籤名稱（如 H二、H3，大寫或小寫均可以！），
 96     interval 表示移動的速度
 97     */
 98     createBlogDirectory:function (id, mt, st, interval){
 99          //獲取博文正文div容器
100         var elem = document.getElementById(id);
101         if(!elem) return false;
102         //獲取div中全部元素結點
103         var nodes = elem.getElementsByTagName("*");
104         //建立博客目錄的div容器
105         var divSideBar = document.createElement('DIV');
106         divSideBar.className = 'uprightsideBar';
107         divSideBar.setAttribute('id', 'uprightsideBar');
108         var divSideBarTab = document.createElement('DIV');
109         divSideBarTab.setAttribute('id', 'sideBarTab');
110         divSideBar.appendChild(divSideBarTab);
111         var h2 = document.createElement('H2');
112         divSideBarTab.appendChild(h2);
113         var txt = document.createTextNode('目錄導航');
114         h2.appendChild(txt);
115         var divSideBarContents = document.createElement('DIV');
116         divSideBarContents.style.display = 'none';
117         divSideBarContents.setAttribute('id', 'sideBarContents');
118         divSideBar.appendChild(divSideBarContents);
119         //建立自定義列表
120         var dlist = document.createElement("dl");
121         divSideBarContents.appendChild(dlist);
122         var num = 0;//統計找到的mt和st
123         mt = mt.toUpperCase();//轉化成大寫
124         st = st.toUpperCase();//轉化成大寫
125         //遍歷全部元素結點
126         for(var i=0; i<nodes.length; i++)
127         {
128             if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    
129             {
130                 //獲取標題文本
131                 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML裏面的內容可能有HTML標籤，因此用正則表達式去除HTML的標籤
132                 nodetext = nodetext.replace(/ /ig, "");//替換掉全部的 
133                 nodetext = BlogDirectory.htmlDecode(nodetext);
134                 //插入錨        
135                 nodes[i].setAttribute("id", "blogTitle" + num);
136                 var item;
137                 switch(nodes[i].nodeName)
138                 {
139                     case mt:    //若爲主標題 
140                         item = document.createElement("dt");
141                         break;
142                     case st:    //若爲子標題
143                         item = document.createElement("dd");
144                         break;
145                 }
146                 
147                 //建立錨連接
148                 var itemtext = document.createTextNode(nodetext);
149                 item.appendChild(itemtext);
150                 item.setAttribute("name", num);
151                 item.onclick = function(){        //添加鼠標點擊觸發函數
152                     var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
153                     if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
154                 };            
155                 
156                 //將自定義表項加入自定義列表中
157                 dlist.appendChild(item);
158                 num++;
159             }
160         }
161         
162         if(num == 0) return false; 
163         /*鼠標進入時的事件處理*/
164         divSideBarTab.onmouseenter = function(){
165             divSideBarContents.style.display = 'block';
166         }
167         /*鼠標離開時的事件處理*/
168         divSideBar.onmouseleave = function() {
169             divSideBarContents.style.display = 'none';
170         }
171 
172         document.body.appendChild(divSideBar);
173     }
174     
175 };
176 
177 window.onload=function(){
178     /*頁面加載完成以後生成博客目錄*/
179     BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
180 }
181 </script>