博客园文章添加目录

前提

• 博客侧边栏公告开通js支持，按照说明操作即可；

步骤一

页面定制 CSS 代码中粘贴如下代码，目的是修改生成的html的样式

.custom-content_xxxx ul{
    padding-left:8px;
    list-style:none;
}
.custom-content_xxxx li{
   list-style:none;
}
.custom-content_xxxx>ul{
    padding-left:6px;
    font-size:12px;
    margin-top:10px;
}


.custom-content_xxxx{
    background:white;
    position:sticky;
    top:0;
}

.custom-content_xxxx ul a{
    font-size:13px;
    white-space:nowrap;
    display:block;
    overflow:hidden;
    240px;
    text-overflow:ellipsis;
    position:relative;
    padding-left:14px;
    color:#777;
}
.custom-content_xxxx ul li  a:before{
    position:absolute;
    left:4px;
    top:50%;
    margin-top:-2px;
    background-color: #777;
    border-radius: 50%;
    content:'';
    4px;
    height: 4px;
}

.custom-content_xxxx>ul>li>a:before{
    position:absolute;
     6px;
    height: 6px;
    top:50%;
    margin-top:-3px;
    background-color: #777;
    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 (/hd/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.classList.add('custom-content_xxxx');

    contenthtml ='<div><div   class="catListTitle">目录</div></div>'+contenthtml 
    content.innerHTML = contenthtml;
    document.getElementById('sideBarMain').append(content);
}

/**
 * 自动生成目录
 */
function createContent() {
    var rawdata = getHeadsFromPost();
    var treedata = arr2Tree(rawdata);
    var contenthtml = createHTML(treedata);
    insert2PostBody(contenthtml);
}
createContent();
window.addEventListener('load',function(){
  let height = document.querySelector('#mainContent').getBoundingClientRect().height;
  document.querySelector('#sideBarMain').style.height = height+'px';
  
})
</script>

到这里就完成了，刷新博客文章，看到如下目录；

整理一下页面样式

#profile_block {
  padding: 10px 20px;
}
.catListTitle{
  padding: 6px 20px!important;
}
.catListTitle+ul li{
  padding: 7px 10px 7px 20px!important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size:13px;
}
#leftcontentcontainer{
  margin-top:-20px;
}
#sidebar_news{height:0;overflow:hidden;margin-bottom:0}
#sidebar_recentposts ul{
    max-height: 202px;
    overflow-y: auto;
}
#header{
  background-color: #2880AE;
}
body{
  background: none;

}
#blogTitle{
  display:none;
}