DiscoTOC - 自动内容表格

news2024/11/27 10:41:30

示例

桌面


移动终端

特性

toc = table of contents(内容列表)

  • 通过菜单上面的设置按钮,根据当前内容的状况一键生成 toc 列表
  • Toc 将会一直在页面中尽显显示 —— 滚动内容与 topic 的链接是同步的
  • 当你滚动过当前页面中中的主题的时候,对应这个主题的内容列表将会使用高亮来进行显示(显示为绿色)
  • 针对标题添加属性(你可以从其他的 topic / post 中来链接到特定的内容)
  • 通过单击 toc 的主题链接,浏览器将会导航到正文内容的对应位置上(同步滚动)
  • 针对每一个标题添加一个可以拷贝的链接(当然是在你期望的情况下)
  • RTL 支持
  • 配色方案基于你当前使用的配色方案

是如何进行工作的

在默认情况下,当前的内容的标题将会被标记为 toc(通过 composer 按钮来完成上面的操作的),同时如果你的当前主题是被标记的话,这个也将会被转换为 toc(这个与当前标题的层次有关),所有的内容标题都会被转换为 TOC —— 这就意味着,你的 MD 文件的标题设置是必须正确的,如果你的标题设置层级有错误,那么转换的结果也会出错.。

# heading 1
## heading 2
### heading 3
#### heading 4
##### heading 5
###### heading 6

针对层级,你可以随意进行调整,但是你必须要保证层级的正确。

# heading 2 
## heading 3
## heading 3
### heading 4
## heading 3
# heading 2

etc...

为了保证链接能够正常工作,所有的标题必须要有 Id 属性。

这个组件将会自动对标题的 Id 进行校验,如果标题是存在的话,那么这个组件将能够更加有效的执行。同时 Id 在你手动创建主题的时候也更加有用。

如果你的标题没有 Id 的话,这个组件将会根据标题的内容来自动创建 Id(对不需要的字符将会自动的被忽略)。

当上面的所有内容完成后,TOC 将会根据标题创建一个链接到正文的链接,如下图:

设置

这个组件只有一个设置,就是 Toc 的图标(这个图片将会在后面的设置中使用,官方不建议对这个图标进行修改。)

翻译和本地化

这个组件需要翻译的内容也非常少,只有下面 3 个字段需要翻译。

table_of_contents: "table of contents(内容列表)"

这个将会在移动终端上打开 TOC 的时候显示

insert_table_of_contents: "Insert table of contents(插入内容列表)"

这个是在内容列表被插入到主题页面的时候来进行显示的。

topic_will_contain_a_table_of_contents: "This topic will contain a table of contents(本内容将会提供主题列表)"

这个内容将会在你对主题内容进行编辑的时候,在右侧进行预览的时候显示在预览页面上。This is the text that shows up in the composer preview to indicate that the a toc will be generated for the topic

如何创建一个标题

  1. 有关内容的标题在创建的时候需要创建有正确的语法。
  2. 单击页面中的菜单选项(这个只针对常规主题和帖子进行显示,如果你试回复和私信的话,这个选项将不会被显示)。
  3. 插入到主题页面中

当我们使用 Toc 的时候,阅读进度小组件会发生什么

你可能知道,在页面中我们没有办法同时显示阅读进程和 TOC 。

官方的解决方案是,如果你再阅读第一个帖子的时候,TOC 存在的话,那么页面上将只会显示 TOC,而将阅读进度组件忽略而不显示。

当你的阅读超过第一个帖子的时候,TOC 将不会进行显示,取而代之的是整个内容的阅读进度显示条。

简单来说,TOC 只针对第一个帖子有效,后续的帖子将会使用阅读进度条。

针对移动终端盒桌面应用的显示是相同的。

使用这个组件会有什么问题

针对作者和官方的说法,使用这个组件目前还没有遇到任何问题。

所有的内容显示是在客户端完成的,用行话来说,就是所有的内容是在前端完成的,所以后端的数据提供没有受到任何的影响。

