概述
文章目录功能是通过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>