自定义博客园目录
准备工作
1. 申请 JS 权限
获取目录数据,添加目录都需要用到 JS 操作,在设置内即可申请
2. 布局分析
2.1 目录控件要放入的目标位置在 #sideBarMain 里的第一个子元素前
2.2 文章内容全部容纳在 #cnblogs_post_body 元素中
不同主题布局不同,仅以 SimpleMemory 主题为例
实际操作
1. JavaScript 代码(粘入 设置->博客侧边栏公告 即可)
<script>
// 获取数据
var post_details = document.getElementById("cnblogs_post_body").children;
var catalog_data = [];
for (var i = 0; i < post_details.length; i++) {
if (/^H\d$/.test(post_details[i].nodeName)) {
catalog_data.push({
// 标题标签的级别
type: post_details[i].nodeName,
// 博客园会自动去除h标签中特殊符号后当作该标签的id,保存以用作锚点
id: post_details[i].id,
// 内容
str: post_details[i].innerHTML
});
}
}
// 创建目录控件
var catalog_ele = document.createElement("div");
catalog_ele.id = "my-catalog";
// 拼接目录内容
var catalog_html = '<h3 class="catListTitle">目录</h3><ul>';
for (var i = 0; i < catalog_data.length && catalog_data[i].type < "H5"; i++) { //H5及以上标题不显示
catalog_html += '<li class="catalog-' + catalog_data[i].type + //设置不同类名
'"><a href="#' + catalog_data[i].id + //设置锚点
'">' + catalog_data[i].str + '</a></li>'; //显示内容
}
catalog_html += '</ul>';
catalog_ele.innerHTML = catalog_html;
// 插入目录
var side_bar_main = document.getElementById("sideBarMain");
side_bar_main.insertBefore(catalog_ele, side_bar_main.children[0]);
/**********************************************
*此处已可实现静态位置的目录生成及点击跳转
*下方剩余代码为实现随页面滚动改变catalog的定位
*********************************************/
function getAbsoluteTop(node) {
var top = 0;
do {
top += node.offsetTop;
node = node.offsetParent;
} while (node);
return top;
}
var catalog_ul_ele = catalog_ele.children[1];
var catalog_ul_top = getAbsoluteTop(catalog_ul_ele);
onscroll = function () {
var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll_top > catalog_ul_top) {
catalog_ul_ele.style.position = "relative";
catalog_ul_ele.style.top = scroll_top - catalog_ul_top + "px";
} else {
catalog_ul_ele.style.position = "static";
}
}
</script>
2. 设置简单样式(粘入 设置->页面定制 CSS 代码 即可)
@media screen and (max-width: 767px) {
#my-catalog {
display: none;
}
}
@media screen and (min-width: 768px) {
#my-catalog {
display: block;
}
}
#sideBar {
overflow: visible;
}
#my-catalog ul {
background-color: #fff;
border: 1px solid #ededed;
padding: 5px 15px 15px 5px;
z-index: 999;
}
#my-catalog ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#my-catalog ul li a:hover {
text-decoration: none;
}
#my-catalog ul .catalog-H2 {
padding-left: 10px;
margin-top: 5px;
}
#my-catalog ul .catalog-H3 {
padding-left: 20px;
}
#my-catalog ul .catalog-H4 {
padding-left: 30px;
}
3. 效果如右
仅在浏览器宽度 大于767px 时显示目录