 |
概要 | Custom Header Links (カスタムヘッダーリンク) を使用すると、カスタムのテキストベースのリンクをヘッダーに簡単に追加できます。 |
 |
プレビュー | Discourse Theme Creator でのプレビュー |
 |
リポジトリリンク | GitHub - discourse/discourse-custom-header-links · GitHub |
 |
Discourse テーマは初めてですか？ | Discourse テーマ利用の初心者ガイド |
このテーマコンポーネントをインストール
機能
デスクトップ
モバイル
(スペースが非常に限られているため、モバイルで複数のリンクを追加することは推奨されません)
設定
| 設定 | 説明 |
|---|---|
custom_header_links |
ヘッダーに表示するリンクの構造化されたリスト。各リンクは個別のフィールドを持つフォームを通じて設定されます（下記参照）。 |
links_position |
リンクがヘッダーの右側（デフォルト）またはロゴの近くの左側のどちらに表示されるかを制御します。left に設定すると、個々のリンクの hide_on_scroll の設定に関わらず、トピックページではすべてのリンクが自動的に非表示になり、トピックタイトル用のスペースが確保されます。 |
リンクの追加
リンクは、テーマコンポーネント設定の構造化されたフォームを通じて設定されます。新しいリンクを追加するには Add をクリックします。各リンクには以下のフィールドがあります。
| フィールド | 必須 | 説明 |
|---|---|---|
| Text (テキスト) |  はい |
リンクの表示ラベル。最大100文字。CSSクラスの決定にも使用されます（下記CSSカスタマイズ参照）。 |
| Title (タイトル) |  いいえ |
リンクの上にマウスオーバーしたときに表示されるツールチップテキスト。最大1000文字。 |
| URL | はい |
リンクが指すURL。相対パス（例: /faq）または完全なURLのいずれも指定可能です。最大2048文字。 |
| View (表示) | いいえ |
リンクが表示されるデバイスを制御します。未設定の場合、すべてのデバイスに表示されます（vdm と同じ）。値は下記参照。 |
| Target (ターゲット) | いいえ |
リンクが開く方法を制御します。未設定の場合、新しいタブで開くのがデフォルトです（blank と同じ）。値は下記参照。 |
| Hide on scroll (スクロール時に非表示) | いいえ |
トピックページでトピックタイトルがヘッダーに表示されたときにリンクが非表示になるかどうかを制御します。デフォルトは keep です。links_position が right に設定されている場合にのみ適用されます — 下記の注記を参照してください。値は下記参照。 |
| Locale (ロケール) | いいえ |
設定されている場合、サイトのページ言語がこの値と一致する場合にのみリンクが表示されます。すべてのロケールでリンクを表示するには空白のままにします。詳細は下記参照。 |
\u003cbr\u003e
View の値:
| 値 | 動作 |
|---|---|
vdm |
デスクトップとモバイルの両方で表示 |
vdo |
デスクトップのみ表示 |
vmo |
モバイルのみ表示 |
| (未設定) | vdm と同じ — すべてのデバイスで表示 |
Target の値:
| 値 | 動作 |
|---|---|
blank |
新しいタブで開く |
self |
同じタブで開く |
| (未設定) | 新しいタブで開くのがデフォルト（blank と同じ） |
Hide on scroll の値:
| 値 | 動作 |
|---|---|
keep |
トピックタイトルがヘッダーに表示されてもリンクは表示されたままになります (デフォルト) |
remove |
トピックページでトピックタイトルが表示されるとリンクは非表示になります |
\u003e 
hide_on_scroll は links_position が right の場合にのみ適用されます。 links_position が left の場合、個々の hide_on_scroll の設定に関わらず、すべてのリンクはトピックページで一緒に非表示になります。
hide_on_scroll が動作している例（links_position が right に設定されている場合）を以下に示します。
Most Liked と Privacy は keep に設定されているため、タイトルが展開されたときも表示されたままになります。他のリンクは remove に設定されているため、タイトルが表示されると非表示になります。この動作はトピックページにのみ影響します。
ロケールによるフィルタリング
Locale フィールドを使用すると、サイトが特定の言語に設定されている場合にのみリンクを表示できます。これは、言語ごとに異なるヘッダーリンクを設定したい多言語コミュニティにとって便利です。
- フィールドに
en、de、fr、zh_CNなどのロケールコードを設定します。 - マッチングは大文字と小文字を区別せず、ハイフン (
-) とアンダースコア (_) の区切り文字はどちらも同じように扱われます。したがって、en-US、en_US、en_usはすべて同じように一致します。 - ロケールフィールドが空白のままの場合、リンクはすべてのロケールで表示されます。これは、ほとんどの単一言語サイトで推奨される設定です。
- リンク要素には、CSSクラス
headerLink--{locale}も追加されるため、追加のCSSターゲティングに使用できます。
\u003e 
よくある問題: リンクが表示されない場合は、サイトに設定されている言語と一致しない locale 値を誤って設定していないか確認してください。ロケールフィールドを空白のままにしておくのは安全で、常にリンクが表示されます。
CSSカスタマイズ
各リンクには、そのText値から派生したCSSクラスが自動的に割り当てられます。スペースはハイフンに置き換えられ、テキストは小文字に変換され、末尾に -custom-header-links が追加されます。
例:
- テキストが
Privacyのリンクには、クラスprivacy-custom-header-linksが割り当てられます。 - テキストが
Visit Shopのリンクには、クラスvisit-shop-custom-header-linksが割り当てられます。
すべてのヘッダーリンクのスタイル設定:
.custom-header-links .headerLink a {
font-size: var(--font-up-1);
color: var(--header_primary);
}
特定のリンクのスタイル設定 (例: テキストが “Privacy” のリンク):
.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 は、ログアウトしているユーザーの \u003chtml\u003e タグに anon クラスを追加します。これを使用して、リンクを条件付きで表示または非表示にできます。
/* ログアウトしているユーザーから "Dashboard" を非表示にする */
html.anon .dashboard-custom-header-links {
display: none;
}
/* ログインしているユーザーから "Sign Up" を非表示にする */
html:not(.anon) .sign-up-custom-header-links {
display: none;
}
\u003e CSS の display: none は視覚的な非表示メカニズムです。リンクの HTML はページソース内に残ります。機密性の高いURLやアクセス制御が必要なURLを保護するためにこれを使用しないでください。
CSS を使用したリンクの並べ替え (flexbox の order を使用):
.custom-header-links li {
\u0026:nth-child(1) { order: 3; }
\u0026:nth-child(2) { order: 1; }
\u0026:nth-child(3) { order: 2; }
}
ユーザー固有のリンクには /my パスを使用すると、ユーザー名をハードコーディングする必要がなくなります。
/my/messages → 現在のユーザーの受信トレイ
/my/activity → 現在のユーザーのアクティビティ
\u003e ホストされていますか？ テーマコンポーネントは、当社の Pro、Business、Enterprise プランで利用可能です。
\u003e 変更履歴のハイライト:
\u003e
\u003e * custom_header_links 設定が、カンマ区切りのリスト形式から構造化された type: objects フォームUIに移行されました。以前に古いカンマ区切りテキスト入力を使用してリンクを設定していた場合、データは自動的に保持されるはずです。