希望侧边增加文章大纲功能

[huangtianxing]

文章太长，不好找到要看的部分，希望按照文章内不同等级标题生成文章大纲。另外，谢谢各位主题的开发者

[rangdengdashi]

顶，同样需要

[silverwq]

https://blog.pdfqupu.com/archives/188.html

可以间接实现目录跳转的功能

[zhx47]

https://blog.pdfqupu.com/archives/188.html

可以间接实现目录跳转的功能

感谢大哥的思路，我修改了一下代码，让样式更适合我们的主题，你可以参考一下。

修改Body尾部的代码，head部分代码还是继续用你的，我感觉样式已经够用了。

<script src="https://fastly.jsdelivr.net/gh/zhx47/autocjs/dist/autoc.min.js"></script>
<script>
// 文章导航
if ($(".joe_detail__article").length > 0) {
    var switcher = document.createElement('div');
    switcher.className = 'joe_action_item custom_switcher';

    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('class', 'custom_switcher');
    svg.setAttribute("viewBox", "0 0 1024 1024");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("width", "25");
    svg.setAttribute("height", "25");

    var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path1.setAttribute('class', 'custom_switcher');
    path1.setAttribute("d", "M64.67 512c2.03-148.27 27.78-271.04 103.07-344.26C240.96 92.45 363.73 66.7 512 64.67c148.27 2.03 271.04 27.78 344.26 103.07C931.55 240.96 957.3 363.73 959.33 512c-2.03 148.27-27.78 271.04-103.07 344.26C783.04 931.55 660.27 957.3 512 959.33c-148.27-2.03-271.04-27.78-344.26-103.07C92.45 783.04 66.7 660.27 64.67 512z");
    var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path2.setAttribute('class', 'custom_switcher');
    path2.setAttribute("d", "M706.07 405.35H327.44c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h378.62c18.64 0 33.9 15.25 33.9 33.9 0 18.64-15.25 33.9-33.89 33.9zM706.07 563.37H327.44c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h378.62c18.64 0 33.9 15.25 33.9 33.9s-15.25 33.9-33.89 33.9zM475.54 721.4h-148.1c-18.64 0-33.9-15.25-33.9-33.9 0-18.64 15.25-33.9 33.9-33.9h148.09c18.64 0 33.9 15.25 33.9 33.9 0.01 18.65-15.25 33.9-33.89 33.9z");
    path2.setAttribute("fill", "#FFFFFF");
    switcher.appendChild(svg);
    svg.appendChild(path1);
    svg.appendChild(path2);
    document.getElementsByClassName('joe_action')[0].appendChild(switcher);
    // 创建 Outline 实例
    let navigation = new AutocJs({
        // 文章正文 DOM 节点的 ID 选择器
        article: '.joe_detail__article',
        // 要收集的标题选择器
        selector: 'h1,h2,h3,h4,h5,h6',
        // 侧边栏导航的标题
        title: '文章导读',
        // 文章导读导航的位置
        // outside - 以侧边栏菜单形式显示（默认值）
        // inside - 在文章正文一开始的地方显示
        position: 'outside',
        // 标题图标链接的 URL 地址
        // （默认）没有设置定制，点击链接页面滚动到标题位置
        // 设置了链接地址，则不会滚动定位
        anchorURL: '',
        // 链接的显示位置
        // front - 在标题最前面（默认值）
        // back - 在标题后面
        anchorAt: 'back',
        // 是否生成文章导读导航
        isGenerateOutline: true,
        // 是否在文章导读导航中显示段落章节编号
        isGenerateOutlineChapterCode: false,
        // 是否在正文的文章标题中显示段落章节编号
        isGenerateHeadingChapterCode: false,
        // 是否在正文的文章标题中创建锚点
        isGenerateHeadingAnchor: false
    });
}
</script>

效果图，优化了一下这个按钮的显示，我不是前端，期待有个大佬继续优化一下

[zwtduserid]

你好。已收到你的邮件，我会在假期结束后尽快处理。————————————这是来自QQ邮箱的自动回复邮件。