博客园文章目录生成脚本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>

 

层级演示:

H4

H5
H6

H1:会加粗

H2:也会加粗

H3:之后都是正常字体

H4

H4

H5
H6

H2

H3

H4

posted @ 2024-06-04 12:44  Yfeil  阅读(47)  评论(0编辑  收藏  举报