DiscoTOC - 自动生成目录

:discourse2: 摘要 DiscoTOC 允许您一键为主题生成交互式目录!
:eyeglasses: 预览 在 Discourse 主题创建器上预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/DiscoTOC
:open_book: Discourse 主题新手? Discourse 主题使用入门指南

安装此主题组件

示例

桌面端

移动端

功能

toc = table of contents(目录)

  • 通过编辑器齿轮菜单中的按钮自动生成整个目录

  • 目录将始终显示在屏幕上 - 随内容滚动,类似于主题进度小部件

  • 当您滚动经过主题中的各个部分时,目录中的活动元素将被设置为活动状态(蓝色高亮)

  • 每个目录条目都链接到标题的锚点,因此您也可以从其他主题或帖子链接到特定部分

  • 点击目录中的任何链接都会指示浏览器导航到相关部分(平滑滚动)

  • 在有回复的主题中,目录 / 时间线 按钮让读者在目录和普通主题时间线之间切换。该选择会在浏览器中记住

  • Discourse Docs 插件兼容

  • 可选支持回复中的目录,而不仅仅是第一帖

  • RTL 支持

它是如何工作的?

简而言之,它查找标记为具有目录的主题中的标题(通过编辑器按钮),如果当前主题被标记,则它会获取所有标题并将它们放入目录中(按标题级别嵌套) - 这意味着您的 Markdown 必须在语法上正确

# 标题 1
## 标题 2
### 标题 3
#### 标题 4
##### 标题 5

您可以自由地在标题级别之间来回切换,但顺序必须正确

# 标题 2
## 标题 3
## 标题 3
### 标题 4
## 标题 3
# 标题 2

等等...

关于哪些标题兼容的一些须知

  • 包含 h1h5h6 不包含
  • 引用内的标题会被忽略,因此引用不会污染目录
  • 仅当帖子中的标题数量至少达到 TOC min heading 设置(默认为 3)时,目录才会出现

目录中的链接是如何工作的?

已渲染帖子中的每个标题都会获得一个形式的锚点 p-<post id>-<heading slug>-<number> — 这是标题背后的目标。DiscoTOC 链接到这些锚点,而不是发明自己的锚点。

因为这些锚点包含标题在帖子中的位置,所以如果您重新排序或重命名标题,它们会发生变化。如果您从其他地方链接到各个部分,您可以在标题上方添加稳定的命名锚点:

<div><a name="my-section"></a></div>
## 我的部分

然后链接到 /t/your-topic-slug/1234#my-section。Discourse 允许在帖子中使用 <a name="...">。DiscoTOC 自己的条目仍将使用核心标题锚点,但您的锚点无论编辑如何都会继续工作。

设置

名称 描述
minimum trust level to create TOC 在编辑器中看到目录按钮所需的最小信任级别
composer toc text 出现在编辑器顶部,指示主题将有目录的文本
auto TOC categories 自动启用目录的分类
auto TOC tags 自动在带有这些标签的主题上启用目录
enable TOC for replies 允许回复中的目录。回复中的目录不受 auto TOC tagsauto TOC categories 设置的影响,必须手动插入
TOC min heading 显示目录所需的最小标题数量

composer toc text 是出现在编辑器预览中的内容,用于指示将生成目录:

翻译

翻译 默认值
table_of_contents table of contents
insert_table_of_contents Insert table of contents
jump_bottom Jump to end
toggle_toc.show_timeline Timeline
toggle_toc.show_toc Contents
table_of_contents: "table of contents"

这用于移动设备上打开目录的按钮

insert_table_of_contents: "Insert table of contents"

这用作编辑器齿轮菜单中目录按钮的文本

toggle_toc.show_toc: "Contents"
toggle_toc.show_timeline: "Timeline"

这些标签用于在目录和主题时间线之间切换的按钮

我如何创建目录?

  1. 编写具有语法正确标题的主题
  2. 点击编辑器齿轮菜单中的目录按钮。默认情况下,它仅出现在主题的第一帖中;启用 enable TOC for replies 设置以在回复中也使用它
  3. 获利。

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

没有空间同时显示两者,因此在有目录的主题中,当您在第一帖时,主题进度小部件被隐藏,您看到的是目录。一旦您滚动过第一帖,目录将被常规的主题进度小部件替换,当您阅读回复时。(如果启用了 enable TOC for replies,拥有自己目录的回复将显示该目录。)

在有多于一帖的主题中,目录 / 时间线 按钮让读者在两者之间切换,并且偏好会在他们的浏览器中记住。

在窄屏幕上,目录通过主题进度区域中的按钮作为覆盖层打开。

使用此组件有任何缺点吗?

几乎所有事情都在客户端发生,因此您可以随时删除组件,您的帖子将像以前一样渲染。唯一触及您内容的是编辑器按钮:它将帖子包装在 <div data-theme-toc="true"> 标记中,这是组件知道帖子应该有目录的方式。如果您卸载组件,该包装器会留在帖子中,但没有可见效果。

局限性

h6 标题和引用内的标题不包含在目录中。

致谢

这最初是 Greg Franko 的 tocify.js 库的硬分叉,此后已重写为原生 Ember 组件。没有外部依赖或请求。

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

:discourse2: 由我们托管? 主题组件可在我们的 Pro、Business 和 Enterprise 计划中使用。

182 个赞
Automatic Table of Contents generation
Creative Uses of Discourse
Wiki improvement – Split content into multiple sections?
:cn: DiscoTOC 自动内容表格
Traditional multi level hierarchy vs flat discourse hierarchy
What are the different ways to customize content inside a post (custom attributes and such)
Is anyone working on a Discourse Wiki?
Tagged topic progress bar - feasible or not?
Big Header - Little Header
Timeline with labelled step by step sections - how is this achieved?
How to get topic navigation menu
Theme Components - Can Discourse hosted sites install them?
Reader Mode
How To Add Marker To Table Of Contents Feature?
How do you create a table of content like this one?
How can i show a floating sticky 300x250 Adsense Ad on right side bar of topic page above the fold?
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
Layouts Plugin
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?
?page=n URLs have high CLS hence bad SEO
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
Living with corrupted SVGs for almost a year. Need Help!
Wiki table of contents on pro plan
Auto-Linkify Words
Missing strings (DiscoTOC)
Copy pasting nested lists from Word into a post
:cn: Discourse Post Formatting Guide 加点格式,让帖子多姿多彩
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
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
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
How to add table of content sidebar beside a topic?

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: