 |
概要 | ヘッダーサブメニューを使えば、プレーンテキストだけでサブメニュー付きのヘッダーメニューを作成できます！ |
 |
プレビュー | Discourse Theme Creator でプレビュー |
 |
リポジトリリンク | https://github.com/discourse/discourse-header-submenus |
 |
Discourse テーマは初めてですか？ | Discourse テーマの使い方入門ガイド |
このテーマコンポーネントをインストール
機能
デスクトップ
モバイル
設定
| 名前 | 説明 |
|---|---|
| メニュー項目 | メニュー項目を追加します。1 行に 1 つの項目を、以下の順序で入力します：テキスト、アイコン、タイトル、表示デバイス。 |
| サブメニュー項目 | サブメニュー項目を追加します。1 行に 1 つの項目を、以下の順序で入力します：親、テキスト、アイコン、URL、ターゲット、タイトル。 |
| Svg アイコン | 上記のリストで使用される各アイコンに対応する FontAwesome アイコンクラスを含めます。 |
| 固定モード | スクロール位置に関係なく、メニューを画面の上部に表示するように強制します（デスクトップのみ）。 |
| キャレット表示 | メニュー項目の隣にキャレットアイコンを表示します。 |
| 位置反転 | メニュー項目を画面の反対側に表示します。 |
| メニュー背景 | メニューの背景色。(16 進数、rgb、rgba、または CSS 色名) |
| メニュー項目色 | メニュー項目の色。(16 進数、rgb、rgba、または CSS 色名) |
| メニュー項目アクティブ背景 | アクティブ状態のメニュー項目の背景色。(16 進数、rgb、rgba、または CSS 色名) |
| メニュー項目アクティブ色 | アクティブ状態のメニュー項目の色。(16 進数、rgb、rgba、または CSS 色名) |
| サブメニュー背景 | サブメニューの背景色。(16 進数、rgb、rgba、または CSS 色名) |
| サブメニュー項目色 | サブメニュー項目の色。(16 進数、rgb、rgba、または CSS 色名) |
| サブメニュー項目ホバー背景 | ホバー時のサブメニュー項目の背景色。(16 進数、rgb、rgba、または CSS 色名) |
| サブメニュー項目ホバー色 | ホバー時のサブメニュー項目の色。(16 進数、rgb、rgba、または CSS 色名) |
| 区切り線色 | サブメニュー内の区切り線の色。(16 進数、rgb、rgba、または CSS 色名) |
設定は 4 つのグループに分かれています
-
メニュー項目
メニューに表示させたい項目を入力します。1 行に 1 つのカンマ区切り項目を、以下の順序で入力します
テキスト、アイコン、タイトル、表示デバイステキスト：メニューに表示される文字列。
アイコン：項目の隣に表示されるアイコン。アイコンを使用しない場合はnoneを使用します。
タイトル：項目にホバーしたときに表示されるテキスト。
表示デバイス：項目が表示されるデバイスを選択します。vdmはデスクトップとモバイルの両方に表示されます
vdoはデスクトップのみに表示されます
vmoはモバイルのみに表示されますスペースの制限により、モバイルでは 3〜4 つ以上の項目を追加しないことをお勧めします。
-
サブメニュー項目
メニューに追加したいサブメニュー項目のリストを入力します。1 行に 1 つのカンマ区切り項目を、以下の順序で入力します
親、テキスト、アイコン、URL、ターゲット、タイトル親：このサブメニュー項目を表示する親メニュー項目の名前。上記のリストから
テキストの値を使用します。
テキスト：このサブメニュー項目に表示されるテキスト。
アイコン：このサブメニュー項目のアイコン。アイコンが不要な場合はnoneを使用します。
URL：このメニュー項目がリンクするパス。相対パスも使用できます。
ターゲット：この項目を新しいタブで開くか、同じタブで開くかを選択します。新しいタブで開く場合はblankを、同じタブで開く場合はselfを使用します。
タイトル：項目にホバーしたときに表示されるテキスト。
区切り線：サブメニュー項目間に区切り線を追加することもできます。区切り線を追加するには親、dividerを使用します。
以下は上記の点 1 と 2 をカバーする簡単な例です：
Design という名前のメニュー項目を追加し、そのサブメニューにいくつかの項目を追加したいとします。
まず、これを menu_item として入力します
Design, magic, Get inspired!, vdm
次に、これらを sub_menu 項目として入力します
Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!
これで完了です！
このテーマにはデフォルトでプレースホルダーメニューが付属していますので、それをご覧になってご質問があればお気軽にお尋ねください。
-
レイアウトオプション。
これらは非常に自明です
-
色オプション
これらはデフォルトでは空ですが、ここに色を追加すると、現在のカラーSchemeに基づいたコンポーネントのデフォルト値が上書きされます。
当方でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。