scavin
(scavin)
1
我很高兴与大家分享一个新主题组件，它可以为您的 Discourse 社区添加优雅的时间线布局！
这是我第一个主题组件，在大型语言模型的帮助下构建而成。
这是什么？
Discourse Timelines 是一个主题组件，它实现了自定义 BBCode [timelines]...[/timelines]，用于创建精美、极简的时间线布局。非常适合项目路线图、分步指南、公司历史、章节划分等。
已发布的事件线效果
编辑器工具栏按钮
Markdown 编辑器视图
主要特点
自定义 BBCode - 简单的 [timelines] 语法
编辑器工具栏按钮 - 无需手动输入标签（解决了新编辑器括号转义问题！）
精美设计 - 带有干净、极简美学的垂直渐变线
Markdown 支持 - 保留时间线内的所有格式
多语言 - 内置 9 种语言的翻译（EN、ZH_CN、ZH_TW、DE、ES、FR、JA、KO、RU）
主题兼容 - 兼容浅色和深色模式
可定制 - 可通过管理员设置轻松更改颜色
响应式 - 移动友好布局
安全 - 内置 XSS 防护
无依赖 - 仅使用 Discourse 原生 API
用法
使用工具栏按钮（最简单！）
- 打开编辑器
- 点击 “+”（选项） 菜单按钮
- 选择 “插入时间线”
- 编辑您的内容
- 发布！
工具栏按钮解决了新 Discourse 编辑器自动转义手动输入的方括号的问题。
示例语法
[timelines]
## 2024 年 1 月 - 项目启动
项目正式启动，团队组建。
## 2024 年 3 月 - 首次发布
核心功能开发完成，开始进行 Beta 测试。
## 2024 年 6 月 - 2.0 版本
主要更新，包含新功能：
- 功能 A
- 功能 B
- 功能 C
[/timelines]
定制
所有颜色都可以通过主题设置进行定制：
- timeline_gradient_start - 顶部渐变色（默认：
#ff7a18）
- timeline_gradient_end - 底部渐变色（默认：
#ffb800）
- timeline_heading_color - 标题文本颜色（默认：
#d96d14）
- timeline_dot_color - 时间线点颜色（默认：
#ff7a18）
- timeline_heading_color_dark - 深色模式标题颜色（默认：
#ff9854）
- timeline_dot_border_color_dark - 深色模式点边框颜色（可选）
希望您觉得这个组件有用！如果您有任何问题、反馈或建议，请告诉我。 
23 个赞
这是否适用于 DiscoTOC？
它似乎依赖于较大的标题，这使得 TOC 层次结构稍微缺乏灵活性。
scavin
(scavin)
7
我用 DiscoTOC 测试了，没有发现任何问题。
我在演示页面上添加了一个目录（TOC）——欢迎打开查看其工作原理。
1 个赞
感谢您的参考。
当在带有自动目录（autoTOC）的帖子中使用它时，它依赖于标题 2 和 3 的 Markdown 标记而显得突出。是否有任何方法可以将其更改为使用标题 4 或 5（或两者都使用）以获得更大的灵活性？
如果时间线出现在目录层次结构的更下方，例如在标题 2 或 3 之后，会导致目录在视觉上看起来没有顺序。
编辑：我可以将它包装在 [details] 标签中，这样时间线标题就不会显示在目录中。就我而言，这是一个合理的变通方法。
2 个赞
scavin
(scavin)
10
您现在无需变通方法即可将时间轴标题排除在目录 (TOC) 之外：
在 [timelines] 中使用伪标题，方法是在前面加上 ##!（用于 H2 样式）或 ###!（用于 H3 样式）。
示例：
[timelines]
##! 2020 – 基础
内容…
[/timelines]
这些在时间轴内部渲染为 H2/H3，但不会被视为真正的标题，因此无论时间轴位于何处，自动目录 (autoTOC) 都能保持整洁。
如果您希望时间轴的标题保留在目录中，请继续使用正常的 ##/###。
目前，如果 [timelines] 中有任何一个 ##!（或 ###!），目录将跳过整个时间轴。
目前尚不支持在同一个时间轴中混合使用这两种样式。
您现在可以混合使用它们：##/### 仍然会显示在目录中，而 ##!/###! 只在时间轴内部渲染，并保留在目录之外。
请更新组件并试用一下。
2 个赞
那是一个巧妙的变通方法！
这似乎在以下情况下可以正常工作：
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
但对于一个伪标题紧跟在另一个格式化列表之后的列表则不行：
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
第一个伪标题也更倾向于与开头的 [timelines] 标签保持在同一行，以避免在上方格式化一个空行。例如：
[timelines]##! 2020 - Foundation
Content...
[/timelines]
否则，第一个伪标题上方会出现一个间隙，就像它是一个常规的、非标题的、时间线块行一样。
感谢您在这方面所做的工作，它现在变得越来越灵活易用了。
scavin
(scavin)
12
感谢您指出这个问题。
我看到了同样的情况。目前，以下这些可以正确渲染：
[timelines]##! 2020 - Foundation
Content...
[/timelines]
和
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
但是这个不行：
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
我正在研究这个问题，但还没有确定正确的修复方法。 
1 个赞
