| 摘要 | Header Submenus 允许您使用纯文本构建带有子菜单的头部菜单! | |
| 预览 | 在 Discourse Theme Creator 上预览 | |
| 仓库链接 | https://github.com/discourse/discourse-header-submenus | |
| 初次使用 Discourse 主题? | Discourse 主题使用新手指南 |
安装此主题组件
功能
桌面端
移动端
设置
| 名称 | 描述 |
|---|---|
| 菜单项 | 添加菜单项。每行一个项目,顺序为:文本、图标、标题、视图。 |
| 子菜单项 | 添加子菜单项。每行一个项目,顺序为:父级、文本、图标、URL、目标、标题。 |
| SVG 图标 | 为上述列表中使用的每个图标包含 FontAwesome 图标类。 |
| 固定模式 | 强制菜单始终显示在屏幕顶部,无论滚动位置如何 - 仅限桌面端 |
| 显示箭头 | 在菜单项旁边显示箭头图标 |
| 反转位置 | 在屏幕的另一侧显示菜单项 |
| 菜单背景 | 菜单的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 菜单项颜色 | 菜单项的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 菜单项活动背景 | 菜单项处于活动状态时的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 菜单项活动颜色 | 菜单项处于活动状态时的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 子菜单背景 | 子菜单的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 子菜单项颜色 | 子菜单项的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 子菜单项悬停背景 | 子菜单项悬停时的背景颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 子菜单项悬停颜色 | 子菜单项悬停时的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
| 分隔线颜色 | 子菜单中分隔线的颜色。 (十六进制、rgb、rgba 或 CSS 颜色名称) |
共有四组设置
-
菜单项
输入您希望出现在菜单上的项目。每行一个逗号分隔的项目,顺序如下
文本, 图标, 标题, 视图文本:菜单上显示的内容。
图标:项目旁边显示的图标。如果您不想使用图标,请使用none。
标题:鼠标悬停在项目上时显示的文本。
视图:选择项目显示的设备。
vdm同时出现在桌面端和移动端
vdo仅出现在桌面端,
vmo仅出现在移动端。由于空间有限,不建议在移动端添加超过 3-4 个项目。
-
子菜单项
输入您希望添加到菜单的子菜单项列表。每行一个逗号分隔的项目,顺序如下
父级, 文本, 图标, URL, 目标, 标题父级:此子菜单项应显示在其下方的父菜单项的名称。使用上述列表中的
文本值。
文本:此子菜单项显示的文本。
图标:此子菜单项的图标,如果不需要图标,请使用none。
URL:此菜单项链接到的路径。您也可以使用相对路径。
目标:选择此项是在新标签页中打开还是在同一标签页中打开。使用blank在新标签页中打开链接,或使用self在同一标签页中打开。
标题:鼠标悬停在项目上时显示的文本。
分隔线:您还可以在子菜单项之间添加分隔线。要添加分隔线,请使用父级, divider。
以下是一个涵盖上述第 1 点和第 2 点的快速示例:
假设我想添加一个名为 Design 的菜单项,并向其子菜单添加一些项目,如下所示
我首先将其作为 menu_item 输入
Design, magic, Get inspired!, vdm
然后将这些作为 sub_menu 项输入
Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!
就是这样!
主题默认带有一个占位符菜单,请查看该菜单,如果您有问题请随时提问。
-
布局选项。
这些选项不言自明
-
颜色选项
这些选项默认为空,但如果您在此处添加颜色,它将覆盖基于当前配色方案的组件默认值。
由我们托管? 主题组件在我们的 Standard、Business 和 Enterprise 计划中均可使用。