当你禁用这个组件以后,所有的内容将会恢复成原样。

使用限制

这个组件使用的是标准的主题布局。

如果你使用的布局对对标题的使用进行了修改的话,那么这个 TOC 组件将没有办法正常工作。

例如已知的,如果使用了 Vincent theme 这个主题的情况下,这个组件是没有办法正常工作的。

针对一些非常流行的主题支持,对官方这个插件来说是下一个需要考虑的内容和反向。

Credit

官方的作者是基于 Greg Franko’s tocify.js 库进行开发的。

但是,非常不幸的是,这个库已经很长时间没有更新了,所以作者针对这个库的内容删除了很多不需要的内容和没有必要的特性和代码后把相关的特性整合到 Discourse 中了。

整个组件的大小在 ~ 4kb 左右(使用 gzip 压缩的情况)。

作者也感谢 @erlend_sh 提出了很多很好的建议和 @david 帮助完成了翻译工作。

需要改进的(TODO)

  • 在编辑的时候,实时对照显示 TOC (这个可能对资源的消耗非常大)
  • 支持一些主流的主题来显示 TOC
  • 单击标题的链接按钮同时还自动拷贝到剪贴板中。

针对这个版本的发布,作者表示的是:这个发布还是比较早期的发布,如果你对这个组件有什么问题,建议和改进的话,欢迎直接和原作者取得联系。

DiscoTOC - 自动内容表格 - Discourse - OSSEZ

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/598260.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python numpy - 数组的创建与访问

目录 一 数组array的创建途径 1 列表list 2 函数array 3 函数arange 4 函数zeros 5 函数eyes 6 随机函数randn/ randint 二 数组array的访问 1 访问形状/元素个数/数据类型 2 访问一维数组的位置/范围 3 访问二维数组的位置/范围 4 用:访问二维数组的…

美国餐饮连锁集团【CAVA Group】申请纽交所IPO上市

来源:猛兽财经 作者:猛兽财经 猛兽财经获悉,来自美国的餐饮连锁集团【CAVA Group】近期已向美国证券交易委员会(SEC)提交招股书,申请在纽交所IPO上市,股票代码为(CAVA) ,CAVA Group…

基于SSM的疫情物资管理系统

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

公民开发者学习无代码编程,从CRUD开始

目录 1 创建数据表2 创建新增页面3 新增功能开发4 预览总结 自从Forrester2014年提出低代码的概念后,对于编程人员重新进行了划分。使用传统开发工具,使用代码进行编程的叫专业开发人员。使用低代码或者无代码开发工具,作为企业内部的人员&am…

基于深度学习的高精度老鼠检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要:基于深度学习的高精度老鼠检测识别系统可用于日常生活中检测与定位老鼠目标,利用深度学习算法可实现图片、视频、摄像头等方式的老鼠目标检测识别,另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型训练数据…

如何确定bug是前端还是后端的错误?

前言:学会分析一个bug属于前端还是后端的错误,可方便开发快速定位问题,缩短与开发的沟通成本,也是测试人员的必备技能,笔者面试时就曾经被问到过,那就一起分析一波吧。 一、定义bug类型: 1、…

app渗透-抓包

app渗透-1 前言1.模拟器2.抓包工具-Fiddler2.1抓app包2.1.1设置模拟器2.1.2设置fiddler2.1.3使用 2.2抓小程序2.2.1抓包2.2.2解决抓不到https2.2.3解决抓不到包-12.2.4解决抓不到包-22.2.5解决抓不到包-3 前言 不要把app和小程序想的多困难,其实就是一个小的网站塞…

2023-06-01:讲一讲Redis常见数据结构以及使用场景。

2023-06-01:讲一讲Redis常见数据结构以及使用场景。 答案2023-06-01: 字符串(String) 适合场景 缓存功能 Redis 作为缓存层,MySQL 作为存储层,在大部分请求中,数据的读取通常是从 Redis 中…

Python笔记(更新ing)

目录 第一章 Python初识1、什么是编程语言2、第一个Python程序 第二章 基本语法1、 字面量2、 注释3、 变量4、 数据类型5、 数据类型转换6、 标识符7、 运算符8、 字符串扩展9、 字符串拼接10、 字符串格式化11、 字符串格式化的精度控制12、 字符串格式化的方式二13、 对表达…

deepin安装docker和pytorch

title: deepin安装docker和pytorch date: 2023-06-01 17:28:58 tags: [linux, torch,docker] deepin安装docker和pytorch 总体的流程图大致如下,首先是安装linux,这个直接跳过,接下来就是安装docker,之后,安装docker之…

推动科技教育普惠|2023 开放原子全球开源峰会校源行分论坛即将启幕

科技创新,人才先行,高校作为开源人才培养的主阵地,在开源的发展中扮演着关键角色。 6 月 13 日,2023 开放原子全球开源峰会校源行分论坛将在北京经开区亦创国际会展中心盛大举行。论坛以“聚缘于校、开源共行”为主题,…

上海亚商投顾:沪指冲高回落微涨 AI应用端再度爆发

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 市场情绪 三大指数今日冲高回落,创业板指相对偏强。AI应用端再度爆发,传媒、影视、游戏等方向领涨&a…

『Linux』第九讲:Linux多线程详解(四)_ 生产者消费者模型

「前言」文章是关于Linux多线程方面的知识,上一篇是 Linux多线程详解(三),今天这篇是 Linux多线程详解(四),内容大致是生产消费者模型,讲解下面开始! 「归属专栏」Linux系…

实用调试技巧与案例分析

目录 调试(Debug): 调试的基本步骤: Debug和Release的介绍: 几个常用的快捷键: 案例一: 案例二: 如何写出好(易于调试)的代码? 案例一: 1.assert用法 2.const用法 案例二…

离散数学-数理逻辑

《离散数学》是计算机专业的一门十分重要的专业基础课。离散数学作为有力的数学工具对计算机的发展、计算机研究起着重大的作用。目前,计算机科学中普通采用离散数学中的一些基本概念、基本思想和基本方法。通过本课程的学习,掌握数理逻辑、集合论、代数…

6月1号软件资讯更新合集......

Chrome 114 正式发布,支持 CHIPS 自 Chrome 113 发布以来,已经过了四个星期,Google 近日也准时发布了 Chrome 114。Chrome 114 默认启用了 CHIPS,这是 Google 通过新的 cookie 属性来淘汰第三方 Cookie 的一部分;Chro…

利用Git及GitHub对项目进行版本控制

目录 一、在本地安装Git 二、利用Git将项目上传到Github上 三、用HTTPS获取GitHub上的项目 四、版本控制 一、在本地安装Git 1、Git安装链接:https://git-scm.com/downloads 2、下载安装包,双击exe文件进行安装: 3、接下来会弹出一系列…

Nginx服务基础、访问控制、虚拟主机

Nginx服务基础、访问控制、虚拟主机 一、Nginx介绍二、Linux系统Nginx安装1、官网下载Nginx压缩包2、编译安装Nginx1.配置环境2.安装依赖包3.创建运行用户、组4.编译安装5.检查、启动、重启、停止 nginx 服务6.添加Nginx系统服务 三、Nginx配置文件1、全局配置2、I/O 事件配置3…

水务漏损管理中存在的问题及解决方法

原文链接https://mp.weixin.qq.com/s?__bizMzg3NzkxNTI1MA&mid2247484559&idx1&snd1402e3f9fc75f7483a9dca3fc0174d4&chksmcf1af992f86d7084c48ce7e4072fd6be0555ec086c1065ef83398390c8bd19f2560daf594d7c&token955052059&langzh_CN#rd 在供水建设管…

Codeforces Round 875 div.2 problemB. Array merging题解

目录 一、题目 二、题目分析 三、 一、题目 传送门 B. Array merging time limit per test 1 second memory limit per test 256 megabytes input standard input output standard output You are given two arrays a and b both of length n. You will merge††…