给博客添加一个的目录
平时都用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文档,如果代码有问题,还请帮忙指出。