引言

发现从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. DA14531芯片固件逆向系列（1）-固件加载和逆向分析

    首发于先知论坛 https://xz.aliyun.com/t/9185 前言 本文介绍逆向DA14531芯片的固件,并介绍一些辅助自动化分析的脚本的实现.DA14531是Dialog公司研制的蓝牙芯 ...

  2. JAVA-通过大疆TSDK的API直接获取红外图片温度信息

    一.前言 看过很多关于大疆红外图片用TSDK取温的方式,但是网上能搜到的大部分教程都是通过官方下载文件smple编译出来的程序来取温,如果这样做,虽然确实也能够实现目的,但不得不说,不但会降低运行速度 ...

  3. Qt/C++通用跨平台Onvif工具/支持海康大华宇视华为天地伟业等/云台控制/预置位管理/工程调试利器

    一.前言 在安防视频监控行业,Onvif作为国际标准,几乎主要的厂商都支持,不仅包含了国内的厂商,也包括主要的国际厂商,由于有了这个标准的存在,使得不同设备不同安防平台之间,能够接入各个厂家的硬件设备 ...

  4. Qt/C++音视频开发49-推流到各种流媒体服务程序

    一.前言 最近将推流程序完善了很多功能,尤其是增加了对多种流媒体服务程序的支持,目前支持mediamtx.LiveQing.EasyDarwin.nginx-rtmp.ZLMediaKit.srs.A ...

  5. Qt编写的项目作品5-物联网管理平台

    一.功能特点 1 软件模块 设备监控模块,包括数据监控(表格形式展示).设备面板(面板形式展示).地图监控(地图形式展示).曲线监控(曲线形式展示). 数据查询模块,包括报警记录.运行记录.操作记录. ...

  6. 古早的遗传算法碰到LLM->😊AutoDAN Generating Stealthy Jailbreak Prompts on💗Aligned Large Language Models

    师兄推给我的一篇ICLR,抽出时间阅读整理了附录前的内容 这次没有完全翻译,因为我想组会上分享,转成自己的话 禁止盗用,侵权必究!!!欢迎大家积极举报

  7. cmake错误：CMake Error: CMake can not determine linker language for target

    解决方案:因为你的library只有头文件,没有cpp文件 在add_library中增加cpp文件 同时建立一个空的cpp文件即可. 处理后的源代码结构和CMakeLists.txt内容如下所示: ...

  8. kubernetes系列(九) - 深入掌握Service

    1. Service概念 2. Service的类型 2.1 ClusterIP(默认) 2.1.1 原理 2.1.2 ClusterIP资源清单 2.2 NodePort 2.2.1 NodePor ...

  9. JVM实战—7.如何模拟GC场景并阅读GC日志

    大纲 1.动手模拟出频繁Young GC的场景 2.JVM的Young GC日志应该怎么看 3.代码模拟动态年龄判定规则进入老年代 4.代码模拟S区放不下部分进入老年代 5.JVM的Full GC日志 ...

  10. vue基础4

    Q:1.动画的使用方法以及动画库的使用方式 2.vue中的指令有哪些? 3.vue中生命周期钩子函数有哪些?分别代表什么含义? 4.filter的语法是什么? 5.computed的特点是什么? 6. ...