Typecho Joe主题的文章内容如何增加目录

概述

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

配置步骤

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

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

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

   3.最后在自定义末尾位置内容（非必填） 中填入下面代码

   <script src="https://fastly.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>