ナビゲーションボタンハイライターコンポーネント - 動作中

Drew-ART · 2025 年 11 月 18 日午後 1:14

JavaScript版で管理セクションを安定させることが難しかったため、純粋なCSSコンポーネントとして再構築する必要がありました。これは、サイトで動作させるためにCSSセレクターを直接編集する必要があることを意味します。

このコンポーネントの目的は、ユーザーに特定のパスを取ってもらうのを助けることです。

リンク: https://github.com/focallocal/nav-buttons-highlighter

以下は、私のプラットフォームのほとんどのユーザーが数ヶ月メンバーになっていても、特にモバイルを主に使用するユーザーが見つけられないことが多いKanbanボードプラグインをハイライトしてインストールした例です。

デスクトップ:

モバイル:

Nav Buttons Highlighter

ユーザーに特定のパスや従うべき機能へ誘導するためにナビゲーションボタンをハイライトし、モバイルのドロップダウンメニューをより明確で目立たせるためのDiscourseテーマコンポーネント。

目的

このコンポーネントは、以下を支援します。

ユーザーの誘導: 重要なナビゲーションリンク（例：タスクボード、ドキュメント、主要カテゴリ）をハイライトすることによる誘導
モバイルUXの向上: ドロップダウンナビゲーションボタンを目立たせることによる向上
ナビゲーションバーの視覚的階層の作成

特徴

ソリッドカラーとホバーエフェクトを備えたクリーンなボタンのスタイリング
管理者による設定可能 - CSSの編集は不要
最大3つのカスタムナビゲーションボタンのサポート
モバイル対応 - モバイルドロップダウンボタンのハイライトを含む
デフォルトでDiscourse Kanbanプラグイン用に事前設定済み
簡単なカスタマイズのためのカラーピッカーサポート

デフォルト設定

デフォルトでは、このコンポーネントはDiscourse Kanbanプラグイン（リンク）を青（#4285F4）でハイライトするように設定されています。

インストール

Discourse管理コンソールで、カスタマイズ → テーマ → コンポーネントに進み、インストールをクリックします。
Gitリポジトリリンクからコピーし、貼り付けます。
```
https://github.com/focallocal/nav-buttons-highlighter
```
インストール後、コンポーネントをアクティブなテーマに追加します。

カスタマイズ方法

管理設定パネル

すべての設定は簡単な管理設定を通じて行われます - CSSの編集は不要です！

設定方法:

管理 → カスタマイズ → テーマに移動します。
アクティブなテーマをクリックします。
含まれているコンポーネントセクションでNav Buttons Highlighterを見つけます。
設定をクリックします。

利用可能な設定:

ボタン 1 - Kanban (デフォルト):

Kanbanをハイライト: オン/オフを切り替え（デフォルト: オン）
Kanbanの色: カラーピッカー（デフォルト: 青 #4285F4）
Kanbanセレクター: CSSセレクター（デフォルト: a.kanban-nav）

ボタン 2 - カスタム:

ボタン 2をハイライト: 2番目のボタンを有効化（デフォルト: オフ）
ボタン 2の色: カラーピッカー（デフォルト: 緑 #4CAF50）
ボタン 2セレクター: CSSセレクターを入力（例: a[href='/page']）

ボタン 3 - カスタム:

ボタン 3をハイライト: 3番目のボタンを有効化（デフォルト: オフ）
ボタン 3の色: カラーピッカー（デフォルト: オレンジ #FF5722）
ボタン 3セレクター: CSSセレクターを入力

モバイル:

モバイルドロップダウンをハイライト: モバイルの最新（Latest）ドロップダウンを切り替え（デフォルト: オン）
モバイルドロップダウンの色: カラーピッカー（デフォルト: 青 #4285F4）

CSSセレクターの見つけ方:

異なるナビゲーションリンクをハイライトするには、それらのCSSセレクターが必要です。

ブラウザでフォーラムを開きます。
ハイライトしたいリンクを右クリックします。
「要素を検証」を選択します。
<a>タグを探し、以下を記録します。
- クラス名: class="kanban-nav" → 使用: a.kanban-nav
- Href値: href="/c/support" → 使用: a[href="/c/support"]

一般的な例:

Kanbanプラグイン: a.kanban-nav
サポートカテゴリ: a[href="/c/support"]
ドキュメンテーションタグ: a[href="/tags/documentation"]
カスタムページ: a[href="/my-page"]
2番目のナビゲーションボタン: #navigation-bar > li:nth-child(2) > a

色の選択:

16進数のカラーコード（例: 青の#4285F4）を使用します。コンポーネントは自動的に以下を生成します。

グラデーションの上部の明るいシェード
下部/影の暗いシェード
ホバー時およびアクティブ時の状態の色

人気のある色:

