给博客添加一个的目录

平时都用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文档，如果代码有问题，还请帮忙指出。