Typecho 使用 AutocJS 为 Joe 主题开启文章目录
侧边栏壁纸
  • 累计撰写 17 篇文章
  • 累计收到 529 条评论

Typecho 使用 AutocJS 为 Joe 主题开启文章目录

syqman
2022-06-10 / 0 评论 / 233 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年06月11日,已超过742天没有更新,若内容或图片失效,请留言反馈。

说明

使用typecho写文章,发现写一些比较长的文章还是要加入目录导读比较方便,本文借助AutocJS来为Joe主题添加文章目录,感兴趣的移步项目地址: https://github.com/yaohaixiao/AutocJS

食用方法

进入网站后台——设置外观——全局设置,在下方找到 自定义增加<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>

保存设置,进入网站前台看下效果:
l48ku88d.png

小结

  其他主题的使用方式应该都是一样的,都需要引入 CSS JS ,这里我没有试,自行研究,唯一需要修改的就是 文章正文 DOM 节点的 ID 选择器
  如果不想使用原作者提供的 CDN 地址,需要将 Github 仓库中的 dist 整个目录放入到自己的服务器中,因为 Css 中用到的图标就存在 dist 目录的 fonts 中。

0

评论 (0)

取消