博客园自动生成目录
前言
页面定制
#cnblogs_post_body
{
color: black;
font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 15px;
}
#cnblogs_post_body h1 {
text-align:center;
background: #333366;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 23px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {
text-align:center;
background: #006699;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 20px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
博客侧边栏
<script type="text/javascript">
//以下是锚点JS
var a = $(document);
a.ready(function() {
var b = $('body'),
d = 'sideToolbar',
e = 'sideCatalog',
f = 'sideCatalog-catalog',
g = 'sideCatalogBtn',
h = 'sideToolbar-up',
i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
j = '',
k = 200,
l = 0,
m = 0,
n = 0,
//限制存在个数，如数量过多，则只显示h2，不显示h3
//o, p = 13,
o, p = 100,
q = true,
r = true,
s = b;
if(s.length === 0) {
return
};
b.append(i);
//指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
//o = s.find(':header');
o = $('#cnblogs_post_body').find(':header')
if(o.length > p) {
r = false;
var t = s.find('h2');
var u = s.find('h3');
if(t.length + u.length > p) {
q = false
}
};
o.each(function(t) {
var u = $(this),
v = u[0];
var title = u.text();
var text = u.text();
u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
//if (!u.attr('id')) {
// u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
//};
if(v.localName === 'h2') {
l++;
m = 0;
if(text.length > 14) text = text.substr(0, 20) + "...";
j += '<li><span>' + l + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
} else if(v.localName === 'h3') {
m++;
n = 0;
if(q) {
if(text.length > 12) text = text.substr(0, 16) + "...";
j += '<li class="h2Offset"><span>' + l + '.' + m + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
}
} else if(v.localName === 'h4') {
n++;
if(r) {
j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '  </span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';
}
}
});
$('#' + f + '>ul').html(j);
b.data('spy', 'scroll');
b.data('target', '.sideCatalogBg');
$('body').scrollspy({
target: '.sideCatalogBg'
});
$sideCatelog = $('#' + e);
$('#' + g).on('click', function() {
if($(this).hasClass('sideCatalogBtnDisable')) {
$sideCatelog.css('visibility', 'hidden')
} else {
$sideCatelog.css('visibility', 'visible')
};
$(this).toggleClass('sideCatalogBtnDisable')
});
$('#' + h).on('click', function() {
$("html,body").animate({
scrollTop: 0
}, 500)
});
$sideToolbar = $('#' + d);
//通过判断评论框是否存在显示索引目录
var commentDiv = $("#blog-comments-placeholder");
a.on('scroll', function() {
//评论框存在才调用方法
if(commentDiv.length > 0) {
var t = a.scrollTop();
if(t > k) {
$sideToolbar.css('display', 'block');
$('#gotop').show()
} else {
$sideToolbar.css('display', 'none')
$('#gotop').hide()
}
}
})
});
//以上是锚点JS
//以下是返回顶部JS
$(function() {
$('body').append('<div id="gotop" onclick="goTop();"></div>');
});
function goTop(u, t, r) {
var scrollActivate = !0;
if(scrollActivate) {
u = u || 0.1;
t = t || 16;
var s = 0,
q = 0,
o = 0,
p = 0,
n = 0,
j = 0;
document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
n = window.scrollX || 0;
j = window.scrollY || 0;
s = Math.max(s, Math.max(o, n));
q = Math.max(q, Math.max(p, j));
p = 1 + u;
window.scrollTo(Math.floor(s / p), Math.floor(q / p));
0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r()
} else {
scrollActivate = !0
}
}
//以上是返回顶部JS
</script>
页首代码
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">
<script src="https://files.cnblogs.com/files/miangao/maodian.js"></script>
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
页脚代码
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是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>
