Discourse 动态侧边栏图标

安装此主题组件

:woman_technologist:t2: 概述

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

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

管理员可根据需要指定自定义图标,并可选择在移动视图上启用该功能(尽管该组件的动态特性仅适用于非移动视口大小,但更改“打开”图标的管理员可能希望与移动用户体验保持一致)。


:star: 功能

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

:movie_camera: 视频截图

组件默认效果:

使用 dogcat 图标:


:wrench: 设置

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

设置项 说明
Icon_to_open_the_sidebar 侧边栏折叠时显示的图标
(默认:bars
Icon_to_close_the_sidebar 侧边栏展开时显示的图标
(默认:xmark
Apply_open_icon_on_mobile 在移动视口中应用自定义的“打开”图标
(默认:false

:warning: 注意事项

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

查看我的其他 Discourse 内容
12 个赞

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

3 个赞