Typecho的Joe主题开启文章导航目录树
引言
发现从typora复制过来的markdown代码中的目录导航[toc]语句没生效, 没有像typora或其他markdown编辑器生成导航目录树, 网上搜了下, 发现个解决方法, 在主题设置里插入几行代码就可以了, 也不用写toc了, 会根据标题级别自动生成目录树
使用教程
首先进入网站后台，点击更换外观，点击全局设置
在下方找到 自定义增加<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">
在 自定义末尾位置内容（非必填） 中填入下面代码
<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>
点击保存，进入文章页面，就能看到效果
Typecho的Joe主题开启文章导航目录树的更多相关文章
- 【卷土重来之C#学习笔记】（一）c#文章导航目录
[卷土重来之C#学习笔记](一)c#文章导航目录 [卷土重来之C#学习笔记](二)c#编程概述 [卷土重来之C#学习笔记](三)类型.存储.对象 [卷土重来之C#学习笔记](四)类的基本概念 [卷土重 ...
- 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录
ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...
- wordpress模板学习之导航目录
wordpress的导航目录分为三个部分,一开启,二配置:三使用 开启在functions.php,这个注册会保存在全局变量中,接下来在菜单配置中会看到 register_nav_menu( 'pri ...
- 【强烈强烈推荐】《ORACLE PL/SQL编程详解》全原创（共八篇）--系列文章导航
原文:[强烈强烈推荐]<ORACLE PL/SQL编程详解>全原创(共八篇)--系列文章导航 <ORACLE PL/SQL编程详解> 系列文章目录导航 ——通过知识共享树立个人 ...
- .Net程序员学用Oracle系列(1)：导航目录
本人从事基于 Oracle 的 .Net 企业级开发近三年,在此之前学习和使用的都是 (MS)SQL Server.未曾系统的了解过 Oracle,所以长时间感到各种不习惯.不方便.怪异和不解,常会遇 ...
- 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录(转)
出处:http://www.cnblogs.com/mienreal/p/4528470.html ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视 ...
- EF和MVC系列文章导航：EF Code First、DbContext、MVC
对于之前一直使用webForm服务器控件.手写ado.net操作数据库的同学,突然来了EF和MVC,好多新概念泉涌而出,的确犹如当头一棒不知所措.本系列文章可以帮助新手入门并熟练使用EF和MVC,有了 ...
- 探索Windows命令行系列(1)：导航目录
探索Windows命令行系列(1):导航目录 探索Windows命令行系列(2):命令行工具入门 探索Windows命令行系列(3):命令行脚本基础 探索Windows命令行系列(4):通过命令操作文 ...
- wordpress chronus主题 显示文章阅读数
wordpress chronus主题 显示文章阅读数 第一步:将下面的代码拷贝到文件 /wp-content/themes/chronus/inc/template-tags.php 中 funct ...
- C#设计模式(0)-设计模式系列文章导航
设计模式系列文章导航 C#设计模式(1)——单例模式(SingletonPattern) C#设计模式(2)——简单工厂模式(SimpleFactory) C#设计模式(3)——工厂方法模式( ...
随机推荐
- Vue组件样式穿透
前情 Vue是目前主流的前端框架之一,我是Vue框架的忠实老用户,平时开发中如果再依赖个第三方组件库那样开发效率就会事半功倍. 第三方组件库可以很大提高开发效率,但是叫会有一些UI效果需要自定义,如想 ...
- 实用干货分享（2） - Docker使用操作指南
一.Docker安装部署 1. 安装仓库 执行以下命令,安装Docker所需的包.其中yum-utils提供yum-config-manager工具:device-mapper-persistent- ...
- 【Javaweb】【答卷】萌狼蓝天大二上学期期末Javaweb考试复习卷（一）
- Qt/C++地址转坐标/坐标转地址/逆地址解析/支持百度高德腾讯和天地图
一.前言说明 地址和经纬度坐标转换的功能必须在线使用,一般用在导航需求上,比如用户输入起点地址和终点地址,查询路线后,显示对应的路线,而实际上各大地图厂家默认支持的是给定经纬度坐标来查询(百度地图支持 ...
- 国产系统UOS上的可视化大屏电子看板系统
一.功能特点 采用分层设计,整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件. 子控件包括饼图.圆环图.曲线图.柱状图.柱状分组图.横向柱状图.横向柱状分组图.合格率 ...
- Qt音视频开发39-人脸识别在线版
一.前言 关于人脸识别这块,前些年不要太火,哪怕是到了今天依然火的一塌糊涂,什么玩意都要跟人脸识别搭个边,这东西应该只是人工智能的一个很小的部分,人脸识别光从字面上理解就是识别出人脸区域,其实背后真正 ...
- Qt音视频开发24-ffmpeg音视频同步
一.前言 用ffmpeg来做音视频同步,个人认为这个是ffmpeg基础处理中最难的一个,无数人就卡在这里,怎么也不准,本人也是尝试过网上各种demo,基本上都是渣渣,要么仅仅支持极其少量的视频文件比如 ...
- Error:java: 无效的源发行版: 11
问题描述: 昨天下载 ali 的一个 demo.本地 idea 编译的时候报错. Error:java: 无效的源发行版: 11 具体原因: 项目的 jdk (Project SDK)版本 和项目的语 ...
- 不为人知的网络编程(十四)：拔掉网线再插上，TCP连接还在吗？一文即懂！
本文由作者小林coding分享,来自公号"小林coding",有修订和改动. 1.引言 说到TCP协议,对于从事即时通讯/IM这方面应用的开发者们来说,再熟悉不过了.随着对TCP理 ...
- kubernetes系列(七) - Pod生命周期
目录 1. pod生命周期 2. initC 2.1 initC介绍 2.2 initC的作用 2.3 initC的模版 2.4 initC的一些其他补充 3. Pod健康性检查(liveiness) ...