カテゴリバナー

Discourse · 2018 年 4 月 26 日午後 6:05


	概要	Category Banners は、既存のカテゴリ詳細を使用してカテゴリページ用のバナーを作成します（タグについては Discourse Tag Banners をご覧ください）。
	プレビュー	Discourse Theme Creator でプレビュー
	リポジトリリンク	https://github.com/discourse/discourse-category-banners
	Discourse テーマは初めて？	Discourse テーマの使い方の初心者ガイド

このテーマコンポーネントをインストール

機能

Category Banners は、既存のカテゴリ詳細を使用してカテゴリページ用のバナーを作成します。カテゴリ名、説明、色を使用して、関連するカテゴリページの上部にバナーを生成します（タグについては Discourse Tag Banners をご覧ください）。

カテゴリの説明は、各カテゴリの「カテゴリ定義…」トピックの最初の段落で定義されます。バナーの背景色/テキスト色は、カテゴリバッジの設定によって定義されます。

デフォルトでは、デスクトップおよびモバイルのすべてのカテゴリページとサブカテゴリページに表示されますが、カテゴリに説明が設定されていない場合は表示されません。

設定

このコンポーネントには、デフォルトを上書きするオプションが含まれています:

名前	説明
show description	「このカテゴリについて」投稿からの説明を表示
show mobile	モバイルでバナーを表示
show subcategory	サブカテゴリのバナーを表示
hide if no description	カテゴリ説明が設定されていない場合、バナーを非表示
show category logo	カテゴリロゴを表示
align text	テキストの配置
exceptions	これらのカテゴリ名にはバナーを表示しない
categories	バナーを表示するカテゴリ
plugin outlet	ページ上のバナーの位置を変更
show category icon	カテゴリ設定からカテゴリアイコンまたは絵文字を表示 *
override category icon color	カテゴリアイコンを使用する場合、これを有効にするとアイコンがバナーのテキスト色に一致します

* この設定は、カテゴリ設定で設定されたカテゴリアイコンまたは絵文字を指しており、Category Icons テーマコンポーネント（コア機能に置き換えられて廃止されたもの）を指すものではありません。

カスタマイズの注意点

追加の CSS でこれらをカスタマイズしたい場合は、以下の構造を使用して特定のカテゴリヘッダーをターゲットにできます（example-category はカテゴリ名です）:

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

このコンポーネントは、追加の CSS ターゲットとして category-header クラスを body タグに追加します。

当社でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

Pad_Pors · 2018 年 6 月 15 日午後 12:54

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

jimmymckinney · 2019 年 3 月 9 日午前 12:21

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

jrgong · 2019 年 6 月 23 日午前 10:21

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

awesomerobot · 2019 年 11 月 1 日午後 8:48

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

Hang · 2019 年 11 月 7 日午前 1:01

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

Vanecx · 2020 年 1 月 9 日午後 10:10

こんにちは、このテーマコンポーネントをありがとうございます！

このチュートリアルに従って（同じ手順をすべて実行しました）カテゴリバナーコンポーネントを試してみたのですが、何も起こりません。どのカテゴリにもバナーが表示されません。何か私が実行して動作しない原因となっている手順があるでしょうか？私が考えられる唯一の説明は、「bootstrap」の警告がそれをブロックしているということでしょうか？

simon · 2020 年 1 月 9 日午後 11:29

デフォルトでは、カテゴリの説明が設定されていない場合、テーマコンポーネントはカテゴリバナーを表示しません。これは、「カテゴリの説明が設定されていない場合はバナーを非表示にする」チェックボックスのチェックを外すことで変更できます。

カテゴリの説明は、Discourse が各カテゴリ用に自動的に作成する「カテゴリについて」トピックを編集することで設定されます。カテゴリの説明を追加した、または説明のないカテゴリのバナーを非表示にする設定を無効にしたにもかかわらず、まだカテゴリバナーが表示されない場合は、お知らせください。原因を調査いたします。

Vanecx · 2020 年 1 月 10 日午後 2:34

ご回答ありがとうございます。各カテゴリに説明が記載されていることを確認しました。念のため「バナーを非表示にする…」オプションのチェックを外しましたが、状況は変わりませんでした。

画像をご覧いただくとわかる通り、設定には問題がないようです。

この問題と関連があるかは不明ですが、Yunohost インスタンス上の Discourse 環境であることをお知らせします。

downey · 2020 年 2 月 5 日午後 10:21

私以外に、グループ一覧ページ（例：/g/foo）でも同じスタイルを適用できると良いと思う人はいますか？残念ながら、CSS は完全に同じではないため、グループ名の右側にある各種ボタン（ リクエスト メッセージ 削除など）の追加処理が必要になるかもしれません。

これにより、UI 全体の一貫性が向上し、グループが「ファーストクラスの存在」として扱われるようになるでしょう（私見ですが）。

jord8on · 2020 年 3 月 29 日午前 7:30

これらのカテゴリバナーが大好きです！このテーマコンポーネントを作成してくださってありがとうございます！

このバナーが、当フォーラムのメインホームページに表示されればと思います。以下のような内容です：

「最新」のディスカッション
「トップ」のディスカッション
「カテゴリ」
「フォロー中」（Follow Plugin を使用している場合）

