博客园美化记（一）
加微博关注
侧边栏公告代码
<!--微博关注-->
<html xmlns:wb="http://open.weibo.com/wb">
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
<wb:follow-button uid="2991975565" type="red_1" width="67" height="24" ></wb:follow-button>
添加GitHub链接
侧边栏公告代码
<!--Github链接-->
<a href="https://github.com/wonux" target="_blank">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="http://images.cnblogs.com/cnblogs_com/wonux/974364/o_o_github.png" >
</a>
添加目录
文章开始生成目录
生成三级目录
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
var jquery_h1_list = $('#cnblogs_post_body h1');
if (jquery_h1_list.length == 0) { return; }
if ($('#cnblogs_post_body').length == 0) { return; }
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory">';
content += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>';
// 一级目录 start
content += '<ul class="first_class_ul">';
for (var i = 0; i < jquery_h1_list.length; i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部(go to top)</a><a name="_label' + i + '"></a></div>';
$(jquery_h1_list[i]).before(go_to_top);
// 一级目录的一条
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';
var nextH1Index = i + 1;
if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
// 二级目录 start
if (jquery_h2_list.length > 0)
{
//li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
li_content += '<ul class="second_class_ul">';
}
for (var j = 0; j < jquery_h2_list.length; j++)
{
var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
$(jquery_h2_list[j]).before(go_to_top2);
// 二级目录的一条
li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';
var nextH2Index = j + 1;
var next;
if (nextH2Index == jquery_h2_list.length)
{
if (i + 1 == jquery_h1_list.length)
{
next = jquery_h1_list[0];
}
else
{
next = jquery_h1_list[i + 1];
}
}
else
{
next = jquery_h2_list[nextH2Index];
}
var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
// 三级目录 start
if (jquery_h3_list.length > 0)
{
li_content += '<ul class="third_class_ul">';
}
for (var k = 0; k < jquery_h3_list.length; k++)
{
var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
$(jquery_h3_list[k]).before(go_to_third_Content);
// 三级目录的一条
li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
}
if (jquery_h3_list.length > 0)
{
li_content += '</ul>';
}
li_content += '</li>';
// 三级目录 end
}
if (jquery_h2_list.length > 0)
{
li_content +='</ul>';
}
li_content +='</li>';
// 二级目录 end
content += li_content;
}
// 一级目录 end
content += '</ul>';
content += '</div>';
$($('#cnblogs_post_body')[0]).prepend(content);
}
GenerateContentList();
</script>
生成一级目录
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#cnblogs_post_body h3');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
if(jquery_h3_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<jquery_h3_list.length;i++)
{
var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
$(jquery_h3_list[i]).before(go_to_top);
var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
content += li_content;
}
content += '</ul>';
content += '</div>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>
参考：http://www.cnblogs.com/chinas/p/6088341.html
CSDN样式目录
<div class="fixedIndexs" style="position: fixed;bottom: 40px;display: none"></div>
<script language="javascript" type="text/javascript">
var fixedIndexs=$('.fixedIndexs');
var hs = $('#cnblogs_post_body h3');
function openorclose(a) {
$("#indexs").slideToggle("fast");
var text=$(a).text();
if(text=='[-]'){
$(a).text("[+]");
return;
}
$(a).text("[-]");
}
function createIndexs(){
var indexs_container=$('<div style="border:solid 1px #ccc; background:#eee;width:180px;padding:4px 10px;"></div>');
var indexs_controller=$('<p style="text-align:right;margin:0;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
indexs_container.append(indexs_controller).append(indexs);
$.each(hs,function(i,h){
$(h).before('<a name="index_'+i+'"></a>');
indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
});
if(hs.length!=0){
fixedIndexs.append(indexs_container);
//get home div right offset
fixedIndexs.css('right',$("#home").offset().left+32+'px');
}
}
createIndexs();
$(window).scroll(function(event){
//clear all active
$("#indexs li a").removeClass("active");
//set active
$.each(hs,function (i, h) {
var next_active_top;
i<(hs.length-1)?next_active_top=hs.eq(i+1).offset().top:hs.last().offset().top;
if($(h).offset().top<$(window).scrollTop()+30&&$(window).scrollTop()+30<next_active_top){
$("#active_"+i).addClass("active");
}
if(i+1==hs.length&&$(window).scrollTop()+30>hs.last().offset().top){
$("#active_"+i).addClass("active");
}
});
//auto display
if($(window).scrollTop()>$(window).height()){
fixedIndexs.show();
return;
}
fixedIndexs.hide();
});
$(window).resize(function (event) {
fixedIndexs.hide();
fixedIndexs.css('right',$("#home").offset().left+32+'px');
if($(window).scrollTop()>$(window).height()){
fixedIndexs.show();
}
})
</script>
参考：http://www.cnblogs.com/sakuraph/p/5814060.html#top
Wiznote样式目录
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/wonux/Wiz_marvin.nav.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/wonux/Wiz_marvin.nav.js"></script>
参考：http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html
✎﹏键落惊风雨，码成泣鬼神~~
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）