部落格園是沒有自帶目錄功能的，要實現如下的目錄功能，我們可以通過個性化定製的方式實現。

1. 申請JS許可權

部落格園支援自定義 HTML、CSS、JS 檔案，不過需要先向部落格園申請 JS 許可權。
【部落格園】->【設定】->【部落格設定】：

點選圖中地方即可申請 JS 許可權（由於這裡已經申請通過了，所以展示的是已開通）。

待許可權申請通過後，我們可以在頁面定製 CSS 程式碼、頁首 HTML 程式碼、頁尾 HTML 程式碼中編寫程式碼以實現個性化定製。

這裡官方建議在頁尾 HTML 程式碼新增程式碼，最好遵從這一建議，將 JS 程式碼放在其中。

2. 在頁尾 HTML 程式碼
   中新增如下程式碼：

<script language="javascript" type="text/javascript">

    /**
     * 生成部落格目錄
     */
    var BlogDirectory = {

        /**
         * 獲取元素位置
         * @param ele 元素
         * @returns {{top: number, left: number}} 距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top）
         */
        getElementPosition:function (ele) {
            var topPosition = 0;
            var leftPosition = 0;
            while (ele){
                topPosition += ele.offsetTop;
                leftPosition += ele.offsetLeft;
                ele = ele.offsetParent;
            }
            return {top: topPosition, left: leftPosition};
        },

        /**
         * 獲取滾動條當前位置
         * @returns {number} 滾動條當前位置
         */
        getScrollBarPosition:function () {
            var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
            return scrollBarPosition;
        },

        /**
         * 移動滾動條
         * @param finalpos 為目的位置
         * @param interval 為移動速度
         * @returns {boolean}
         */
        moveScrollBar:function(finalpos, interval) {

            // 若不支援此方法，則退出
            if(!window.scrollTo) {
                return false;
            }
            // 窗體滾動時，禁用滑鼠滾輪
            window.onmousewheel = function(){
                return false;
            };
            // 清除計時
            if (document.body.movement) {
                clearTimeout(document.body.movement);
            }
            // 獲取滾動條當前位置
            var currentpos = BlogDirectory.getScrollBarPosition();
            var dist = 0;
            // 到達預定位置，則解禁滑鼠滾輪，並退出
            if (currentpos == finalpos) {
                window.onmousewheel = function(){
                    return true;
                }
                return true;
            }
            // 未到達，則計算下一步所要移動的距離
            if (currentpos < finalpos) {
                dist = Math.ceil((finalpos - currentpos) / 10);
                currentpos += dist;
            }
            if (currentpos > finalpos) {
                dist = Math.ceil((currentpos - finalpos) / 10);
                currentpos -= dist;
            }
            // 獲取滾動條當前位置
            var scrTop = BlogDirectory.getScrollBarPosition();
            // 移動視窗
            window.scrollTo(0, currentpos);
            // 若已到底部，則解禁滑鼠滾輪，並退出
            if(BlogDirectory.getScrollBarPosition() == scrTop) {
                window.onmousewheel = function(){
                    return true;
                }
                return true;
            }
            // 進行下一步移動
            var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
            document.body.movement = setTimeout(repeat, interval);
        },

        htmlDecode:function (text){
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        },

        /**
         * 建立部落格目錄
         * @param id 表示包含博文正文的 div 容器的 id
         * @param title1 一級標題
         * @param title2 二級標題
         * @param title3 三級標題
         * @param title4 四級標題
         * @param title5 五級標題
         * @param title6 六級標題
         * @param interval 表示移動的速度
         * @returns {boolean}
         */
        createBlogDirectory:function (id, title1, title2, title3, title4, title5, title6, interval){
            // 獲取博文正文div容器
            var elem = document.getElementById(id);
            if(!elem) {
                return false
            }
            // 獲取div中所有元素結點
            var nodes = elem.getElementsByTagName("*");
            // 建立部落格目錄的div容器
            var divSideBar = document.createElement('DIV');
            divSideBar.className = 'uprightsideBar';
            divSideBar.setAttribute('id', 'uprightsideBar');
            var divSideBarTab = document.createElement('DIV');
            divSideBarTab.setAttribute('id', 'sideBarTab');
            divSideBar.appendChild(divSideBarTab);
            var h1 = document.createElement('H1');
            divSideBarTab.appendChild(h1);
            var txt = document.createTextNode('目錄導航');
            h1.appendChild(txt);
            var divSideBarContents = document.createElement('DIV');
            divSideBarContents.style.display = 'none';
            divSideBarContents.setAttribute('id', 'sideBarContents');
            divSideBar.appendChild(divSideBarContents);
            // 建立自定義列表
            var dlist = document.createElement("dl");
            divSideBarContents.appendChild(dlist);
            // 標識找到的標題
            var num = 0;
            // 轉化成大寫
            title1 = title1.toUpperCase();
            title2 = title2.toUpperCase();
            title3 = title3.toUpperCase();
            title4 = title4.toUpperCase();
            title5 = title5.toUpperCase();
            title6 = title6.toUpperCase();
            // 遍歷所有元素結點
            for(var i = 0; i < nodes.length; i++) {
                if(nodes[i].nodeName == title1 || nodes[i].nodeName == title2 || nodes[i].nodeName == title3 || nodes[i].nodeName == title4 || nodes[i].nodeName == title5 || nodes[i].nodeName == title6) {
                    // 獲取標題文字（innerHTML裡面的內容可能有HTML標籤，所以用正則表示式去除HTML的標籤）
                    var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");
                    // 替換掉所有的
                    nodetext = nodetext.replace(//ig, "");
                    nodetext = BlogDirectory.htmlDecode(nodetext);
                    // 插入錨
                    nodes[i].setAttribute("id", "blogTitle" + num);
                    var item;
                    var title;
                    switch(nodes[i].nodeName) {
                        //若為一級標題
                        case title1:
                        item = document.createElement("dt");
                        title = "title1";
                        break;
                        //若為二級標題
                        case title2:
                        item = document.createElement("dd");
                        title = "title2";
                        break;
                        //若為三級標題
                        case title3:
                        item = document.createElement("dd");
                        title = "title3";
                        break;
                        //若為四級標題
                        case title4:
                        item = document.createElement("dd");
                        title = "title4";
                        break;
                        //若為五級標題
                        case title5:
                        item = document.createElement("dd");
                        title = "title5";
                        break;
                        //若為六級標題
                        case title6:
                        item = document.createElement("dd");
                        title = "title6";
                        break;
                    }
                    // 建立錨鏈接
                    var itemtext = document.createTextNode(nodetext);
                    item.appendChild(itemtext);
                    item.setAttribute("name", num);
                    item.setAttribute("class", title);
                    // 新增滑鼠點選觸發函式
                    item.onclick = function() {
                        var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                        if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                    };
                    // 將自定義表項加入自定義列表中
                    dlist.appendChild(item);
                    num++;
                }
            }
            if(num == 0) {
                return false
            }
            // 滑鼠進入時的事件處理
            divSideBarTab.onmouseenter = function(){
                divSideBarContents.style.display = 'block';
            }
            // 滑鼠離開時的事件處理
            divSideBar.onmouseleave = function() {
                divSideBarContents.style.display = 'none';
            }
            document.body.appendChild(divSideBar);
        }
    };

    // 載入頁面
    window.onload = function() {
        // 頁面載入完成之後生成部落格目錄
        BlogDirectory.createBlogDirectory("cnblogs_post_body","h1","h2", "h3", "h4", "h5", "h6", 20);
    }

</script>
 

3. 在頁面定製 CSS 程式碼中新增如下程式碼：

/*生成部落格目錄*/

#uprightsideBar{
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: fixed; /*將div的位置固定到距離top:250px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/
    top: 376px;
    left: 0px; /*確定在左側還是右側*/
    width: auto;
    height: auto;
}

#sideBarTab {
    float: left;
    width: 40px;
    border: 4px solid #ED5736;
    border-left: none;
    text-align: center;
    background: #ffffff;
    font-size: 22px;
}

#sideBarContents{
    float: left;
    overflow: auto;
    overflow-x: hidden;!important;
    width: 300px;
    min-height: 100px;
    max-height: 500px;
    border: 1px solid #e5e5e5;
    border-left: none;
    background: #ffffff;
}


#sideBarContents dd, dt {
    cursor: pointer;
}

.title1:hover,
.title2:hover,
.title3:hover,
.title4:hover,
.title5:hover,
.title6:hover {
    color: #ED5736;
}

#sideBarContents dl{
    margin: 0;
    padding: 0;
}

.title1{
    margin-top: 5px;
    margin-left: 5px;
}

.title2{
    margin-left: 20px;
}

.title3{
    margin-left: 40px;
}

.title4{
    margin-left: 60px;
}

.title5{
    margin-left: 80px;
}

.title6{
    margin-left: 100px;
}
 

4. 點選儲存。

至此，就實現了自定義目錄，點選圖中的標題可以跳轉到內容中指定標題位置，可以方便部落格內容的查閱。