青: #4285F4 (デフォルト)
緑: #4CAF50
赤: #F44336
オレンジ: #FF9800
紫: #9C27B0

安定版CSSのみバージョン

直接CSS編集を好む場合は、以前のバージョン（2.0.1）が利用可能です。

CSSのみのバージョンをインストール:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

CSS編集の説明については、そのブランチのREADMEを参照してください。

開発

このリポジトリには以下が含まれています。

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

merefield · 2025 年 11 月 18 日午後 1:25

奇妙なマークダウンは何ですか？

それを#theme-componentに移動するようにフラグを立てましたか？

Drew-ART · 2025 年 11 月 18 日午後 1:33

ありがとうございます。GithubのREADMEから直接コピー＆ペーストしました。投稿後も更新しています。

テーマコンポーネントに移動するようフラグを立てましたか？

いいえ、まずフィードバックを得て、すべて問題ないか確認したかったのです。

Drew-ART · 2025 年 11 月 18 日午後 1:47

Discourse がファイルをキャッシュするという奇妙な問題が発生しました。おそらく about.json ファイルだったと思いますが、編集しても更新も再インストールもできませんでした。変更がまったくビルドされない理由を突き止めるのに永遠にかかりました。

ライブサイトではなく、コンポーネントをテストするより良い方法はありますか？

NateDhaliwal · 2025 年 11 月 19 日午前 2:44

@Drew-ART さんは Objects type for theme setting をご覧になりましたか？おそらく、それを使って多くのCSSルールを追加でき、ネストを使用して各ルールに背景色やパディングなどを追加できるかもしれません。SCSSにはeachループがあり、それを利用できるかもしれません。

これは役立つでしょうか？

github.com/Arkshine/discourse-banner-featured-links

scss/functions.scss

ce190f66a


      
            @return $result;
          }
          
          /**
           * Parses a string of ruby-like key-value pairs into a map.
           * Format: [{"key1"=>"value1", "key2"=>"value2"}, {"key1"=>"value1","key2"=>"value2"}]
           *
           * @param {String} $string - The string of key-value pairs.
           * @return {Map} - The map of key-value pairs.
           */
          @function parseObjectSettings($string) {
            $string: str-slice($string, 2, -2);
            $items: str-split($string, "}, {");
          
            $parsedItems: ();
          
            @each $item in $items {
              $item: str-replace($item, "{", "");
              $item: str-replace($item, "}", "");
              $item: str-trim($item);

Drew-ART · 2025 年 11 月 19 日午後 12:47

@NateDhaliwalさん、ありがとうございます。それは私の最初のやり方でしたが、上記の500エラーに遭遇し、しばらくそれを乗り越えられなかったので、CSSのみのアプローチに戻りました。

500エラーの対処法がわかった今、その断念した試みに戻って、ロードできるか試してみることもできます。やってみます。

Drew-ART · 2025 年 11 月 19 日午後 1:28

いいえ、全く動作しません。

管理設定で設定し、正しく読み込まれない場合はCSSにフォールバックするようにしていますが、何かキャッチできないものが原因で完全に機能しなくなっています。

Drew-ART · 2025 年 11 月 20 日午前 12:36

OK、シンプルなテキスト/ブーリアン設定を使用して管理セクションを動作させることができました。

SCSS解析を使用したオブジェクト型を動作させるのが難しいと感じましたが、上記のブランチが機能しなかった理由を説明できる方はいらっしゃいますか？しかし、現在それを使用したい人は誰でもコンポーネント管理セクションで設定をカスタマイズできます。

Drew-ART · 2025 年 11 月 20 日午後 8:54

OK、SCSSの問題を見つけたようです。

@NateDhaliwal のカルーセルコンポーネントでこれらを見つけました。
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

設定 (settings.yml):


pagination_button_color:
  type: string
  default: ""

苦労している他の人のために：

CSSカスタムプロパティに#{$var}構文を使用して注入する
その後、Swiperライブラリが読み取るために、それらのCSS変数を他の場所で使用する

これは次のような理由で機能します。

設定変数は#{}で補間できる
CSSカスタムプロパティは文字列値を受け入れる
実際のスタイリングはSCSS関数ではなく、CSS変数を使用する

まもなく、このプラグインをよりモダンなバージョンに更新する予定です。

トピック		返信	表示
First component attempt. I've had a go at creating a Nav Button Highlighter. Not working as yet Dev	1	45	2025 年 11 月 11 日
Highlighter Composer Button Theme component	22	1301	2023 年 9 月 5 日
Fast Highlight Dev	49	2304	2023 年 9 月 30 日
MD Composer extras Theme component	70	8697	2025 年 7 月 8 日
Discourse Button Styles Theme component	40	10498	2025 年 9 月 18 日