DiscoTOC - 自动目录

:discourse2: 摘要 DiscoTOC 将允许您一键为您的主题生成交互式目录!
:eyeglasses: 预览 在 Discourse 主题创建器中预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/DiscoTOC
:open_book: 初次接触 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: "此主题将包含目录"

这是显示在编辑器预览中的文本,用于指示将为该主题生成目录。

如何创建目录?

  1. 编写包含语法正确标题的主题
  2. 点击齿轮菜单中的目录按钮(仅在创建普通主题时显示,回复和私信会被忽略)
  3. 大功告成。

当主题拥有目录时,主题进度小部件会发生什么变化?

如您所料,没有空间同时显示两者,因此该组件的工作方式如下:

在拥有目录的主题中,当第一篇文章在屏幕上时,主题进度小部件会被隐藏,取而代之的是显示目录。

一旦您滚动过第一篇文章,目录将不再随您滚动,而在您阅读任何回复时,将显示主题进度。

因此,第一篇文章显示目录,后续文章显示常规的主题进度小部件。

这在桌面端和移动端均适用。

使用此组件有什么缺点吗?

据我所知没有任何缺点,所有更改都是在客户端完成的。因此,您可以轻松移除该组件,您的帖子将恢复到安装前的状态。

限制

该组件假设采用标准的主题布局。因此,它无法与修改该布局的主题(如 Vincent 主题)配合使用。对流行布局修改主题的支持将以组件设置的形式在后续阶段提供。

致谢

我基于 Greg Franko 的 tocify.js 库开始开发。不过,看起来它已经有一段时间没有更新了,因此这本质上是一个硬分叉,移除了许多不必要的功能,并将其余部分集成并适配了 Discourse 的样式。

因此,没有外部请求,总大小约为 4kb(gzip 压缩后)。

非常感谢 @erlend_sh 提供的许多宝贵反馈,以及 @david 在翻译方面的帮助。

:discourse2: 由我们托管? 主题组件可在我们的专业版、商业版和企业版计划中使用。

182 个赞
Automatic Table of Contents generation
Creative Uses of Discourse
Wiki improvement – Split content into multiple sections?
:cn: DiscoTOC 自动内容表格
Big Header - Little Header
How To Add Marker To Table Of Contents Feature?
What are the different ways to customize content inside a post (custom attributes and such)
Tagged topic progress bar - feasible or not?
Reader Mode
How can i show a floating sticky 300x250 Adsense Ad on right side bar of topic page above the fold?
How do you create a table of content like this one?
Timeline with labelled step by step sections - how is this achieved?
How to get topic navigation menu
Is anyone working on a Discourse Wiki?
Traditional multi level hierarchy vs flat discourse hierarchy
Theme Components - Can Discourse hosted sites install them?
How to add table of content sidebar beside a topic?
How do I add a table of contents sidebar to a topic?
Cannot deep link to anchor in text
How can I compare arbitrary revisions of a post?
Understanding Discourse for new users
Problem with DiscoTOC: TypeError: _offsetCalculator.headerOffset is not a function
How to create an In-app Knowledge Base with Discourse Docs?
OP Contents on Progress Bar
How to get topic sidebar
Customizing your site with existing theme components
Link to headers (anchor links)
Outline Enable
What is essential content for a new community?
Tools for creating image-heavy articles
Adding DiscoTOC to Published Pages
Customize Your Site Branding
Discourse Doc Categories
Gif icon not displaying and showing error
Must have plugins and components for Discourse?
I created a bookmarklet to create the table of content for forum posts
Could a List of Recommended Topics Be Added to the Top Menu?
Living with corrupted SVGs for almost a year. Need Help!
Something recently changed, can't increase `--topic-body-width`
How to enable side navigation?
Displaying "full topic" text on category page + access to subcategory from menu bar
Improve iPad screen real estate
Missing anchor links in certain TOC topics?
DiscoTOC not showing in composer after latest component update
Missing anchor links in certain TOC topics?
How to create a documentation theme used by discourse
Where's Jump to end?
Handling anchors in posts created with markdown
Reader Mode
Hidden Timeline button
Horizon Theme
Collections
Bulk Export of Raw Post Sources with Markup
AI summary in topic header
Contents button and Timeline button floating unexpectedly
:cn: Discourse Post Formatting Guide 加点格式,让帖子多姿多彩
Wiki table of contents on pro plan
Auto-Linkify Words
Missing strings (DiscoTOC)
?page=n URLs have high CLS hence bad SEO
Require users to "Reply as Linked Topic"
Links not working
Using Posts as a Wiki?
Using Posts as a Wiki?
Is anyone working on a Discourse Wiki?
Using Posts as a Wiki?
Using Posts as a Wiki?
DiscoTOC & Brand Header - using together
Docs: Add link to top menu
Layouts Plugin
More than two levels of [details]
Category page with fixed organization of topics
Blog Post Styling
Inlink the topics within the same article
Navigating to local URL fragment doesn't modify browser history
Relating to Profile Picture Scroll Functionality
Copy pasting nested lists from Word into a post
Need to include PGN (chess game notation) in a post
How can I get a table of contents for my docs?
Linking to a heading within a post
Topic list on the right side
Set up Slack notifications using the discourse-chat-integration plugin
Wrong title in the history popup (firefox)
Possible to insert post in a topic
I created a bookmarklet to create the table of content for forum posts

