| 摘要 | DiscoTOC 将允许您一键为您的主题生成交互式目录! | |
| 预览 | 在 Discourse 主题创建器中预览 | |
| 仓库链接 | https://github.com/discourse/DiscoTOC | |
| 初次接触 Discourse 主题? | Discourse 主题使用入门指南 |
安装此主题组件
示例
桌面端
移动端
功能
toc = 目录
-
通过编辑器齿轮菜单中的按钮自动生成整个目录
-
目录将始终显示在屏幕上——随内容滚动,类似于主题进度小部件
-
当您滚动浏览主题中的各个部分时,目录中的活动元素将自动设为活动状态(蓝色高亮)
-
为标题添加 id 属性(您可以从其他主题/帖子链接到特定部分)
-
点击目录中的任何链接将指示浏览器导航到相关部分(平滑滚动)
-
在每个标题旁边添加一个可复制的链接(如果您想链接到它)
-
支持从右到左(RTL)布局
-
颜色基于您当前激活的颜色方案
它是如何工作的?
简而言之,它会查找主题中标记为需要目录的标题(通过编辑器按钮),如果当前主题被标记,则它会获取所有标题并将它们放入目录中(按标题级别嵌套)——这意味着您的 Markdown 语法必须正确。
# 标题 1
## 标题 2
### 标题 3
#### 标题 4
##### 标题 5
###### 标题 6
您可以自由地在标题级别之间来回切换,但顺序必须正确。
# 标题 2
## 标题 3
## 标题 3
### 标题 4
## 标题 3
# 标题 2
等等...
为了使目录中的链接能够正常工作,标题必须具有 id 属性。该组件会检查标题是否已有 id,如果有,则会保留它们。如果您曾经手动创建过目录,这会很有用。
如果标题没有 id,则会根据其文本为每个标题生成一个 id(不需要的字符会被剔除)。
完成所有这些后,它还会在每个按钮旁边添加一个直接链接到该部分的链接:
设置
| 名称 | 描述 |
|---|---|
| 创建目录所需的最低信任等级 | 用户必须达到的最低信任等级,才能在编辑器中看到目录按钮 |
| 编辑器目录文本 | 显示在编辑器预览窗口顶部的文本,用于提示该主题将包含目录 |
| 自动启用目录的分类 | 自动在这些分类的主题中启用目录 |
| 自动启用目录的标签 | 自动在这些标签的主题中启用目录 |
| 目录最小标题数 | 主题中必须包含的最少标题数量,才会显示目录 |
翻译
| 翻译键 | 默认值 |
|---|---|
| table_of_contents | 目录 |
| insert_table_of_contents | 插入目录 |
| jump_bottom | 跳到底部 |
| toggle_toc.show_timeline | 时间线 |
| toggle_toc.show_toc | 内容 |
该主题附带三个可翻译或修改的字符串。
table_of_contents: "目录"
此字符串用于在移动端打开目录的按钮。
insert_table_of_contents: "插入目录"
此字符串用作编辑器齿轮菜单中目录按钮的文本。
topic_will_contain_a_table_of_contents: "此主题将包含目录"
此文本显示在编辑器预览中,用于提示该主题将生成目录。
如何创建目录?
- 编写一个包含语法正确标题的主题
- 点击编辑器齿轮菜单中的目录按钮(仅在创建普通主题时显示,回复和私信会被忽略)
- 大功告成。
当主题包含目录时,主题进度小部件会发生什么变化?
如您所料,没有空间同时显示两者,因此该组件的工作方式如下:
在包含目录的主题中,当第一篇文章在屏幕上时,主题进度小部件会被隐藏,取而代之的是目录。
一旦您滚动过第一篇文章,目录将不再随您滚动,而在阅读任何回复时,主题进度小部件将取而代之。
因此,第一篇文章显示目录,后续文章显示常规的主题进度小部件。
这在桌面端和移动端都会发生。
使用此组件有什么缺点吗?
据我所知,没有任何缺点。所有更改都在客户端完成。因此,您可以轻松移除该组件,您的帖子将恢复到安装前的状态。
限制
该组件假设采用标准主题布局。因此,它无法与修改该布局的主题(如 Vincent 主题)配合使用。对流行但修改了布局的主题的支持将在后续阶段以组件设置的形式提供。
致谢
我从 Greg Franko 的 tocify.js 库开始。不过,它似乎很久没有更新了,因此这实际上是一个硬分叉,移除了许多不必要的功能,并将其余部分集成并适配到 Discourse 的样式中。
因此,没有任何外部请求,总大小约为 4kb(gzip 压缩后)。
非常感谢 @erlend_sh 提供的宝贵反馈,以及 @david 在翻译方面的帮助。
由我们托管? 主题组件可在我们的专业版、商业版和企业版计划中使用。









