部落格園文章新增目錄
阿新 • • 發佈:2020-07-11
前提
- 部落格側邊欄公告開通js支援,按照說明操作即可;
步驟一
頁面定製 CSS 程式碼中貼上如下程式碼,目的是修改生成的html的樣式
#custom-content ul{ padding-left:8px; } #custom-content>ul{ padding-left:0; font-size:12px; } #custom-content{ background:white; padding:10px; position:sticky; top:0; } #custom-content ul a{ font-size:13px; white-space:nowrap; display:block; overflow:hidden; width:240px; text-overflow:ellipsis; position:relative; padding-left:14px; } #custom-content ul li a:before{ position:absolute; left:4px; top:50%; margin-top:-2px; background-color: black; border-radius: 50%; content:''; width:4px; height: 4px; } #custom-content>ul>li>a:before{ position:absolute; width: 6px; height: 6px; top:50%; margin-top:-3px; background-color: black; border-radius: 50%; content:''; left:2px; }
步驟二
部落格側邊欄公告(支援HTML程式碼) (支援 JS 程式碼)貼上如下程式碼:
<script> /** * 獲取 #cnblogs_post_body 元素下的標題元素 * 返回標題的陣列 * @returns [{tagName:'H1',text:'title',id:'title'},...] */ function getHeadsFromPost() { var c = document.getElementById('cnblogs_post_body').children; var data = []; for (var i = 0; i < c.length; i++) { if (/h\d/i.test(c[i].tagName)) { data.push({ tagName: c[i].tagName, text: c[i].innerText, id: c[i].id }); } } return data; } /** * 將標題的陣列轉換成樹的結構 */ function arr2Tree(arr) { var tree = []; tree.pushlast = function (n) { if (this[this.length - 1].children) { this[this.length - 1].children.push(n); } else { this[this.length - 1].children = [n]; } } tree.empty = function () { return this.length === 0; } tree.last = function () { return this[this.length - 1]; } arr.forEach(head => { if (tree.empty() || head.tagName <= tree.last().tagName) { tree.push(head); } else { tree.pushlast(head) } }) tree.forEach(head => { if (head.children) head.children = arr2Tree(head.children) }); return tree; } /** * 根據樹的結構生成HTML */ function createHTML(data) { function head2li(head) { var html = `<li><a href='#${head.id}'>${head.text}</a></li>`; if (head.children) { html += arr2html(head.children); } return html; } function arr2html(arr) { return `<ul>${arr.map(head2li).join('')}</ul>`; } return arr2html(data); } /** * 插入HTML */ function insert2PostBody(contenthtml) { var content = document.createElement('div'); content.id = 'custom-content'; contenthtml ='<div style="font-size: 16px; color: black; transform: translate(-2px ,-2px);">目錄</div>'+contenthtml content.innerHTML = contenthtml; document.getElementById('sideBarMain').prepend(content); } /** * 自動生成目錄 */ function createContent() { var rawdata = getHeadsFromPost(); var treedata = arr2Tree(rawdata); var contenthtml = createHTML(treedata); insert2PostBody(contenthtml); } createContent(); </script>
到這裡就完成了,重新整理部落格文章,看到如下目錄;