| 摘要 | 使侧边栏切换图标动态化且可自定义 | |
| 仓库 | https://github.com/Lillinator/dynamic-sidebar-icon | |
| 预览 | https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon | |
| 安装指南 | 如何安装主题或主题组件 |
安装此主题组件
概述
这是一个轻量级的 Discourse 主题组件,可根据侧边栏的打开或关闭状态动态更改标题栏中的侧边栏切换图标。
默认情况下,当侧边栏关闭时,该组件显示标准汉堡菜单图标(bars),当侧边栏打开时,则过渡为关闭 X 图标(xmark)。
管理员可以指定自定义图标,并选择是否在移动端视图中启用(虽然该组件的动态特性仅适用于非移动端视口大小,但更改了打开图标的管理员可能希望保持与移动端用户体验的一致性)。
特性
- 为用户提供清晰的视觉反馈,以便了解如何与侧边栏进行交互。
- 管理员可以通过主题设置轻松将默认图标替换为任何 FontAwesome 图标。
- 允许为移动端视口启用替换后的侧边栏图标,以保持用户体验的一致性。
视频截图
组件默认设置:
使用 dog 和 cat 图标:
设置
通过编辑组件设置来自定义用于打开和关闭侧边栏的图标:
| setting | description |
|---|---|
Icon_to_open_the_sidebar |
侧边栏收起时显示的图标 (默认值: bars) |
Icon_to_close_the_sidebar |
侧边栏展开时显示的图标 (默认值: xmark) |
Apply_open_icon_on_mobile |
在移动端视口应用自定义“打开”图标 (默认值: false) |
注意事项
- 如果使用的自定义图标未包含在 Discourse 核心中,它们将显示为空白;要解决此问题,您必须将自定义图标(例如
rocket、cat)添加到 Discourse 管理设置中的SVG icon subset站点设置中(参见All Site Settings→SVG icon subset)。 - 此组件不适用于标题下拉模式。
查看我的其他 Discourse 作品
