ブランドヘッダー

Discourse · 2018 年 1 月 14 日午前 6:27

||||
-|-|
| 概要 | Brand Header は、ロゴ、ナビゲーションリンク、ソーシャルアイコンを備えたブランド用の追加トップヘッダーを、モバイルおよびデスクトップの両方のビューに追加します。ブランドロゴは画像またはテキストにできます。
| | プレビュー | Discourse Theme Creator でのプレビュー |
| リポジトリリンク | https://github.com/discourse/discourse-brand-header
|Discourse テーマが初めてですか？ | Discourse テーマの使用に関する初心者向けガイド

このテーマコンポーネントをインストール

機能

デスクトッププレビュー:

モバイルプレビュー:

設定

Font Awesome 6 アイコンの使用

このテーマコンポーネントで Font Awesome 6 アイコンが正しく表示されるようにするには、Discourse 内の 3 か所にそれらを追加する必要があります:

svg icon subset サイト設定
コンポーネント内の custom font awesome icons 設定
コンポーネント内の icons 設定

さらに、一部の Font Awesome 6 アイコンについては、アイコン名に fa または fab プレフィックスを指定する必要があります（例: “fab-bluesky”）。これは、一部のアイコンが特定のアイコンサブセットの一部であるためです。この使用方法の詳細については、We’re upgrading our icons to Font Awesome 6! を参照してください。

これらすべてのアイコンを 3 か所に追加すると、ブランドヘッダーテーマコンポーネントでそれらが正しく表示されるようになります。

当社のホスティングをご利用ですか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

angus · 2018 年 10 月 25 日午後 11:16

@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 · 2019 年 3 月 22 日午後 5:56

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 · 2019 年 4 月 10 日午後 3:00

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 · 2019 年 9 月 14 日午前 12:15

興味があるのですが、ヘッダーの左側にリンクを移動させるために、使用または編集できるコードはありますか？

できれば、fa アイコンは元の位置（右端）に残したままにしたいです。単にどのように見えるか見てみたいです。

Stanzilla · 2020 年 1 月 27 日午後 11:25

こんにちは。ヘッダーの上ではなく、下にバーを表示するオプションを追加することに賛成でしょうか？

vinothkannans · 2020 年 1 月 28 日午前 5:54

もちろん、プルリクエストとして提出していただければ、受理します。

Stanzilla · 2020 年 1 月 28 日午後 1:18

それに関連して変更が必要なものについて、何かヒントはありますか？私は以前、Discourse を使ったことがありません。

vinothkannans · 2020 年 1 月 29 日午前 6:24

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

ウィジェットを「above-site-header」ではなく「below-site-header」コネクタにマウントする必要があります。それには、いくつかの追加調整も必要になります。

Stanzilla · 2020 年 1 月 29 日午後 3:04

ありがとうございます、動作するようにできました！もう少し時間があるときにプルリクエストを送ると思います。

vinothkannans · 2020 年 1 月 29 日午後 7:11

リンクにオプションの target 属性を追加する他の PR をマージしました。

vinothkannans · 2020 年 8 月 23 日午前 7:27

これは以下のコミットで完了しました

ClawdiaWolf · 2020 年 8 月 29 日午後 10:45

この変更は素晴らしいですが、私が個人的に利用しているいくつかのサイトや、モデレーターを務めているホストサイト（NaNoWriMoフォーラム）では、いくつかの問題が発生しています。通常のハンバーガーメニューとは異なり、スワイプで消そうとしても、再び画面に戻ってしまいます。

この現象は、Android 9 に完全に更新された Moto g7 Power と、完全に更新された iPhone 8 の両方で確認しています。

また、アイコンの近くをタップした際にもメニューが開いてしまうという報告が少なくとも1件ありますが、私はその特定の動作を再現できていません。

Stanzilla · 2020 年 9 月 28 日午後 4:20

ありがとうございます！実は、適切なプルリクエストを作成する時間が取れませんでした。以下の/上記のサイトヘッダー設定を追加していただけるでしょうか？

aaronbauman · 2021 年 3 月 4 日午後 8:44

ヘッダーのリンクに、CSS クラスや target 属性などを何らかの方法で追加できるようにすると、とても役立ちそうですね。

Rhidian · 2021 年 4 月 6 日午前 10:56

モバイルデバイスでメニューが機能しないという問い合わせを受けました。ユーザーは左側のハンバーガーメニューをタップした後、メニュー内のリンクを選択しましたが、メニューが画面の大部分を占めたままだったため、動作していないと感じたようです。

私は、メニューを閉じるには画面の右側、メニューの外側をタップする必要があると説明せざるを得ませんでした。

より直感的にするために、以下のような対応は可能でしょうか？

モバイルデバイスでメニュー内のリンクをクリックした際に、メニューを自動的に閉じる
モバイルデバイスに「メニューを閉じる」ボタンを表示する

jtbayly · 2021 年 4 月 6 日午後 12:11

似たようなリクエストを投稿しようと思っていたところです。モバイル版でメニューを左にスワイプして閉じようとするのですが、一瞬閉じたように見えてすぐに元の位置に戻ってしまいます。Discourse の他のメニューでは、スワイプして閉じる機能が正常に動作しています。

weber-s · 2024 年 2 月 26 日午前 11:49

こんにちは！

同じフォーラムの2つのバージョン（discourse 3.2.0.beta4-dev と discourse 3.3.0.beta1-dev）で異なるレイアウトを試しています。

以下は、カスタムCSSなしの生のコンポーネントの例です。

v3.2	v3.3
v3.2456×753 16.5 KB	v3.3456×753 33.8 KB

DiscourseのHTMLレイアウトは、2つのバージョン間で変更されましたか？

また、「スライドイン」動作がv3.3で壊れています。

37Rb · 2024 年 6 月 25 日午後 11:08

Discourse 3.2.2 でも同じ問題が発生しています。スライドインの動作が壊れています。

上記の投稿の日付を見ると、brand-header テーマコンポーネントはまだサポートされているのでしょうか？

37Rb · 2024 年 7 月 8 日午後 3:25

前の2つの投稿に基づくと、少なくとも5か月間壊れており、誰も応答していません。誰かが別のことを言わない限り、このテーマコンポーネントは廃止されたと仮定します。

トピック		返信	表示
Left side hamburger menu on mobile Theme component mobile	43	3908	2026 年 4 月 15 日
Can I add a icon and link back to my homesite at the top bar Support	2	855	2022 年 8 月 25 日
Brand header mobile menu doesn't fully expand until window resize Support brand-header	11	283	2024 年 8 月 2 日
⬇️ Dropdown Header Theme component pavilion	69	7828	2026 年 3 月 2 日
Custom Header Links (icons) Theme component official , custom-header-icons	117	32159	2025 年 8 月 4 日

ブランドヘッダー

機能

設定

Font Awesome 6 アイコンの使用

関連トピック