カテゴリハイライター

[angus (Angus McLeod)]

このテーマコンポーネントを使用すると、Discourse 内の特定のカテゴリ（または複数）を強調表示できます。以下のことができます：

1. 特定のカテゴリに特別な背景スタイルを適用する
2. ヘッダーに同じ特別なスタイルのカテゴリリンクを追加する

代表的なユースケースとして、「Premium」コンテンツを持つカテゴリを強調表示する場合などが挙げられます。

インストール方法

コードの入手

---

カテゴリナビゲーションとヘッダーラベル

トピック一覧	サイトメニュー

カテゴリページ

設定

Category Highlighter テーマコンポーネントには、「highlight categories」という主要な設定が 1 つあります。この設定は、Category Highlighter テーマコンポーネントの設定パネルで確認できます。

強調表示したいカテゴリごとに、この設定内にリスト項目が用意されます。各項目の形式は以下の通りです：

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

この形式の例を以下に示します：

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:  Premium~:star:

この形式には、~（チルダ）で区切られた 6 つの値があります。それぞれの値について順に説明します。

カテゴリスラッグ

強調表示したいカテゴリの「スラッグ」です。カテゴリ設定から確認できます。

サブカテゴリを強調表示する必要がある場合は、親カテゴリのスラッグの後にスラッシュ / を挟んで、サブカテゴリのスラッグを指定する必要があります。

例えば、スラッグが videos の「premium」のサブカテゴリを強調表示したい場合は、以下のように指定します：

premium/videos

権限

なお、強調表示（ヘッダーラベルを含む）が表示されるのは、該当カテゴリの read 権限を持つユーザーのみです。カテゴリの「セキュリティ」設定でカテゴリの権限を変更できます。

背景

これは、カテゴリバッジの background CSS プロパティに適用される値です。そのプロパティがサポートする任意の値を指定できます。

background - CSS: Cascading Style Sheets | MDN

background 略記 CSS プロパティは、色、画像、原点、サイズ、または反復方法など、すべての背景スタイルプロパティを一度に設定します。

例えば linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%) のように指定します。

テキスト色

これは、カテゴリバッジの color CSS プロパティに適用される値です。テキストの色に影響します。そのプロパティがサポートする任意の値を指定できます。

color - CSS: Cascading Style Sheets | MDN

color CSS プロパティは、要素のテキストおよびテキスト装飾の前面色値を設定し、currentcolor 値を設定します。currentcolor は他のプロパティで間接的な値として使用でき、他の色プロパティのデフォルト値となります…

今回の例では、#88562e となっています。

ヘッダーラベル

この値には 2 つの目的があります。

1. 強調表示されたカテゴリにヘッダーラベルを表示するかどうか
2. そのラベルの内容

ヘッダーラベルを表示したくない場合は、この値を指定しないでください。

この値には、テキスト、HTML エンティティ、絵文字を使用できます。

今回のヘッダーラベルの値は :star:  Premium です。これは以下の組み合わせです：

1. 星の絵文字のショートコード：:star:
2. 2 つの改行されないスペース HTML エンティティ（それぞれ空白を追加します）：  
3. ラベルのテキスト：Premium

絵文字のショートコードの完全なリストは こちら、HTML エンティティの完全なリストは こちら で確認できます。

モバイル用ヘッダーラベル

この値にも 2 つの目的があります。

1. 強調表示されたカテゴリにモバイル用ヘッダーラベルを表示するかどうか
2. モバイル用ヘッダーラベルの内容

使用方法と書式はヘッダーラベルと同じです。ただし、モバイルではスペースが限られているため、スペースを節約するために絵文字のみ、または短い単語を使用するのが賢明です。

親カテゴリ

アイテムの「親」を設定することで、ヘッダーにドロップダウンを作成できます。6 番目の項目にカテゴリスラッグを挿入すると、該当するアイテムがヘッダー内でそのカテゴリのサブメニュー項目になります。最初の項目と同様に、カテゴリ設定モーダルから取得できるカテゴリスラッグを使用してください。

代替リンク

デフォルトでは、各カテゴリアイテムは関連するカテゴリにリンクします。設定ブロックの 6 番目の項目に URL を追加することで、リンク先を変更できます。

[jrgong]

