# 自定义页眉链接

**URL:** https://meta.discourse.org/t/custom-header-links/90588
**Category:** Theme component
**Tags:** official, custom-header-links
**Created:** [2018年六月24日 10:22 UTC](https://meta.discourse.org/t/custom-header-links/90588 "2018-06-24T10:22:32Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2018年六月24日 10:22 UTC](https://meta.discourse.org/t/custom-header-links/90588/1 "2018-06-24T10:22:33Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **摘要** | **自定义页眉链接** (Custom Header Links) 允许您轻松地向页眉添加基于文本的自定义链接。 |
| 👓 | **预览** | [在 Discourse 主题创建器上预览](https://discourse.theme-creator.io/theme/Discourse/custom-header-links) |
| 🛠 | **仓库链接** | [GitHub - discourse/discourse-custom-header-links · GitHub](https://github.com/discourse/discourse-custom-header-links) |
| 📖 | **不熟悉 Discourse 主题？** | [使用 Discourse 主题的初学者指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

安装此主题组件

> [@](#):
>
> :discourse2: 由于这是由 Discourse 团队维护的 #official 主题组件，您可以在 Meta 上的相应类别中提出 #support、#contribute:bug、#Contribute > UX 和 #Contribute > Feature 请求，并添加适当的主题组件标签。点击下面的链接即可开始。👍  
> &nbsp; [❓ **支持**](https://meta.discourse.org/new-topic?category_id=6&tags=custom-header-links "就自定义页眉链接的配置和使用请求支持") &nbsp; [🐛 **错误**](https://meta.discourse.org/new-topic?category_id=1&tags=custom-header-links "错误报告意味着有东西坏了，阻止了主题组件的正常/典型使用") &nbsp; [👀 **用户体验**](https://meta.discourse.org/new-topic?category_id=9&tags=custom-header-links "关于自定义页眉链接的用户界面，以及功能如何呈现的讨论（包括语言和 UI 元素）") &nbsp; [💡 **功能**](https://meta.discourse.org/new-topic?category_id=2&tags=custom-header-links "讨论如何改进或增强现有的自定义页眉链接功能，以及提议的新功能如何运作")

* * *

### 功能

**桌面端**

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/7/c/7cb9a838779ef257f37c10423b77989c8c6a35f2.PNG)

**移动端**

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/c/6/c61c67aa5641eb12988908418c99c1d13ff795ff.PNG)  
_(由于空间非常有限，不建议在移动设备上添加多个链接)_

* * *

### 设置

| 设置 | 描述 |
| --- | --- |
| `custom_header_links` | 要在页眉中显示的链接结构化列表。每个链接都通过一个带有单独字段的表单进行配置（见下文）。 |
| `links_position` | 控制链接是出现在页眉的 **右侧** （默认）还是靠近徽标的 **左侧** 。当设置为 `left` 时，所有链接都会在主题页面上自动隐藏，为主题标题腾出空间——无论单个链接的 `hide_on_scroll` 设置如何。 |

* * *

### 添加链接

链接是通过主题组件设置中的结构化表单进行配置的。点击 **添加** 以添加新链接。每个链接都有以下字段：

| 字段 | 必需 | 描述 |
| --- | --- | --- |
| **文本 (Text)** | ✅ 是 | 链接的可见标签。最多 100 个字符。这也决定了应用于链接的 CSS 类（见下文 [CSS 自定义](#css-customisation)）。 |
| **标题 (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` 时）：

 ![headerLinks](https://global.discourse-cdn.com/meta/original/3X/d/5/d525ef2e895620a6e09871b6ebe7d2a1cad8d82c.gif)

**“点赞最多 (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`

**样式化所有页眉链接：**

```scss
.custom-header-links .headerLink a {
  font-size: var(--font-up-1);
  color: var(--header_primary);
}

```

**样式化特定链接** （例如，文本为“Privacy”的链接）：

```scss
.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` 类。您可以使用此条件性地显示或隐藏链接：

```scss
/* 隐藏“仪表板 (Dashboard)”对未登录用户的显示 */
html.anon .dashboard-custom-header-links {
  display: none;
}

/* 隐藏“注册 (Sign Up)”对已登录用户的显示 */
html:not(.anon) .sign-up-custom-header-links {
  display: none;
}

```

> ⚠ CSS `display: none` 是一种 **仅影响视觉** 的隐藏机制。链接的 HTML 仍然存在于页面源代码中。请勿使用此方法来保护敏感或需要访问控制的 URL。

**使用 CSS 重新排序链接** （使用 flexbox 的 `order`）：

```scss
.custom-header-links li {
  &:nth-child(1) { order: 3; }
  &:nth-child(2) { order: 1; }
  &:nth-child(3) { order: 2; }
}

```

**使用 `/my` 路径用于用户特定链接** ，以避免硬编码用户名：

```plaintext
/my/messages → 当前用户的收件箱
/my/activity → 当前用户的活动

```

* * *

> :discourse2: **由我们托管？** 主题组件可在我们的 Pro、Business 和 Enterprise 套餐中使用。

* * *

> **更新日志亮点：**
> 
> - `custom_header_links` 设置已从逗号分隔的列表格式迁移到结构化的 `type: objects` 表单 UI。如果您以前使用旧的逗号分隔文本输入配置了链接，迁移应该会自动保留您的数据。

---

_[View the full topic](https://meta.discourse.org/t/custom-header-links/90588)._