[编程开发] Typecho 使用 AutocJS 为 Joe 主题开启文章目录
作者:CC下载站 日期:2021-06-26 00:00:00 浏览:49 分类:编程开发
使用 Typecho 但是阅读文章时没有文章目录,这个时候就需要借助 AutocJs 来为 Joe 主题添加文章目录功能
AutocJs 介绍
AutocJs
是一个专门用来生成文章导读 (Table of Contents)
导航的 JavaScript 工具(原 autocjs 的重构版本)。AutocJs
采用原生 JavaScript 编写,不依赖任何第三方 JavaScript 库。AutocJs
会自动查找文章指定区域中的所有 h1~h6
的标签,并自动分析文章段落间的层次结构,生成文章的导读导航。
配置说明可以查看 Github 库:https://github.com/yaohaixiao/AutocJS
Css 引用地址:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/css/autoc.min.css">
JS 引用地址:
<script src="https://cdn.jsdelivr.net/gh/yaohaixiao/autocjs/dist/autoc.min.js"></script>
Joe 主题中使用教程
首先进入网站后台,点击更换外观,点击全局设置
在下方找到 自定义增加<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>
完整配置如图所示
点击保存,进入文章页面,就能看到效果
其他主题如何使用
使用方式都是一样的,都需要引入 CSS
与 JS
,唯一需要修改的就是 文章正文 DOM 节点的 ID 选择器
使用时的注意点
如果不想使用原作者提供的 CDN
地址,需要将 Github
仓库中的 dist
整个目录放入到自己的服务器中,因为 Css
中用到的图标就存在 dist
目录的 fonts
中
如果无法连接 Github
,或者 Github
下载缓慢的,可以使用本站提供的地址下载
猜你还喜欢
- 03-29 [编程相关] Winform窗体圆角以及描边完美解决方案
- 03-29 [前端问题] has been blocked by CORS policy跨域问题解决
- 03-29 [编程相关] GitHub Actions 入门教程
- 03-29 [编程探讨] CSS Grid 网格布局教程
- 10-12 [编程相关] python实现文件夹所有文件编码从GBK转为UTF8
- 10-11 [编程算法] opencv之霍夫变换:圆
- 10-11 [编程算法] OpenCV Camshift算法+目标跟踪源码
- 10-11 [Python] python 创建 Telnet 客户端
- 10-11 [编程相关] Python 基于 Yolov8 + CPU 实现物体检测
- 03-15 [脚本工具] 使用go语言开发自动化脚本 - 一键定场、抢购、预约、捡漏
- 01-08 [编程技术] 秒杀面试官系列 - Redis zset底层是怎么实现的
- 01-05 [编程技术] 《Redis设计与实现》pdf
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[课程] 最用心全面的VIP硬笔书法课程(共250课完结) 手把手教 附可打印控笔素材
[MV] 韩国女团MV398首[打包]
[电影] 2023年美国喜剧片《问题专家》HD中英双字
[电影] 1999年美国经典传记片《十月的天空》蓝光中英双字
[影视] 破墓 WEB-DL版下载/Exhuma/The Unearthed Grave 2024 파묘 6.61G
[影视] 问题专家 WEB-DL版下载/大麻烦家(台) 2023 Problemista 18.2G
[短剧] 10部午夜小短剧 擦边剧
[电影] 2022年日本7.0分科幻片《疯狂星期一》BD日语中字
[电影] 2024年英国爱情片《血爱成河》BD中英双字
[课程] 爆款视频前三秒如何设计50招_短视频运营婧姐
[资料] [大学期末救急课] 猴博士+高斯课堂+斐多课堂,全集视频合集
[云资源] 价值2万元的老男孩Python教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[云资源] 花了一千多元买的私人健身教程
[下载工具] Internet Download Manager 6.42.7 (IDM)
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[云资源] 价值2万元的老男孩Python教程
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[云资源] 花了一千多元买的私人健身教程
[书库] 史上最全摄影书推荐(附700本PDF版打包下载)
[动画] 北斗神拳(1984) [两季合集] [MKV]
[资料] 抗战阵亡将士资料+续编
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长,三大队任务完成了 2023 三大队 6.7G
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[安卓软件] OfficeSuite中文版APP v14.2.50872.0破解版
- 最新评论
-
我想看看mw2ddyy 评论于:04-26 好东西阿zfy123123 评论于:04-18 谢谢楼主xiaoqi 评论于:04-12 勿在线解压,勿手机解压,请在电脑上用最新款压缩软件解压!推荐360压缩或者好压CC下载站 评论于:04-10 无法解压啊,客服能不能给个解压教程ravengrey 评论于:04-10 谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14
- 热门tag