利用JS生成博文目录及CSS定制博客

本文实例为大家介绍了利用JS生成博文目录及CSS定制博客的方法，分享给大家供大家参考，具体内容如下
1.JS代码
想要生成目录，许多都说需要JS修改权限，那个这里就直接进入设置页面，找到下方的联系邮箱直接发去就行了，工作人员回复的还是很快的。
拿到权限之后，下面就是将编（搜）写（寻）的JS代码放在页脚HTML代码的方框内，然后点击保存就可以了。要注意目录的生成是几级标题，这一点可是很重要的。JS代码如下，基本没有变化，拷贝了原作者的写法，可以生成二级目录，分别为h2和h3，这点需要注意。
综合来说，这个目录有以下几点的特点，这些也都可以在本文中看到（二级目录本博文没有使用）。
1）. 可以在博文首部生成两级目录
2）. 每个一级目录上方有一个回到顶部的链接
JS代码如下。

<script language="javascript" type="text/javascript">// 生成两级目录索引列表function GenerateContentList（）{ var mainContent = $（"#cnblogs_post_body"）; var h2_list = $（"#cnblogs_post_body h2"）;  //如果你的章节标题不是h2,只需要将这里的h2换掉即可 if（mainContent.length < 1）return;if（h2_list.length>0） {var content = "<a name="_labelTop"></a>";content += "<div id="navCategory">";content += "<p style="font-size:18px"><b>目录</b></p>";content += "<ul>";for（var i=0; i<h2_list.length; i++）{ var go_to_top = "<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label" + i + ""></a></div>"; $（h2_list[i]）.before（go_to_top）;var h3_list = $（h2_list[i]）.nextAll（"h3"）; var li3_content = ""; for（var j=0; j<h3_list.length; j++） {var tmp = $（h3_list[j]）.prevAll（"h2"）.first（）;if（！tmp.is（h2_list[i]）） break;var li3_anchor = "<a name="_label" + i + "_" + j + ""></a>";$（h3_list[j]）.before（li3_anchor）;li3_content += "<li><a href="#_label" + i + "_" + j + "">" + $（h3_list[j]）.text（） + "</a></li>"; }var li2_content = ""; if（li3_content.length > 0）li2_content = "<li><a href="#_label" + i + "">" + $（h2_list[i]）.text（） + "</a><ul>" + li3_content + "</ul></li>"; elseli2_content = "<li><a href="#_label" + i + "">" + $（h2_list[i]）.text（） + "</a></li>"; content += li2_content;}if（$（"#cnblogs_post_body"）.length ！= 0 ）{ $（$（"#cnblogs_post_body"）[0]）.prepend（content）;} } }GenerateContentList（）;</script>

2. 一级标题CSS格式
我在观察zzq同学的一些博文里面的一级标题有一个浅灰色的背景，觉得添加之后看起来很不错。在这里就借用一下该图片作为一级标题的背景，图片和CSS的说明如下。

#cnblogs_post_body h2 { background-repeat: no-repeat; background-image: url（"http://xxxx"）;}

以上就是本文的详细内容，希望对大家的学习有所帮助。