引言

发现从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主题开启文章导航目录树的更多相关文章

  1. 【卷土重来之C#学习笔记】（一）c#文章导航目录

    [卷土重来之C#学习笔记](一)c#文章导航目录 [卷土重来之C#学习笔记](二)c#编程概述 [卷土重来之C#学习笔记](三)类型.存储.对象 [卷土重来之C#学习笔记](四)类的基本概念 [卷土重 ...

  2. 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录

    ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视频:ABP架构设计交流群-7月18日上海线下交流会的内容分享(有高清录像视频的链接) 代码自动生成: ...

  3. wordpress模板学习之导航目录

    wordpress的导航目录分为三个部分,一开启,二配置:三使用 开启在functions.php,这个注册会保存在全局变量中,接下来在菜单配置中会看到 register_nav_menu( 'pri ...

  4. 【强烈强烈推荐】《ORACLE PL/SQL编程详解》全原创（共八篇）--系列文章导航

    原文:[强烈强烈推荐]<ORACLE PL/SQL编程详解>全原创(共八篇)--系列文章导航 <ORACLE PL/SQL编程详解> 系列文章目录导航 ——通过知识共享树立个人 ...

  5. .Net程序员学用Oracle系列(1)：导航目录

    本人从事基于 Oracle 的 .Net 企业级开发近三年,在此之前学习和使用的都是 (MS)SQL Server.未曾系统的了解过 Oracle,所以长时间感到各种不习惯.不方便.怪异和不解,常会遇 ...

  6. 基于DDD的现代ASP.NET开发框架--ABP系列文章总目录(转)

    出处:http://www.cnblogs.com/mienreal/p/4528470.html ABP相关岗位招聘:给热爱.NET新技术和ABP框架的朋友带来一个高薪的工作机会 ABP交流会录像视 ...

  7. EF和MVC系列文章导航：EF Code First、DbContext、MVC

    对于之前一直使用webForm服务器控件.手写ado.net操作数据库的同学,突然来了EF和MVC,好多新概念泉涌而出,的确犹如当头一棒不知所措.本系列文章可以帮助新手入门并熟练使用EF和MVC,有了 ...

  8. 探索Windows命令行系列(1)：导航目录

    探索Windows命令行系列(1):导航目录 探索Windows命令行系列(2):命令行工具入门 探索Windows命令行系列(3):命令行脚本基础 探索Windows命令行系列(4):通过命令操作文 ...

  9. wordpress chronus主题 显示文章阅读数

    wordpress chronus主题 显示文章阅读数 第一步:将下面的代码拷贝到文件 /wp-content/themes/chronus/inc/template-tags.php 中 funct ...

  10. C#设计模式(0)-设计模式系列文章导航

    设计模式系列文章导航  C#设计模式(1)——单例模式(SingletonPattern) C#设计模式(2)——简单工厂模式(SimpleFactory)    C#设计模式(3)——工厂方法模式( ...

随机推荐

  1. 前端每日一知之opcity/visiblity/display隐藏元素对比

    脑图在线链接 本文内容依据CSDN博主FEWY精彩文章总结而来原文链接

  2. ChatGPT生成测试用例的最佳实践（一）

    前面介绍的案例主要展示了ChatGPT在功能.安全和性能测试用例生成方面的应用和成果.通过ChatGPT生成测试用例,测试团队不仅可以提升工作效率,还可以加快测试工作的速度,尽早发现被测系统中的问题. ...

  3. k3d 入门：在 Docker 中运行 k3s

    k3d 入门:在 Docker 中运行 k3s https://www.xtplayer.cn/k3d/introduction-k3d-run-k3s-docker-src/#The-"S ...

  4. 【C#】接口的基本概念

    目录 基本 什么是接口 接口与抽象类的区别 抽象类 接口 实例 设计接口 基本 什么是接口 C#接口(interface)是:用来定义一种程序的协定 实现接口的类或者结构要与接口的定义严格一致. 有了 ...

  5. jenkins异常 -- active (exited)，无法启动

    一.问题描述 1.无法启动 systemctl start jenkins 没有反应,没有输出报错 2.查询状态 systemctl status jenkins 3.jenkins拒绝访问 二.解决 ...

  6. 超轻巧modbus调试助手使用说明

    一.使用说明 1.1 数据格式 和其他的modbus采集工具一样,本组件也支持各种数据格式,其实就是高字节低字节的顺序. 一般是2字节表示一个数据,后面又有4字节表示一个数据,目前好像还有8字节表示一 ...

  7. 最近很新的EasyJailbreak😝 A Unified Framework for Jailbreaking Large Language Models🔅

    整篇文章短小精悍,原文中的链接很有意思~大家去多多尝试哦!

  8. 不为人知的网络编程(十八)：UDP比TCP高效？还真不一定！

    本文由LearnLHC分享,原始出处:blog.csdn.net/LearnLHC/article/details/115268028,本文进行了排版和内容优化. 1.引言 熟悉网络编程的(尤其搞实时 ...

  9. 网络编程入门如此简单(四)：一文搞懂localhost和127.0.0.1

    本文由萤火架构分享,原题"localhost和127.0.0.1的区别是什么?",原文链接"juejin.cn/post/7321049446443417638" ...

  10. 零基础快速入门WebRTC：基本概念、关键技术、与WebSocket的区别等

    本文引用自Hussein Nasser的两个视频分享,原文内容由卢冰聪翻译整理,即时通讯网收录时有大量修订和重新排版. 1.内容概述 本文是专为学习开源实时音视频工程WebRTC的入门者编写的速成指南 ...