參考鏈接：
http://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655
http://www.cnblogs.com/zzqcn/p/4657124.html
http://www.cnblogs.com/jiangz/p/3734968.html
作業部落的cmd
第一種：在正文上方直接添加目錄
1. 申請開通js權限
默認是不支持，需要打開博客園后台，進入“設置”標簽頁，點擊“申請開通js權限”，並注明用途
如果想加快申請速度，也可以再向官方發個郵件（郵箱是contact@cnblogs.com），郵件也需要注明用途，快的話1小時就能搞定了
2. 添加js腳本到“頁腳Html代碼”
打開博客園后台，進入“設置”標簽頁，在最下面的“頁腳Html代碼”對應的編輯框粘貼下面的js代碼，然后點“保存”按鈕保存。
（如果沒有開通js權限，此處無法添加）
<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 += '<div id="navCategory" style="color:#152e97;">'; content += '<p style="font-size:18px;"><b>目錄</b></p>'; content += '<ul>'; for(var i=0; i<h2_list.length; i++) { var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到頂部</a><a name="_label' + i + '"></a></div>'; $(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 + '">' + $(h3_list[j]).text() + '</a></li>'; } var li2_content = ''; if(li3_content.length > 0) li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; else li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; content += li2_content; } content += '</ul>'; content += '</div><p> </p>'; content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>'; if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } } GenerateContentList(); </script>3. 按格式寫文章
在寫新博文的時候，注意按照你js腳本里設定的格式來划分章節（這里只設定了h2,h3，對應普通編輯器中的二級標題和三級標題，對應markdown中的##和###）。當然，以前發布的文章如果有h2,h3，也會自動生成目錄索引。
效果如下：
第二種：在文章右上角添加目錄導航
1. 申請開通js權限
同上
2. 添加css代碼到“頁面定制CSS代碼”
/*生成博客目錄的CSS*/
#uprightsideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*將div的位置固定到距離top:50px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/ top:50px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:#ffffff; } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:108px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents dt{ margin-top:5px; margin-left:5px; } #sideBarContents dd, dt { cursor: pointer; } #sideBarContents dd:hover, dt:hover { color:#A7995A; } #sideBarContents dd{ margin-left:20px; }3. 添加js腳本到“頁首Html代碼”
<script type="text/javascript"> /* 功能：生成博客目錄的JS工具 測試：IE8，火狐，google測試通過 孤傲蒼狼 2014-5-11 */ var BlogDirectory = { /* 獲取元素位置，距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top） */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top:topPosition, left:leftPosition}; }, /* 獲取滾動條當前位置 */ getScrollBarPosition:function () { var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移動滾動條，finalPos 為目的位置，internal 為移動速度 */ moveScrollBar:function(finalpos, interval) { //若不支持此方法，則退出 if(!window.scrollTo) { return false; } //窗體滾動時，禁用鼠標滾輪 window.onmousewheel = function(){ return false; }; //清除計時 if (document.body.movement) { clearTimeout(document.body.movement); } var currentpos =BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 var dist = 0; if (currentpos == finalpos) {//到達預定位置，則解禁鼠標滾輪，並退出 window.onmousewheel = function(){ return true; } return true; } if (currentpos < finalpos) {//未到達，則計算下一步所要移動的距離 dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; } var scrTop = BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 window.scrollTo(0, currentpos);//移動窗口 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，則解禁鼠標滾輪，並退出 { window.onmousewheel = function(){ return true; } return true; } //進行下一步移動 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode:function (text){ var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; }, /* 創建博客目錄， id表示包含博文正文的 div 容器的 id， mt 和 st 分別表示主標題和次級標題的標簽名稱（如 H2、H3，大寫或小寫都可以！）， interval 表示移動的速度 */ createBlogDirectory:function (id, mt, st, interval){ //獲取博文正文div容器 var elem = document.getElementById(id); if(!elem) return false; //獲取div中所有元素結點 var nodes = elem.getElementsByTagName("*"); //創建博客目錄的div容器 var divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); var divSideBarTab = document.createElement('DIV'); divSideBarTab.setAttribute('id', 'sideBarTab'); divSideBar.appendChild(divSideBarTab); var h2 = document.createElement('H2'); divSideBarTab.appendChild(h2); var txt = document.createTextNode('目錄導航'); h2.appendChild(txt); var divSideBarContents = document.createElement('DIV'); divSideBarContents.style.display = 'none'; divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //創建自定義列表 var dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); var num = 0;//統計找到的mt和st mt = mt.toUpperCase();//轉化成大寫 st = st.toUpperCase();//轉化成大寫 //遍歷所有元素結點 for(var i=0; i<nodes.length; i++) { if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) { //獲取標題文本 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的內容可能有HTML標簽，所以用正則表達式去除HTML的標簽 nodetext = nodetext.replace(/ /ig, "");//替換掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入錨 nodes[i].setAttribute("id", "blogTitle" + num); var item; switch(nodes[i].nodeName) { case mt: //若為主標題 item = document.createElement("dt"); break; case st: //若為子標題 item = document.createElement("dd"); break; } //創建錨鏈接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); item.setAttribute("name", num); item.onclick = function(){ //添加鼠標點擊觸發函數 var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //將自定義表項加入自定義列表中 dlist.appendChild(item); num++; } } if(num == 0) return false; /*鼠標進入時的事件處理*/ divSideBarTab.onmouseenter = function(){ divSideBarContents.style.display = 'block'; } /*鼠標離開時的事件處理*/ divSideBar.onmouseleave = function() { divSideBarContents.style.display = 'none'; } document.body.appendChild(divSideBar); } }; window.onload=function(){ /*頁面加載完成之后生成博客目錄*/ BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); } </script>4. 按格式寫文章
同上
效果如下：
分類:
工具