4 篇帖子已拆分为新主题:如何将目录移到帖子左侧?

我不知道这个组件是如何实现的,对 Discourse 的前端结构也不太了解,所以我只能猜一下。

进度条是否可以只在 a) 主题中有多于 1 个帖子时显示,并且 b) 将其起点调整为从第 2 个帖子开始(而不是第 3 个),同时 c) 在两个元素中的一个元素上添加一些舒适的底部/顶部边距,以确保另一个元素有足够的距离(例如 1vh),以免看起来奇怪?

换句话说,不要使用整个第 2 个帖子作为间隙,而是使用 CSS 在它们之间留出一些空间(如果存在多于 1 个帖子)。

再说一遍,这可能完全没有意义,因为我对目前的工作方式了解不多。

3 个赞

您好!我们最近为论坛安装了 DiscoTOC,想知道是否可以让该组件读取图片中的 alt 文本?我们使用图片作为一些补丁说明的标题……

如下所示:
Performance and Stability

不幸的是,目录系统似乎无法解析图片作为标题,在列表中创建了一个空白条目,并创建了一个链接,该链接会将您带到一个空白页面。除了“不要使用图片”之外,还有没有其他解决方法?谢谢!除此之外,我们非常喜欢这个系统。

1 个赞

我猜解决方案是不将图片用作标题,但也许可以通过向您的网站添加一些代码来挂接到 DiscoTOC 代码中来实现。是否值得研究这一点,将取决于您使用帖子标题中的图片对您有多重要。

3 个赞

我们有一段时间以来一直在补丁说明中一致地使用图片作为标题,这是我们品牌和展示的一部分;不仅在论坛上,在 Steam 等地方也是如此。我们希望能够在继续使用 DiscoTOC 的同时继续使用图片作为标题,以保持一致性。

DiscoTOC 在其他方面也很棒,例如 AMA 总结、关于我们专用服务器启动器应用的综合帖子、新玩家指南等。我们非常喜欢这个系统,但希望在展示补丁说明的方式上能增加一点额外功能。

1 个赞

此组件的标题锚点功能与 2.7.0beta6 中添加的 自动标题链接 功能略有冲突,因为标题在悬停时会出现两个图标,一个来自 Discourse,一个来自 DiscoTOC。有没有解决的办法?

1 个赞

您好,

您可以通过以下方式隐藏 自动标题链接 锚点:

.anchor {
  display: none;
}

您好 dodesz,

我将帖子宽度设置得比默认值大得多,安装此组件后看起来有些不对劲,您能告诉我如何解决这个问题吗?

:heart: 谢谢!

Selection_839

1 个赞

在运行 Discourse 2.8.0.beta4(90232af778)的论坛上,启用 DiscoTOC 组件会导致错误消息:

oops

该组件以前也曾被激活,并且在之前安装的 Discourse 版本上也曾引发过问题,尽管我无法确定具体是哪个版本。

您能在您网站的错误日志中找到与该问题相关的任何错误消息吗?

该错误消息是后端错误,而 DiscoTOC 是一个前端主题组件,因此它们之间很难有关系。您是否安装了任何插件?

1 个赞

很遗憾,我在 /logs 中没有找到任何有用的信息。

我安装了,这是 app.yml 中相关的摘录:

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/discourse-openid-connect.git
          - git clone https://github.com/discourse/discourse-checklist.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-characters-required.git
          - git clone https://github.com/angusmcleod/discourse-news.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
          - git clone https://github.com/DNOeV/discourse-watch-category.git
          - git clone https://github.com/discourse/discourse-footnote.git
          - git clone https://github.com/discourse/discourse-knowledge-explorer.git
1 个赞

当标题位于引用块内时,该标题不会显示在目录 (TOC) 中。能否更改此行为?

此标题不会显示在 TOC 中

引用的内容

此标题会显示在 TOC 中

引用的内容

我不知道它是如何计划工作的,但通常不会,因为它属于引用的一部分,而不是该文本的标题。

2 个赞

您能否尝试改用 HTML <blockquote> 标签?这样可以将标题 # 放在一行的开头。

例如:

<blockquote>

### 锚点标题

</blockquote>

锚点标题

我没有在目录(TOC)中尝试过,但它似乎在常规帖子中与自动锚点标题一起有效。

您为什么希望标题在目录中以引号显示?您的使用场景是什么?

感谢您的建议。但对我来说没有效果。

这是我在“问题领域:年龄”下使用引用来直观地构建内容的一个示例

https://hub.youthpowercoalition.org/t/a-progressives-style-guide-toward-harnessing-language-in-support-of-intersectionality-and-cross-sector-power-building/285

3 个赞

你为什么那样使用引用? 告知来源就足够了。 此外,从语法上讲,那在英语中也是错误的。

这是个错误还是只是另一个用户,但是……我该如何关闭目录(TOC)?我正在寻找关于最终用户如何使用私人消息的一些基本说明,当然,我去了新用户文档并打开了目录,看看是否有任何信息。

我使用的是 iPad 和 DiscourseHub。

我看到了这个:

kuva

目录(TOC)看起来没问题。但它覆盖了文本,我无法让它再次隐藏。所以,我到底做错了什么,或者根本没做错?:pleading_face: