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

[Discourse]

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

所需用户级别：管理员

简单方法（主题组件）

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

1. Custom Header Links 在页眉内部、放大镜旁边创建一个菜单
   

   

2. Custom Header Links (icons) 在放大镜旁边创建可点击的图标
   

   

3. Brand Header 在页眉上方创建一个菜单
   

   

4. Header Submenus 在页眉上方创建带子菜单的菜单
   

   

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

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

困难的方法

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

要执行此操作，您需要阅读至少 Beginner's guide to using Discourse Themes 和 https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648。

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

试一试

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

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

 <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>

这将创建您的基本菜单：

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

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

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

并开始自定义您的菜单：

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

技巧与窍门

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

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

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

并添加一条新规则：

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

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

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

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

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

仅对群组的成员显示菜单

这仅适用于主要群组！

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

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

在外部选项卡中打开链接

在您的 HTML 代码中添加属性

target="_blank"

例如：

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

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

 <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