 |
摘要 | 为您的网站添加一个进度条 |
 |
预览 | \[todo\] |
 |
代码仓库 | \u003chttps://github.com/Canapin/Discourse-progress-bar\u003e |
 |
安装指南 | 如何安装主题或主题组件 |
 |
Discourse 主题新手？ | Discourse 主题使用入门指南 |
安装此主题组件
Discourse 进度条
描述
此组件可为您网站的任何可用出口添加一个进度条。
最好与脚本结合使用，该脚本通过向 /admin/theme/[theme_component_ID]/setting 发送 PUT 请求并附带负载 {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"} 来自动更新进度条的值。
进度条已优化，可适应以下出口：
above-main-containerabove-site-headerbefore-header-panelbelow-site-headerbefore-sidebar-sections
用例
此组件旨在公开显示社区众筹的捐赠进度。
一个自定义脚本使用了 Ko-fi 的 Webhooks 来为每笔捐赠动态更新进度条。
拥有一个进度条对社区来说是一个巨大的 
激励，促使大家捐款。
以前，只使用了一个固定的主题帖，捐赠目标用了几个月才达成。
有了进度条，在过去几年里，捐赠目标在几天内就达成了！
这个进度条显然也可以用于其他目的。欢迎分享您用它来做什么！
截图
桌面端
above-main-container
before-sidebar-sections
above-site-header
before-header-panel (仅限桌面端)
below-site-header
移动端
above-main-container 和 below-site-header
before-sidebar-sections
above-site-header
设置
| 设置 | 描述 |
|---|---|
| content_before | 显示在进度条上方的文本（允许 HTML）。默认值：\u003cstrong\u003e捐赠进度\u003c/strong\u003e |
| content_after | 显示在进度条下方的文本（允许 HTML）。默认值：空 |
| progress_bar_width | 进度条容器的宽度。默认值：50% |
| progress_bar_height | 进度条的高度。默认值：10px |
| max_value | 进度条的最大值。默认值：300 |
| current_value | 进度条的当前值。默认值：150 |
| value_display | 显示在进度条旁边的值显示格式。可用占位符：{current}、{max}、{percentage}。示例：{percentage}% 显示 33%。{current} of {max} rubber ducks 显示 9 of 15 rubber ducks。默认值：{percentage}% |
| hide_when_full | 进度条满时隐藏。默认值：false |
| outlet_name | 显示进度条的网站位置。推荐的出口：above-main-container、above-site-header、before-header-panel、below-site-header、before-sidebar-sections。默认值：above-main-container |
| display_on_mobile | 在移动设备上显示进度条。默认值：true |
| display_on_homepage | 在主页上显示进度条。默认值：true |
| url_must_contain | 显示进度条的 URL。默认值：`/latest |
| progress_bar_color | 有效的 CSS background 值。示例：#FC0FC0rgb(252,15,192)var(--tertiary)linear-gradient(0deg, white 0%, var(--tertiary) 100%)注意：如果为空，则使用从红色 (0%) 到绿色 (100%) 的动态颜色。默认值： var(--tertiary) |
感谢
感谢 @Arkshine 在代码方面提供的帮助和建议 