JavaScriptバージョンが安定しなかったため、純粋なCSSコンポーネントとして再構築する必要がありました。目的は、ユーザーに特定の経路を強調表示させることです。
リンク: https://github.com/focallocal/nav-buttons-highlighter
これは、ほとんどのユーザーが数ヶ月メンバーになっていても、特にモバイルユーザーがどこにあるかわからないKanbanボードプラグインをインストールして強調表示したものです。
デスクトップ:
モバイル:
Nav Buttons Highlighter
ユーザーを特定の経路や機能に誘導するためにナビゲーションボタンを強調表示し、モバイルのドロップダウンメニューをより明確で視覚的にわかりやすくするためのDiscourseテーマコンポーネントです。
目的
このコンポーネントは、以下の点で役立ちます。
- ユーザーを誘導する: 重要なナビゲーションリンク（タスクボード、ドキュメント、主要カテゴリなど）を強調表示します。
- モバイルUXを改善する: ドロップダウンナビゲーションボタンを目立たせます。
- ナビゲーションバーに視覚的な階層を作成する
機能
- グラデーション、影、ホバー効果を備えた3Dボタンのスタイリング
- モバイルレスポンシブ - モバイルで「最新」ドロップダウンのトグルボタンを強調表示し、ユーザーがクリックできること/すべきであることをより明確にします。
- デフォルトでDiscourse Kanbanプラグイン用に事前設定済み
- CSSのみの実装 - 信頼性が高く軽量
- カスタマイズが容易
デフォルト設定
デフォルトでは、このコンポーネントは Discourse Kanban プラグインを 青色 で強調表示するように設定されています。ただし、任意のナビゲーションリンクを任意の色の強調表示に変更することも容易です。
インストール
-
Discourse管理コンソールで、カスタマイズ > テーマ > コンポーネント に移動し、インストール をクリックします。
-
Gitリポジトリリンクからコピーして貼り付けます:
https://github.com/focallocal/nav-buttons-highlighter -
インストールしたら、コンポーネントをアクティブなテーマに追加します。
カスタマイズ方法
CSSファイルの検索
このコンポーネントには管理設定パネルはありません - すべてのカスタマイズは、リポジトリ内のCSSファイルを直接編集することで行われます。
CSSファイルは次の場所にあります:
common/common.scss
編集方法:
オプション1: GitHubで編集 (最も簡単)
- このリポジトリのバージョンをフォークしてインストールします。
common/common.scssに移動します。- 鉛筆アイコンをクリックして編集します。
- 変更を加えてコミットします。
- Discourse管理 > カスタマイズ > コンポーネント で、Nav Buttons Highlighter コンポーネントの「アップデートを確認」をクリックします。
オプション2: ローカルで編集
- リポジトリをコンピュータにクローンします。
- 任意のテキストエディタで
common/common.scssを編集します。 - 変更をコミットしてプッシュします。
- Discourse管理 > カスタマイズ > コンポーネント で、「アップデートを確認」をクリックします。
注:
- このコンポーネントは、有効になっているすべてのテーマで動作します（特定のテーマに依存しません）。
- CSSファイルには、変更すべき内容を正確に説明する詳細なインラインコメントが含まれています。
- 変更後は、Discourse管理でコンポーネントを更新する必要があります。
CSSファイルコメントの説明:
- どのセレクターを変更するか（例:
a.kanban-nav）で、異なるリンクを強調表示します。 - 異なる色の値を更新します。
- モバイルドロップダウンの強調表示を追加/削除する方法。
例
色を青から緑に変更
ボタンは3つの青の濃淡を使用してグラデーション効果を作成しています。
- 明るい青:
#5ca3ff(グラデーションの上部) - 中間の青:
#4285F4(グラデーションの中央) - 暗い青:
#3a75e4(下部/影)
緑に変更するには、common/common.scss でこれらの値を見つけて置き換えます。
| 現在の青 | 緑に置き換え |
|---|---|
#5ca3ff |
#5cb860 |
#4285F4 |
#4CAF50 |
#3a75e4 |
#45a049 |
rgba(66, 133, 244 |
rgba(76, 175, 80 |
別のナビゲーションリンクの強調表示
セレクター a.kanban-nav をターゲットリンクに置き換えます。
例:
a[href=“/c/category-name”]- 特定のカテゴリを強調表示a[href=“/tags/tag-name”]- 特定のタグを強調表示a[href=“/my-custom-page”]- カスタムリンクを強調表示#navigation-bar > li:nth-child(2) > a- 2番目のナビゲーションボタンを強調表示
セレクターの検索方法:
- ブラウザでフォーラムを開きます。
- 強調表示したいリンクを右クリックします。
- 「要素を検証」を選択します。
- HTML内のクラス名（例:
class=“kanban-nav”）またはhref値を探します。
モバイルドロップダウンの強調表示を無効にする
/ \* Latest dropdown button on mobile \*/ というラベルのセクションを見つけて、以下のいずれかを行います。
- セクション全体を削除する。
/ \* … \*/で囲んでコメントアウトする。
モバイルドロップダウン内のリンクの強調表示
既存のスタイルの後に、このCSSブロックを追加します。
.fk-d-menu-modal a.kanban-nav {
background: linear-gradient(135deg, #5ca3ff 0%, #4285F4 50%, #3a75e4 100%) !important;
color: #fff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
}
a.kanban-nav を目的のセレクターに置き換えます。
開発
このリポジトリには以下が含まれます:
common/common.scss- すべてのボタンのスタイリングと詳細なカスタマイズガイドassets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js- 最小限のイニシャライザー（Discourseに必要）about.json- コンポーネントメタデータ
トラブルシューティング
*Q: 変更が反映されない*
A: 編集後、「保存」をクリックし、フォーラムページをハードリフレッシュしてください（Ctrl+F5 または Cmd+Shift+R）。
*Q: 複数のボタンを強調表示したい*
A: ボタンのCSSブロック全体をコピーし、既存のCSSルールの下に貼り付け、セレクターと必要に応じて色を変更します。
ライセンス
MIT Public Happiness Movement