シンプルでありながら、非常に効果的です。有料カスタマーカテゴリからの投稿を強調表示するために、フォーラムの一部を CSS でカスタマイズする計画は以前から持っていました。これですべてが格段に楽になりました。お疲れ様でした。これは素晴らしいです！

カテゴリ選択で「すべてのカテゴリ」が選択されている場合、トピック一覧でトピックを強調表示することを検討されましたか？例えば、トピックタイトルの前に星印を追加するなどの方法です。

[angus (Angus McLeod)]

ハイライトはバッジが表示されるすべての場所で機能します。したがって、リストにも既に含まれています

トピック一覧	サイトメニュー

カテゴリページ

詳細は https://try.thepavilion.io をご覧ください

[outofthebox (Carson)]

@Angusさん、あなたは素晴らしい開発者であり、あなたと協力できることは大変な喜びです。あなたの創造性、卓越性、そして細部への配慮に感謝しています。あなたは Discourse コミュニティへの贈り物です。

[jordan.vidrine]

これはかなり素晴らしいコンポーネントですね、よくできました

[codinghorror (Jeff Atwood)]

おお、それはとても… プレミアム ですね

[Anatolia]

@angus

最初はサイドバーがあるのかと思いました。このスタイルのサイドバーなら素敵ですね。

[Paracelsus]

素晴らしいコンポーネントですね、とても気に入りました。

@angus ハイライトされた背景に border-radius を適用する方法を教えていただけないでしょうか？よろしくお願いいたします。

[angus (Angus McLeod)]

@Paracelsus

ハイライトされた背景に border-radius を適用する方法を知りたいのですが、よろしくお願いいたします。

カテゴリバッジが表示される文脈が多岐にわたるため、これは少し複雑です。これを簡単にするクラスを追加するかもしれませんが、当面は以下のようにしてください。

### ヘッダーボタン
.highlight-category-button {
    border-radius: 4px;
}

### バッジ
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

例では “updates” がカテゴリのスラッグです。

例: https://try.thepavilion.io/

[fzngagan (Faizaan Gagan)]

コンポーネントがカテゴリのドロップダウンをサポートするようになりました

設定の6番目の項目に親カテゴリのスラッグを使用すると、子カテゴリがドロップダウン項目として表示されます。

注意: 5番目の項目（ヘッダーラベル（モバイル））を使用しない場合は、空として渡す必要があります。

この機能の提供を支援してくださった @outofthebox さんに感謝いたします。

[outofthebox (Carson)]

素晴らしい仕事ですね、@fzngagan さん!! パビリオンチームは本当に素晴らしいです。

[satonotdead]

スラッグだけでなく、.select-kit .select-kit-row.is-highlighted もハイライト表示することは可能でしょうか？

視認性の向上につながると思います。

コメントにも同意します。素晴らしいお仕事ですね。Pavilion サイトを参照しながら、様々な機能をテストしています。

コミュニティのために考えているアイデアを、ぜひ一緒に実現できると嬉しいです

[MarcP]

まず、この素晴らしいコンポーネントを提供してくださり、ありがとうございます。

@angus

トピックリスト

トピックリスト表示において、トピックタイトルとカテゴリバッジの間にもう少し余白があれば、より見やすくなると思います。これはコンポーネント内で実現可能でしょうか？デフォルトのボックス表示に比べてボックスが少し大きめに設定されているようで、完璧主義者には見づらく感じられます（笑）。

モバイル表示の方がデスクトップ表示よりも見やすいです：

[jrgong]

これは最新のテストに合格したものでも動作しますか？もしそうなら、ドキュメントはどこかにアーカイブされていますか？ @angus

[angus (Angus McLeod)]

OPにドキュメントを貼り付けました。うまくいかない場合はお知らせください。

[jrgong]

素晴らしい！特にグラデーションの部分が目標達成の鍵となりました！本当にありがとうございます！

[jrgong]

このTCをまだ使用している方、または以下の問題の解決策を見つけた方はいらっしゃいますか？
2.9.0.beta9およびbeta10では、TCがカテゴリドロップダウンフィールドおよびトピックリストからシステムカテゴリのメタを削除します。

フォーラムログは空で、コンソールログには次のものしかありません。

[THEME 190 'Category Highlighter'] エラーを回避するため、`modifyClass`呼び出しに`pluginId`キーを追加してください。これにより、変更が一度だけ適用されるようになります。 3 plugin-api.js:19