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