动态侧边栏图标

安装此主题组件

:woman_technologist:t2: 概述

这是一个轻量级的 Discourse 主题组件,可根据侧边栏的打开或关闭状态动态更改标题栏中的侧边栏切换图标。

默认情况下,当侧边栏关闭时,该组件显示标准汉堡菜单图标(bars),当侧边栏打开时,则过渡为关闭 X 图标(xmark)。

管理员可以指定自定义图标,并选择是否在移动端视图中启用(虽然该组件的动态特性仅适用于非移动端视口大小,但更改了打开图标的管理员可能希望保持与移动端用户体验的一致性)。


:star: 特性

  • 为用户提供清晰的视觉反馈,以便了解如何与侧边栏进行交互。
  • 管理员可以通过主题设置轻松将默认图标替换为任何 FontAwesome 图标。
  • 允许为移动端视口启用替换后的侧边栏图标,以保持用户体验的一致性。

:movie_camera: 视频截图

组件默认设置:

使用 dogcat 图标:


:wrench: 设置

通过编辑组件设置来自定义用于打开和关闭侧边栏的图标:

setting description
Icon_to_open_the_sidebar 侧边栏收起时显示的图标
(默认值:bars
Icon_to_close_the_sidebar 侧边栏展开时显示的图标
(默认值:xmark
Apply_open_icon_on_mobile 在移动端视口应用自定义“打开”图标
(默认值:false

:warning: 注意事项

  • 如果使用的自定义图标未包含在 Discourse 核心中,它们将显示为空白;要解决此问题,您必须将自定义图标(例如 rocketcat)添加到 Discourse 管理设置中的 SVG icon subset 站点设置中(参见 All Site SettingsSVG icon subset)。
  • 此组件不适用于标题下拉模式。

查看我的其他 Discourse 作品
14 个赞

我已重构了该组件,并新增了一个布尔设置项“在移动设备上应用打开图标”(默认禁用)。这样,管理员若将打开图标从默认的“bars”更改后,可选择在移动视口尺寸下启用该图标,以保持用户体验的一致性。由于移动侧边栏的行为有所不同,在小型视口尺寸下激活侧边栏时,图标不会发生变化。我也已更新了原始帖子。

5 个赞