# 自定义页眉，添加链接、图标或菜单

**URL:** <https://meta.discourse.org/t/customize-the-header-with-links-icons-or-menus/13368>\
**Category:** Site Management\
**Tags:** how-to, customization\
**Created:** [2019年一月21日 17:07 UTC](https://meta.discourse.org/t/customize-the-header-with-links-icons-or-menus/13368 "2019-01-21T17:07:00Z")\
**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:** [2019年一月21日 17:07 UTC](https://meta.discourse.org/t/customize-the-header-with-links-icons-or-menus/13368/1 "2019-01-21T17:07:00Z")

</div>

> 🔖 本指南专为希望通过添加链接、图标或菜单来美化网站页眉的用户而设计。无论您是使用简单的_主题组件_还是选择更复杂的自定义设置，本手册都提供了清晰的分步说明，以帮助您根据需要进行更改，无论您的技术水平如何。
> 
> 🙋 所需用户级别：管理员

## 简单方法（主题组件）

每个_主题组件_都有所不同，因此在选择最适合您网站的组件之前，请阅读有关各种组件的主题。

1. [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588) 在页眉 **内部** 、放大镜旁边创建一个菜单  

2. [Custom Header Links (icons)](https://meta.discourse.org/t/iconified-header-links/86307) 在放大镜旁边创建 **可点击的图标**  

3. [Brand Header](https://meta.discourse.org/t/brand-header-theme-component/77977) 在页眉 **上方** 创建一个菜单  

4. [Header Submenus](https://meta.discourse.org/t/header-submenus/94584) 在页眉 **上方创建带子菜单的菜单**  

每个组件都可以在单独的样式表上进一步自定义，这样在组件更新时您的更改就不会被覆盖。您只需要了解一点 CSS 知识，就可以按照自己的喜好设置页眉的样式。

这些解决方案的优点是所有这些组件都由 Discourse 团队进行管理、维护和更新，并且它们已经适用于移动设备。

## 困难的方法

构建您自己的自定义设置。

要执行此操作，您需要阅读至少 [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 和 [https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648。](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648%E3%80%82)

熟悉 Discourse 主题后，您就可以开始构建自己的主题了。

#### 试一试

选择 `common` 选项卡，然后将您的自定义 HTML 添加到 `Before Header` 选项卡中。如果需要特定于平台的自定义设置，在“显示高级设置”切换下也可以找到 `desktop` 和 `mobile` 选项卡，但建议从 `common` 开始。

例如，您可以开始将菜单的 HTML 部分添加到 `Before Header` 选项卡中

```html
 <div>
   <span id="top-navbar-links">
     <a href="http://example.com">Home</a>
     <a href="http://example.com/about/">About</a>
     <a href="http://example.com/news/">News</a>
     <a href="http://example.com/products/">Products</a>
     <a href="http://blog.example.com/blog">Blog</a>
     <a href="http://forums.example.com/">Forums</a> 
   </span>
 </div>

```

这将创建您的基本菜单：

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/6/86c4ab2383781ba3dc42708c66c3e45db7a7943b.png)

现在您可以添加适当的 CSS 来美化页眉。

将您的 CSS 添加到 `CSS` 选项卡中，例如

```css
//将菜单对齐到网站徽标
#top-navbar {
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    max-width: 1110px;
    //您可以将菜单向左、向中或向右移动
    text-align: center; 
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/4/f44cf24c418e3e015377007a9ccef1c845303545.png)

并开始自定义您的菜单：

```css
#top-navbar-links a {
    font-size: larger;
    color: #CD0604;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 0 3px;
    margin-right: 10px;
    //等等
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/d/8d96f2005c43d22bf55ece3dcbc604a9b64635a5.png)

### 技巧与窍门

#### 仅对访客（或仅对已登录用户）显示菜单

您可以仅对未注册访客显示菜单，并对已登录用户隐藏它。  
只需将此 `display: none;` 添加到您的 CSS 中

```css
#top-navbar {
    [...]
    display: none;
}

```

并添加一条新规则：

```css
.anon #top-navbar {
    display: block;
}

```

您可以通过反转 `display` 属性的规则来执行相反的操作：

```css
#top-navbar {
    [...]
    display: block;
}

```

```css
.anon #top-navbar {
    display: none;
}

```

这样只有已登录的用户才能看到菜单

#### 仅对群组的成员显示菜单

这仅适用于_主要_群组！

```css
body:not(.primary-group-GROUP-NAME) #top-navbar {
  display: none;
}

```

将 `GROUP-NAME` 更改为有权查看菜单的群组的名称。

#### 在外部选项卡中打开链接

在您的 HTML 代码中添加属性

```html
target="_blank"

```

例如：

```html
 <div>
   <span id="top-navbar-links">
     <a href="http://example.com" target="_blank">Home</a>
     [...]
   </span>
 </div>

```

请记住，内部链接是允许的（即使使用相对路径），并且它们也可以在外部选项卡中打开。

```html
 <div>
   <span id="top-navbar-links">
     [...]
     <a href="/c/site-feedback" target="_blank">Forums</a> 
   </span>
 </div>

```

* * *

相关主题：

- [Add a custom header with a dropdown menu](https://meta.discourse.org/t/custom-header-with-dropdown-navigation/33451)

---

_[View the full topic](https://meta.discourse.org/t/customize-the-header-with-links-icons-or-menus/13368)._