それぞれ選択されたオプションに応じて、バナーを表示させる簡単な（あるいはそれなりに簡単な）方法はありますでしょうか？

Rhidian · 2020 年 4 月 11 日午後 12:23

@awesomerobot、ここでも共有しても大丈夫でしょうか…

この discourse-category-banners テーマのフォークを作成しました。

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

プレビューは以下で確認できます。

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

基本的には同じ機能を提供しますが、いくつかの改良を加えています。

カテゴリバナーボックスは、上部の全幅ではなく、メイン見出しの直上にインラインで表示されます。これにより、discourse-versatile-banner などのバナーテーマを上部に表示することが可能になります。
カテゴリバナーボックスは、Discourse のコアコンポーネントであるネイティブのサブカテゴリボックスと同じスタイルで表示されます。これらのサブカテゴリボックスは、Discourse のカテゴリ設定にある「このカテゴリのトピックの上にサブカテゴリリストを表示する」オプションで有効にできます。このオプションは、カテゴリの背景色を左ボーダーとして使用し、カテゴリ名と説明をトピックリストの上に行またはボックスとして表示します。
カテゴリがサブカテゴリの場合、カテゴリ名は以下のようにパンくずリストとして表示されます：親カテゴリ名：サブカテゴリ名

ネイティブのサブカテゴリボックスの上に配置された、カテゴリのテーマバナーボックスのデモスクリーンショット。

親カテゴリへのパンくずリスト参照を示す、サブカテゴリのスクリーンショット。

これは私の初めてのテーマ改良の試みです。何かのお役に立てれば幸いです。

アップデート

この適応版を、ヘッダーにカテゴリのロゴ画像と背景画像を使用するなど、多くの追加機能を備えた独立したコンポーネントとしてリファクタリングしました。この新しいコンポーネントは、カテゴリバナーとは異なり、標準的な Discourse カテゴリヘッダーを実質的に置き換えるため、新しいコンポーネントとして機能します。詳細は以下をご覧ください。

nathank · 2020 年 6 月 23 日午後 11:16

私たちの環境では機能しません。カテゴリのスラッグと ID の両方を試しましたが、バナーは頑固に表示されたままです。他の方も同様の現象が発生していますか？

awesomerobot · 2020 年 6 月 23 日午後 11:46

試してみましたが、私の環境では動作しました。大文字小文字を区別するカテゴリ name を探しているようです。振り返ってみれば、あの実装方法はベストではなかったかもしれませんね…改善できるかもしれません。

nathank · 2020 年 6 月 24 日午前 12:07

あー、その種類は私にぴったりですね！上記のガイドには「name」と明記されていますが、私が読み飛ばしていただけでした。

「name」は、他にあまり使わないため直感的ではありません。しかし、表示される頻度は高いです。設定でより明示的にするのは、私的には問題ないと思います。

AntiMetaman · 2020 年 7 月 18 日午前 12:34

特定のアップロードされたバナーを表示しないカテゴリの例外を追加する代わりに、どのカテゴリにどのバナーを表示するかを指定することはできませんか？

awesomerobot · 2020 年 7 月 23 日午後 9:24

特定のサイトやユースケースによって異なると思います。私の最初の考えでは、サイトがそれを全体に実装したいと思う可能性の方が高く、例外があるとしてもごくわずかだろうということでした。

少数のカテゴリにのみバナーを実装したい場合は、より汎用的ではない、特定の目的に合わせたテーマコンポーネントの方が適しているかもしれません。例えば、Versatile Banner や、https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368 で紹介されているオプションのカスタマイズなどが挙げられます。

Idan · 2021 年 2 月 2 日午前 10:43

画像をアップロードしてテキストに置き換えられると素晴らしいですね。

oca · 2021 年 2 月 17 日午前 8:58

とても役立つコンポーネントをありがとうございます！

ちょっとした機能追加は可能でしょうか？

カテゴリが非公開の場合、カテゴリバッジと同様に、<span.discourse-category-banners> または <div.category-title-header> 要素に restricted クラスを追加してください。

これにより、追加の CSS でバナーを調整し、ユーザーにこのカテゴリが特別であることを示すのに役立ちます。

現在も CSS でロックアイコンを選択して何らかの処理を行うことは可能ですが、複雑です。また、CSS には親要素セレクタが存在しないため、ロックアイコンの存在を基準にバナーの修正可否を判断することができません。

まだプルリクエストの作成方法については詳しくありませんが、もしこの変更にご賛同いただけるようなら、これをきっかけに学びたいと考えています。

Drew-ART · 2021 年 4 月 20 日午前 11:24

タグページで動作させることは可能ですか？タグバナープラグインを見つけましたが、そこにテキストやリンクを追加する機能はありませんでした。

トピック		返信	表示
Add banner to categories Support	5	197	2025 年 1 月 21 日
Discourse Category Headers theme component Theme component	191	17582	2026 年 3 月 7 日
Category List with Banners Theme component	18	4717	2024 年 6 月 14 日
Versatile Banner Theme component official , versatile-banner	104	44540	2026 年 4 月 10 日
Tag Banners Theme component official , tag-banners	9	17418	2025 年 9 月 30 日

カテゴリバナー

機能

設定

カスタマイズの注意点

アップデート

関連トピック