博客园文章目录生成脚本v1.0:支持多级、过滤空行、可指定文章、自定义插入点
使用说明:
1.设置-申请JS权限,等待审核通过
2.设置-页脚HTML代码,代码贴进去保存
样式说明:
1.默认目录插到文章顶部,可以加入 <div id="toc"></div> 标签自定义插入位置。
2.H1 和 H2 是加粗体,其他的是正常体。
自定义功能:
all = true:给所有文章生成目录
all = 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>
层级演示:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签