前提

• 部落格側邊欄公告開通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>
 

到這裡就完成了，重新整理部落格文章，看到如下目錄；