品牌标题

[Discourse]

	摘要	品牌页眉 为移动和桌面视图添加了一个额外的顶部页眉，用于展示您的徽标、导航链接和社交图标。品牌徽标可以是图片或文本。
	预览	在 Discourse 主题创建器中预览
	仓库链接	https://github.com/discourse/discourse-brand-header
	初次接触 Discourse 主题？	Discourse 主题使用入门指南

安装此主题组件

由于这是由 Discourse 团队维护的#官方主题组件，因此可以在 Meta 的相应类别中提出 #支持、#Bug、ux 和 #功能请求，并打上适当的主题组件标签。点击下方的链接即可开始创建。

 支持  Bug  UX  功能

功能

桌面预览：

移动预览：

设置

名称	描述
品牌名称
网站 URL
移动徽标 URL
链接	要在页眉中显示的文本链接
图标	要在页眉中显示的图标链接
自定义 Font Awesome 图标	此主题组件中使用的 FontAwesome 6 图标列表
在移动设备上显示栏
插件出口

使用 Font Awesome 6 图标

为了让 Font Awesome 6 图标在此主题组件中正确显示，您需要在 Discourse 中的以下三个位置添加它们：

1. svg 图标子集 站点设置
2. 组件中的 自定义 Font Awesome 图标 设置
3. 组件中的 图标 设置

此外，对于某些 Font Awesome 6 图标，您需要指定 fa 或 fab 前缀加上图标名称（例如：“fab-bluesky”），因为某些图标属于特定的图标子集。有关此用法的详细信息，请参阅 我们将图标升级至 Font Awesome 6！。

一旦您在所有三个位置添加了这些图标，您应该能在品牌页眉主题组件中看到它们正确显示。

由我们托管？ 主题组件可在我们的标准版、商业版和企业版计划中使用。

[angus (Angus McLeod)]

@vinothkannans Great component!

One small issue. Currently, if a header link is internal to a site (e.g. to a particular category), if it is tapped in the responsive menu, the responsive menu will stay open. The expected behaviour is that the menu would close.

[permacultureProgram (Michael Pinkard)]

I am also seeing this issue for internal links, where the header does not disappear on mobile. Instead, the header slides right and leaves the main page opaque (I believe an overlay is being set), even if the header is folded back up.

Is there a fix for this?

[hosna]

In the mobile view, when we click on the hamburger menu, if then we click outside of the menu, the hamburger menu would be expanded even more, instead of closing. and also it has some other glitches. for example when hamburger menu is open and we click on a topic link.

[smileypants707 (Chad Smiley)]

I’m curious, is there some sort of code I can use/edit to move the links to this side of the header?

Ideally with the fa-icons left in place (on the far right). I’d just like to see what it looks like.

[Stanzilla]

Hey there, would you be open to adding an option to display the bar below the header instead of above?

[vinothkannans (Vinoth Kannan)]

Sure, I will accept it if you can submit it in a PR.

[Stanzilla]

Any hints as to what needs to be changed for that? I never worked with Discourse before.

[vinothkannans (Vinoth Kannan)]

https://github.com/discourse/discourse-brand-header/blob/master/common/header.html#L192-L194

You should mount the widget in “below-site-header” connector instead of “above-site-header”. It will require few more tweaks too.

[Stanzilla]

Thanks, I got it to work! Will probably PR when I have a bit more time.

[vinothkannans (Vinoth Kannan)]

I merged your other PR which will add an optional target parameter to links.

https://github.com/discourse/discourse-brand-header/pull/4

[vinothkannans (Vinoth Kannan)]

@vinothkannans

Edit: To be more clear this is how I planned

This is now done in the commit below

FEATURE: render header inside hamburger menu in mobile devices. (#6)

[ClawdiaWolf (Claudia)]

I love this change, but on several sites where I use it personally, and on a hosted site I’m a moderator of (the NaNoWriMo forums) we’ve been seeing some issues. Unlike the regular hamburger menu, if you try to swipe it away it bounces back onto the screen.

I’ve personally seen this on a fully updated Moto (g7) Power on Android 9 and on a fully updated iPhone 8.

There has also been at least one report of the menu opening on touches near the icon and not just on it, but I’ve personally been unable to reproduce that particular behavior.

[Stanzilla]

Thanks! Turns out I did not have time to make a proper PR, do you think you’ll be able to add the below/above site header setting?

[aaronbauman]

Seems like it would be very useful to be able to add attributes to the header links somehow, e.g. for css class, target, etc.

[Rhidian (Rhidian Bramley)]

I have had a query as to why the menu is not working on mobile devices. The user pressed on the left burger menu but then on a menu link - and his perception was it wasn’t working as the menu still filled most of the screen.

I’ve had to explain you need to touch somewhere on the right of the screen, to the side of the menu, to close it.

Would it be possible to make it more intuitive, either by:

• Auto-closing the menu when you click on a menu link on mobile devices?
• Including a ‘Close Menu’ button on mobile devices?

[jtbayly]

I’ve been meaning to make a similar request. I often try to dismiss the menu on mobile by swiping it to the left. It appears to be working, but then it pops back into place. The other menus in Discourse it works to swipe them back to the side to dismiss them.

[weber-s (Samuël Weber/GwendalD)]

你好！

我们在同一论坛的两个版本（discourse 3.2.0.beta4-dev 和 discourse 3.3.0.beta1-dev）之间尝试了不同的布局。

下面是一个没有自定义 CSS 的示例，只有原始组件。

v3.2	v3.3

discourse 的 HTML 布局在两个版本之间是否发生了变化？

另外，“滑入”行为在 v3.3 中已损坏。

[37Rb (Ryan)]

我在 Discourse 3.2.2 上遇到了同样的问题。幻灯片效果已损坏。

Brand header mobile menu doesn't fully expand until window resize

We’re having a problem where the brand header menu on the upper left only partially expands on mobile when tapped. We have it set to not display the bar on mobile. If I just tap the hamburger menu it looks like this. [Screenshot 2024-06-17 at 11.30.45 AM] But if I then resize the window in any direction it expands fully and shows all the sub-links. [Screenshot 2024-06-17 at 11.30.55 AM] How do I get it to expand fully when tapped without needed a window resize?

我想知道，根据以上帖子的日期，brand-header 主题组件是否仍然受支持？

[37Rb (Ryan)]

根据之前的两篇帖子，这个问题已经存在至少 5 个月了，而且没有人回应。我将假设这个主题组件已经停止维护，除非有人另有说明。