 |
摘要 | 自定义页眉链接 (Custom Header Links) 允许您轻松地向页眉添加基于文本的自定义链接。 |
 |
预览 | 在 Discourse 主题创建器上预览 |
 |
仓库链接 | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
不熟悉 Discourse 主题？ | 使用 Discourse 主题的初学者指南 |
安装此主题组件
功能
桌面端
移动端
(由于空间非常有限，不建议在移动设备上添加多个链接)
设置
| 设置 | 描述 |
|---|---|
custom_header_links |
要在页眉中显示的链接结构化列表。每个链接都通过一个带有单独字段的表单进行配置（见下文）。 |
links_position |
控制链接是出现在页眉的右侧（默认）还是靠近徽标的左侧。当设置为 left 时，所有链接都会在主题页面上自动隐藏，为主题标题腾出空间——无论单个链接的 hide_on_scroll 设置如何。 |
添加链接
链接是通过主题组件设置中的结构化表单进行配置的。点击 添加 以添加新链接。每个链接都有以下字段：
| 字段 | 必需 | 描述 |
|---|---|---|
| 文本 (Text) |  是 |
链接的可见标签。最多 100 个字符。这也决定了应用于链接的 CSS 类（见下文 CSS 自定义）。 |
| 标题 (Title) |  否 |
鼠标悬停在链接上时显示的工具提示文本。最多 1000 个字符。 |
| URL | 是 |
链接指向的 URL。可以是相对路径（例如 /faq）或完整 URL。最多 2048 个字符。 |
| 显示 (View) | 否 |
控制链接显示在哪个设备上。如果留空，链接将显示在所有设备上（与 vdm 相同）。见下文的值。 |
| 目标 (Target) | 否 |
控制链接的打开方式。如果留空，则默认为在新标签页中打开（与 blank 相同）。见下文的值。 |
| 滚动时隐藏 (Hide on scroll) | 否 |
控制在主题页面上当主题标题在页眉中可见时，链接是否隐藏。默认为 keep。仅在 links_position 设置为 right 时才适用——见下面的注释。见下文的值。 |
| 区域设置 (Locale) | 否 |
如果设置，仅当站点的页面语言与此值匹配时才显示链接。留空则在所有区域设置上显示链接。见下文的详细信息。 |
显示值 (View values):
| 值 | 行为 |
|---|---|
vdm |
在桌面和移动设备上都可见 |
vdo |
仅在桌面端可见 |
vmo |
仅在移动端可见 |
| (未设置) | 与 vdm 相同——在所有设备上可见 |
目标值 (Target values):
| 值 | 行为 |
|---|---|
blank |
在新标签页中打开 |
self |
在同一标签页中打开 |
| (未设置) | 默认为在新标签页中打开（与 blank 相同） |
滚动时隐藏值 (Hide on scroll values):
| 值 | 行为 |
|---|---|
keep |
即使主题标题在页眉中可见，链接也保持可见 (默认) |
remove |
在主题标题在主题页面上可见时，链接隐藏 |
hide_on_scroll仅在links_position为right时适用。 当links_position为left时，无论其单独的hide_on_scroll设置如何，所有链接都会在主题页面上一起隐藏。
以下是 hide_on_scroll 生效的示例（当 links_position 设置为 right 时）：
“点赞最多 (Most Liked)” 和 “隐私 (Privacy)” 设置为 keep，因此当标题展开时它们仍然可见。其他链接设置为 remove，因此当标题可见时它们会隐藏。此行为仅影响主题页面。
区域设置筛选
区域设置 (Locale) 字段允许您仅在站点设置为特定语言时才显示链接。这对于希望为每种语言设置不同页眉链接的多语言社区非常有用。
- 将字段设置为区域设置代码，例如
en、de、fr、zh_CN等。 - 匹配是不区分大小写的，并且
-和_分隔符被视为相同——因此en-US、en_US和en_us都相等匹配。 - 如果区域设置字段留空，则链接在所有区域设置上都显示。这对于大多数单语言站点是推荐的设置。
- 链接元素上还会添加一个 CSS 类
headerLink--{locale}，可用于额外的 CSS 定位。
常见问题： 如果您的链接未出现，请检查您是否不小心设置了一个与您站点配置的语言不匹配的
locale值。留空 locale 字段是安全的，并且将始终显示链接。
CSS 自定义
每个链接都会自动获得一个派生自其 文本 (Text) 值的 CSS 类：空格被替换为连字符，文本被转换为小写，并在末尾追加 -custom-header-links。
例如：
- 文本为
Privacy的链接将获得类privacy-custom-header-links - 文本为
Visit Shop的链接将获得类visit-shop-custom-header-links
样式化所有页眉链接：
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
样式化特定链接（例如，文本为“Privacy”的链接）：
.custom-header-links .headerLink.privacy-custom-header-links a {
color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
color: var(--tertiary-high);
}
根据登录状态显示或隐藏链接：
Discourse 会为未登录用户在 <html> 标签上添加 anon 类。您可以使用此条件性地显示或隐藏链接：
/* 隐藏“仪表板 (Dashboard)”对未登录用户的显示 */
html.anon .dashboard-custom-header-links {
display: none;
}
/* 隐藏“注册 (Sign Up)”对已登录用户的显示 */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
display: none是一种仅影响视觉的隐藏机制。链接的 HTML 仍然存在于页面源代码中。请勿使用此方法来保护敏感或需要访问控制的 URL。
使用 CSS 重新排序链接（使用 flexbox 的 order）：
.custom-header-links li {
&:nth-child(1) { order: 3; }
&:nth-child(2) { order: 1; }
&:nth-child(3) { order: 2; }
}
使用 /my 路径用于用户特定链接，以避免硬编码用户名：
/my/messages → 当前用户的收件箱
/my/activity → 当前用户的活动
由我们托管？ 主题组件可在我们的 Pro、Business 和 Enterprise 套餐中使用。
更新日志亮点：
custom_header_links设置已从逗号分隔的列表格式迁移到结构化的type: objects表单 UI。如果您以前使用旧的逗号分隔文本输入配置了链接，迁移应该会自动保留您的数据。