博客园文章目录生成脚本v1.0：支持多级、过滤空行、可指定文章、自定义插入点
使用说明：
1.设置-申请JS权限，等待审核通过
2.设置-页脚HTML代码，代码贴进去保存
样式说明：
1.默认目录插到文章顶部，可以加入 <div id="toc"></div> 标签自定义插入位置。
2.H1 和 H2 是加粗体，其他的是正常体。
自定义功能：
catalogue(true)：给所有文章生成目录
catalogue(false)：只给带 <div id="toc"></div> 的文章生成目录
代码：
<script>
/**
* 博客：https://www.cnblogs.com/yfeil/p/18217712
* 作者：羽飞落
* 脚本名称：博客园文章目录生成脚本
* 功能介绍：支持多级、过滤空行、可指定文章、自定义插入点
* 当前版本：v1.0
* 更新日期：2024年5月28日
*
* 使用说明：
* 1.设置-申请JS权限，等待审核通过。
* 2.设置-页脚HTML代码，代码贴进去保存。
*
* 样式说明：
* 1.默认目录插到文章顶部，可以加入 <div id="toc"></div> 标签自定义插入位置。
* 2.H1 和 H2 是加粗体，其他的是正常体。
*
* 自定义功能：
* all = true：给所有文章生成目录
* all = false：只给带 <div id="toc"></div> 的文章生成目录
*/
all = true;
function catalogue() {
// 是否为文章页
let head = $('#cnblogs_post_body');
if (head.length == 0) {
return;
}
// 只给带 <div id="toc"></div> 的文章生成目录
let toc = $('div#toc');
if (!all && toc.length == 0) {
return;
}
// 查找所有标题,过滤空行
let elements = head.find('h1, h2, h3, h4, h5, h6').filter(function () {
return this.textContent.trim().length > 0 && !$(this).parent().is('div#toc');
});
if (elements.length == 0) {
return;
}
let div = $('<div>')
.attr('id', 'toc')
.append($('<h2>').text('目录'));
let level_stack = [];
let w = $(window).width() > 767;
let indent = w ? 25 : 15;
for (let i = 0; i < elements.length; i++) {
// 计算级别
let level = parseInt(elements[i].tagName.slice(1));
// 把栈中所有大于当前级别的都弹出去
while (level_stack.length > 0 && level < level_stack[level_stack.length - 1]) {
level_stack.pop();
}
// 如果栈中最大值等于当前级别，则不做动作
// 如果栈中最大值小于当前级别，则当前级别入栈
// 如果栈是空的，则当前级别直接入栈
if (level_stack.length == 0 || level > level_stack[level_stack.length - 1]) {
level_stack.push(level);
}
elements[i].setAttribute('id', 'tag_' + i);
div.append(
// 构建外层DIV
$('<div>')
.css('padding', '5px ' + (level_stack.length * indent - (w ? 0 : indent)) + 'px')
.css('font-weight', level <= 2 ? 'bold' : 'normal')
.append(
// 构建A标签
$('<a>')
.attr('href', '#tag_' + i)
.attr('title', elements[i].textContent)
.css('text-decoration', 'none')
.text(elements[i].textContent)
)
);
}
div.append($('<hr>'));
if (toc.length == 0) {
head.prepend(div);
} else {
toc.replaceWith(div);
}
}
$(window).on('resize', function() {
catalogue();
});
catalogue();
</script>
层级演示：