給博客添加一個的目錄

平時都用word中的"Blog post"來寫博客，然后Publish到博客園上。文章中的標題都是用Heading1-Heading4，所以在word中可以看到一個很清晰的標題目錄，瀏覽、跳轉起來很方便，如下圖。

所以，就想在博客中也加入一個類似的標題目錄，一是可以一眼看到博客的目錄結構，二是可以方便的進行跳轉。

生成目錄的javascript代碼

這段代碼主要是根據博客正文中的header來生成一個目錄結構，並且根據header的級別設置縮進。同時，為了避免目錄div遮擋到正文內容，還添加了一個可以隱藏目錄的div。

具體的可以參考注釋。

<script>
    function CreatePostNavigator(){
        // 目錄標題的div
        var navigatorTitleDiv = '<div id="navigatorTitleDiv">隱藏目錄</div>';
    
        // 目錄所有內容的div
        var navigatorDivContent = '<div id="navigatorDiv">';
        
        if($("#cnblogs_post_body :header").length == 0){
            return;
        }
    
        $.each($("#cnblogs_post_body :header"), function(i, val){      
              // 查找所有的header（h1-h4），並生成header條目，並添加屬性class=“dt_h?”
              var headerTagName = $(val)[0].tagName.toLowerCase();
              var navigatorItem = '<dt class="dt_'+headerTagName+'"><a href="#_nav_' + i + '">' + $(val).text() + '</a></dt>';
              // 把header條目加入navigatorDiv
              navigatorDivContent += navigatorItem;
              
              // 給頁面上每個header元素之前添加一個跳轉標簽
              var headerLabel = '<a name="_nav_' + i + '" style="padding:0px"></a>';
              $(val).prepend(headerLabel);
          }); 
          
         navigatorDivContent += '</div>';
        
         $('#cnblogs_post_body').append(navigatorDivContent);
         $('#cnblogs_post_body').append(navigatorTitleDiv);
         
         // 給目錄標題div添加toggle事件
         $("#navigatorTitleDiv").click(function(){
                $("#navigatorDiv").toggle(200, function(){
                    var title = $("#navigatorTitleDiv").text() == "隱藏目錄"?"文章目錄":"隱藏目錄";
                    $("#navigatorTitleDiv").text(title);
                });
         });
         
         
         var headerList = ["h1", "h2", "h3", "h4"];
         var headerListLen = headerList.length;
         // 遍歷所有的header，然后給小一級的header設置縮進
         for(var i = 0; i < headerListLen; i++){
                if(i < (headerListLen-1) && $(".dt_"+headerList[i]).length > 0){
                    for(var j=headerListLen-1; j > i; j--)
                    $(".dt_"+headerList[j]).css({"margin-left": (i+1)*10+"px"});
                 }
         }
         
    }
    
    CreatePostNavigator();
</script>

目錄的CSS代碼

以下是前面目錄的CSS代碼，只是進行了簡單的設置。

#navigatorTitleDiv
{
    padding: 3px;
    position: fixed;
    top:244px; 
    right:304px;
    font-weight:bold;
    cursor:pointer;
    background-color: antiquewhite;
}

#navigatorDiv 
{
    border-style:double;
    padding: 10px;
    padding-top:30px;
    position: fixed;
    top:240px; 
    right:300px;
    background-color: antiquewhite;
}

把目錄添加到博客中

為了添加代碼到博客中，需要先發郵件至[e-mail]申請js權限。然后，把上面的代碼放到博客"設置"中的對應位置。

設置CSS代碼

設置javascript代碼

運行效果

配置好之后，打開博客就可以看到新生成的標題目錄了。

結束

通過簡單的js、css代碼就添加了一個目錄，瀏覽博客就可以更加方便了。

Ps：本人工作后就基本沒有碰過js、css了，寫這個代碼的時候也是一直參考JQuery文檔，如果代碼有問題，還請幫忙指出。