给博客添加一个的目录

平时都用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;
}

把目录添加到博客中

为了添加代码到博客中，需要先发邮件至contact@cnblogs.com申请js权限。然后，把上面的代码放到博客"设置"中的对应位置。

设置CSS代码

设置javascript代码

运行效果

配置好之后，打开博客就可以看到新生成的标题目录了。

结束

通过简单的js、css代码就添加了一个目录，浏览博客就可以更加方便了。

Ps：本人工作后就基本没有碰过js、css了，写这个代码的时候也是一直参考JQuery文档，如果代码有问题，还请帮忙指出。