Discourse Qingwa Timelines - 美观时间线布局的自定义BBCode

:information_source: 摘要 一个用于创建精美时间线布局的 Discourse 主题组件
:eyeglasses: 预览 https://meta.appinn.net/t/topic/76953
:hammer_and_wrench: 仓库 GitHub - scavin/discourse-qingwa-timelines
:question: 安装指南 如何安装主题或主题组件
:open_book: 首次使用 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

我很高兴与大家分享一个新主题组件,它可以为您的 Discourse 社区添加优雅的时间线布局!

这是我第一个主题组件,在大型语言模型的帮助下构建而成。

这是什么?

Discourse Timelines 是一个主题组件,它实现了自定义 BBCode [timelines]...[/timelines],用于创建精美、极简的时间线布局。非常适合项目路线图、分步指南、公司历史、章节划分等。

已发布的事件线效果

编辑器工具栏按钮

Markdown 编辑器视图

主要特点

:white_check_mark: 自定义 BBCode - 简单的 [timelines] 语法
:white_check_mark: 编辑器工具栏按钮 - 无需手动输入标签(解决了新编辑器括号转义问题!)
:white_check_mark: 精美设计 - 带有干净、极简美学的垂直渐变线
:white_check_mark: Markdown 支持 - 保留时间线内的所有格式
:white_check_mark: 多语言 - 内置 9 种语言的翻译(EN、ZH_CN、ZH_TW、DE、ES、FR、JA、KO、RU)
:white_check_mark: 主题兼容 - 兼容浅色和深色模式
:white_check_mark: 可定制 - 可通过管理员设置轻松更改颜色
:white_check_mark: 响应式 - 移动友好布局
:white_check_mark: 安全 - 内置 XSS 防护
:white_check_mark: 无依赖 - 仅使用 Discourse 原生 API

用法

使用工具栏按钮(最简单!)

  1. 打开编辑器
  2. 点击 “+”(选项) 菜单按钮
  3. 选择 “插入时间线”
  4. 编辑您的内容
  5. 发布!

工具栏按钮解决了新 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 - 深色模式点边框颜色(可选)

希望您觉得这个组件有用!如果您有任何问题、反馈或建议,请告诉我。 :blush:

20 个赞

这是一个非常好的组件!非常有用。

3 个赞

这是否也支持图片/视频?

是的,它同时支持图片和视频。

这是一个快速演示[DEMO LINK]

Screen-20251114144915@2x
Screen-20251114144924@2x

1 个赞

确实非常甜美。很棒的作品!