給部落格園新增目錄

2022-07-24 04:21:12 字數 852 閱讀 6885

目錄如上所示

將所生成的部落格html中的標題元素(h1~h6)檢出

根據目錄等級生成目錄樹

根據目錄樹生成html**

插入到適當位置

/**

* 獲取 #cnblogs_post_body 元素下的標題元素

* 返回標題的陣列

* @returns [,...]

*/function getheadsfrompost() );}}

return data;

}/**

* 將標題的陣列轉換成樹的結構

*/function arr2tree(arr) else

}tree.empty = function ()

tree.last = function ()

arr.foreach(head => else

})tree.foreach(head => );

return tree;

}/**

* 根據樹的結構生成html

*/function createhtml(data)

`; if (head.children)

return html;

}function arr2html(arr)

return arr2html(data);

}/**

* 插入html

*/function insert2postbody(contenthtml)

/** * 自動生成目錄

*/function createcontent()

createcontent();

部落格園新增目錄生成

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

部落格園 在博文中新增目錄

生成目錄索引列表 ref modified by zzq function generatecontentlist var maincontent cnblogs post body var h1 list cnblogs post body h1 如果你的章節標題不是h2,只需要將這裡的h2換掉即...

部落格園美化部落格隨筆目錄

基於孤傲蒼狼在2014 5 11寫的目錄 基礎上進行改進 生成部落格目錄的css 自定製乙個css3動畫 keyframes pulse 75 調整目錄框的位置 uprightsidebar sidebar sidebartab 展開後內部內容格式 sidebarcontents sidebarco...