如何在 Typecho Joe 主题的文章中增加目录

概述

文章目录功能是通过AutocJs来实现的，具体可以看：https://github.com/yaohaixiao/AutocJS

最近发现，他们升级了功能，所以如果是最新版本的话，就按新版本的方式进行配置，虽然这个是以 typecho joe 主题为教程，但是理论上，对 markdown 文章博客都可以按这种方式增加目录功能。

旧版本（不推荐）配置步骤

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

然后在下方找到自定义增加<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>

新版本配置

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

然后在下方找到自定义增加<head></head>里内容（非必填），填入下面代码

<link href="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.css" rel="stylesheet" />

最后在自定义<body></body>末尾位置内容（非必填）中填入下面代码

// 文章导航
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/outline.js/outline.min.js"></script>
<script>
(
function(){
const defaults = Outline.DEFAULTS
let outline
defaults.articleElement = '.joe_detail__article'
defaults.homepage = '/'
defaults.placement = 'ltr'
outline = new Outline(Outline.DEFAULTS)
})()
</script>

如何在 Typecho Joe 主题的文章中增加目录

概述

旧版本（不推荐）配置步骤

新版本配置

评论 (0)