引言

发现从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. Java模拟Oracle函数MONTHS_BETWEEN注意事项

    Java模拟Oracle函数MONTHS_BETWEEN注意事项 MONTHS_BETWEEN(DATE1, DATE2) 用来计算两个日期的月份差. 最近接到一个迁移需求,把Oracle SQL接口 ...

  2. Fuzz技术综述与文件Fuzz

    文章一开始发表在微信公众号 https://mp.weixin.qq.com/s?__biz=MzUyNzc4Mzk3MQ==&mid=2247486189&idx=1&sn= ...

  3. 数据加速器 GooseFS 1.2.0 版本正式发布

    新春已来临,腾讯云存储团队正式在官方网站上架数据加速器 GooseFS 产品,同时数据加速器 GooseFS 1.2.0 版本正式发布.该版本总结并收敛了 GooseFS 在过往大规模生产环境实践中遇 ...

  4. 鸿蒙应用开发从入门到入行 - 篇2:HarmonyOS开发快速基础入门

    鸿蒙应用开发从入门到入行 第二天 - 开发工具与基础组件 导读:在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用.ArkUI里的基础组件,并通过制作一个简单界面掌握使用 鸿蒙开发工具 - De ...

  5. IOS获取蓝牙状态

    IOS获取蓝牙状态 监听蓝牙状态 在Link Binaries With Libraries中添加CoreBluetooto.framework 创建CBCentralManager对象 为了避免每次 ...

  6. 黑苹果(Hackintosh) - 问题，修改CPU数量和内存数量后，系统重启失败

    1. 问题复现 安装完黑苹果后,内存默认的 1个处理器2个核心.2G内存,发现不够用. 于是,修改了 VMware 对此系统的 硬件配置 内存: 2G -> 8G 处理器:1个处理器 -> ...

  7. Could not install packages due to an OSError: ("Connection broken: ConnectionResetError(10054, '远程主机强迫关闭 了一个现有的连接。', None, 10054, None)",

    今天安装微软AI量化投资平台Qlib遇到报错 ERROR: Could not install packages due to an OSError: ("Connection broken ...

  8. Qt编写的项目作品13-机房安全作业预警系统

    一.功能特点 显示维修间所有图像: 门外1号红外,门内2号红外: 1号先报警,紧接2号报警,人员进入计时: 图标显示:人员图标和报警等级图标,人员进入了,人员图标闪烁,等级图标对应不同时间: 功能要求 ...

  9. 长连接网关技术专题(八)：B站基于微服务的API网关从0到1的演进之路

    本文由B站微服务技术团队资深开发工程师周佳辉原创分享. 1.引言 如果你在 2015 年就使用 B 站,那么你一定不会忘记那一年 B 站工作日选择性崩溃,周末必然性崩溃的一段时间. 也是那一年 B 站 ...

  10. 零基础Windows Server搭建部署Word Press 博客系列教程（2）:从菜鸡到高手之Windows Server 环境配置

    上一篇:零基础Windows Server搭建部署Word Press 博客系列教程(1):从萌新到菜鸡之云主机配置与备案 本篇教程主要介绍在云主机上安装好相关组件并配置好环境,直至网站上线. 1.之 ...