JS自動生成博文目錄 針對部落格園BOOK面板

最近看到許多博主的頁面特別漂亮，都有目錄導航，方便大家閱讀瀏覽。於是一搜尋，發現已經有很多相應的教程《js自動生成博文目錄》。

但是沒有乙個針對book**的，比較喜歡這個**，那就自己動手實現乙個咯。

具體**就不做過多介紹了，其他博主已經介紹的很仔細咯。      

<

div 
id="sidebar"
>
<
div 
id="sidebar_title"
>文章目錄
div>
<
div 
id="siderbar_contents"
style
="display:none"
>
div>
div>

#sidebar

#sidebar_title
#siderbar_contents
#siderbar_contents a
#siderbar_contents a:hover
#cnblogs_post_body h2,h3

var sidebar = document.getelementbyid('sidebar');

var sidebar_title = document.getelementbyid('sidebar_title');
var siderbar_contents = document.getelementbyid('siderbar_contents');
sidebar.onmouseover = function
() sidebar.onmouseout = function
()var h_list = document.queryselectorall('#cnblogs_post_body h2,h3,h4,h5');          
var str='';       
if(h_list.length==3)
for(var i=0; i< h_list.length;i++)
if(h_list[i].nodename.tolocalelowercase()=='h2')
else
//對原先的h標籤，增加id值
h_list[i].id =i;
}str+='';
siderbar_contents.innerhtml=str;

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

回到頂部 近來寫了一些比較長的部落格，閱讀起來很不方便，看園子裡其他園友的部落格有些有目錄，就想給自己的部落格增加目錄結構，增加文章可讀性 回到頂部 回到頂部 通過點選目錄索引，跳轉到對應的章節，並可回到目錄頂端 回到頂部 回到頂部 確保自己的後台支援js 這個預設是不支援，需要向官方申請，在部落格...

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

回到頂部 通過點選目錄索引，跳轉到對應的章節，並可回到目錄頂端 回到頂部 確保自己的後台支援js 這個預設是不支援，需要向官方申請，在部落格設定中點選申請js許可權進行申請 2 到後台加入指令碼 開啟後台，進入 設定 標籤頁，在最下面的 頁尾html 對應的編輯框貼上你的js 然後點 儲存 按鈕儲存...

部落格園新增目錄生成

以下兩種方法配合食用更佳 部落格側邊欄公告新增 也可以新增到頁尾html 注意 目錄生成標題對應markdown中的 和 其實也不一定新增在右上角，位置和顏色還有字型大小都可以隨自己喜好改的 頁面定製css 新增 生成部落格目錄的css uprightsidebar sidebartab sideb...