Typecho的Joe主题开启文章导航目录树

易小灯塔
2022-06-21 / 6 评论 / 1,131 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年06月21日,已超过888天没有更新,若内容或图片失效,请留言反馈。

引言

发现从typora复制过来的markdown代码中的目录导航[toc]语句没生效, 没有像typora或其他markdown编辑器生成导航目录树, 网上搜了下, 发现个解决方法, 在主题设置里插入几行代码就可以了, 也不用写toc了, 会根据标题级别自动生成目录树

使用教程

资料来源于https://www.ydyno.com/archives/1331.html

首先进入网站后台,点击更换外观,点击全局设置

kqdc34xd.png

在下方找到 自定义增加<head></head>里内容(非必填),填入下面代码

<style type="text/css">
.outline-outside-modal-opened {
    z-index: 10000 !important;
    left: 0;
    width: 300px !important;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/css/autoc.min.css">

自定义<body></body>末尾位置内容(非必填) 中填入下面代码

<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/autoc.min.js"></script>
<script>
// 文章导航
if ( $(".joe_detail__article").length > 0 ){
    // 创建 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>

完整配置如图所示

kqdc4pvs.png

点击保存,进入文章页面,就能看到效果

image-20220621014120310

3

评论 (6)

取消
  1. 头像
    柏先森
    Windows 10 · Google Chrome

    我用的也是JOE的主题 737版本,怎么样实现你主题中顶站就一栏的效果,能教下吗,我对代码一点不懂。

    回复
    1. 头像
      insmoin 作者
      Windows 10 · Google Chrome
      @ 柏先森

      编辑主题, 比较麻烦

      回复
  2. 头像
    KNIFE
    Windows 10 · Google Chrome

    您好,我使用了您的方法制作了目录栏,一切都很顺利,但是用久了之后我便觉得不好看,于是把代码给清除了
    但是将代码清除后,现在打开文章的时候旁边依然依然会闪过一下目录栏,虽然不是很重要,但是依旧觉得有些难受,想要把它完全剔除才行
    图片:https://cdn-us.imgs.moe/2022/12/28/63ac05a3c5248.png
    希望站长能给予帮助

    回复
    1. 头像
      KNIFE
      Windows 10 · Google Chrome
      @ KNIFE

      不好意思哈,找到原因了,是主题的问题,我用的joe max表情

      回复
      1. 头像
        insmoin 作者
        Windows 10 · Google Chrome
        @ KNIFE

        嗯嗯

        回复
  3. 头像
    6467
    Android · Google Chrome

    测试

    回复