使用說明：
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>
層級演示：