manuel
(Manuel Kostka)
1
このコンポーネントは、デフォルトのカテゴリページスタイル「カテゴリのみ」と「おすすめトピック付きカテゴリ」にオプションのバナーを追加します。
コンポーネント設定では、バナーの直下にカテゴリを定義し、バナーの色と見出しテキストを設定することでバナーを追加できます。また、デフォルトの彩色された境界線を非表示にするオプションもあります。
スタイルを追加するには、一般的なクラス、またはカテゴリ ID による特定のバナーを選択できます。
.category list .category-list-banner {
&.category-5 { [特定のバナーのスタイル] }
&:after { [見出しのスタイル] }
}
例えば、カテゴリを色分けすることも可能です。
または、背景画像を追加することもできます。
このコンポーネントはカテゴリページにレイアウト要素を追加するだけです。そのため、これらの見出しをサイトの他の場所で参照することはできません。もう一点注意：モバイル版では「カテゴリのみ」というデフォルトのページスタイルは存在しません。常におすすめトピックも表示されます。
クレジット: このコンポーネントは、Cfx.re コミュニティ の外観、およびその外観を実現するための @godgutten 氏のオリジナルソリューション（カテゴリバナーの追加方法 で共有）にインスパイアされました。
「いいね！」 28
tot
(Борис Мальцев)
4
Nolo さん、ありがとうございます！とても素晴らしいです。あなたのコンポーネントは私たちのコミュニティを向上させました。
「いいね！」 1
tot
(Борис Мальцев)
5
Noloさん、フォーラムのスタイルをナイトモードに切り替える際にもう一つ問題を見つけました。これを修正していただければ、完璧です！
manuel
(Manuel Kostka)
6
それは想定された動作のようです。色スロットは、CSS で background-color として使用できる任意の値を受け取ります。したがって、16 進数値を指定すると、異なるモードやテーマでも同じ色に保たれます。
背景色を本当に設定したくない場合は、none または transparent を指定してください。
モードに応じて変化する背景色を指定したい場合は、CSS カスタムプロパティを使用して設定する必要があります。Discourse で事前に定義されているもの（例：var(--secondary-high)）を使用することもできます。詳しくは、以下のページで説明されているように、自分で定義することも可能です。
「いいね！」 3
tot
(Борис Мальцев)
7
Nolo さん、ありがとうございます！助かりました。
「いいね！」 2
godgutten
(godgutten)
8
こんにちは。あなたが作り上げたものを見るのが大好きです。しかし、私の作品を盗むだけでなく、私にも功績を認めることは許されていますか…
manuel
(Manuel Kostka)
9
コンポーネントを気に入っていただけて嬉しいです！ただ、あなたの作品を盗用したと非難する理由がよくわからないのですが…？
このコンポーネントの作成は、こちらのトピックに触発されました。
OP（元の投稿者）にあなたのソリューションを紹介しましたが、その後、テンプレートをハードコーディングせずに、SCSS内の設定リストから値を取り出して解決する方法に興味を持ちました。そのため、コンポーネントコードは基本的にこのソリューションに関するものです。
https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo
いずれにしても、もし私の作品の一部を使用したと感じており、クレジットを記載し忘れている場合は、お知らせください。最初の投稿を更新します 
「いいね！」 1
godgutten
(godgutten)
10
はい、ぜひ何らかのクレジットをいただけると嬉しいです。しかし、それはあなた次第です。それ以外はうまくいっており、新しいユーザーにとってより簡単になるため、このテーマコンポーネントを投稿で推奨するつもりです。
「いいね！」 2
@ Nolo
TCで、またはテーマのCSSで、見出しテキストを左揃えにする方法はありますか（あなたの2番目の例のように）。
また、バナー画像を使用しない場合、ヘッダーをテキスト1行分の厚さにリサイズする方法はありますか。
もしあれば、テキストをそれほど大きくないサイズにリサイズすることはできますか。
「いいね！」 2
manuel
(Manuel Kostka)
12
はい、承知いたしました。これらのクラスを使用してバナーをスタイル設定できます。
一般的なクラスの既存の宣言を上書きしたい場合は、!important プロパティを使用する必要があります。たとえば、言及されたスタイルについては次のようになります。
.category-list .category-list-banner {
justify-content: flex-start !important;
min-height: unset !important;
&:after {
font-size: var(--font-up-3) !important;
}
}
これは、スタイルが実際には特定のバナーで宣言されているためです。コンポーネントで改善できるかもしれませんが、現時点では important を使用して上書きする必要があります。
「いいね！」 3
このコンポーネントをありがとうございます!! 政治フォーラムを開発しており、このような分離を適用できることは非常に重要です。
すでにフォーラムにとって大きな改善ですが、ヘッダーがURLで参照できるようになれば、世界が変わるでしょう。なぜなら、それによりフォーラムのトップにボタンを作成でき、ユーザーは同じページ内で簡単に移動できるようになるからです。フォーラムが（うまくいけば）非常に大きくなった場合、これは非常に機敏な機能となるでしょう。現在可能ですか？
「いいね！」 1
manuel
(Manuel Kostka)
14
@lisandro_iaffar さん、提案ありがとうございます。このコンポーネントは、HTMLテンプレートを変更しない軽量なソリューションを提供するだけです。セクションを参照したい場合は、GitHub - discourse/discourse-minimal-category-boxes で提供されているようなアプローチを使用する必要があります。
「いいね！」 2
お返事ありがとうございます。また、ご指導いただきありがとうございます 
そして、このコンポーネントにもう一度感謝します。フォーラムのレイアウトがとても良くなりました 
「いいね！」 2
cogdog
(Alan Levine)
16
カテゴリをいくつか作りすぎたので、グループに整理できるのは大変助かります。
試してみればわかりますが、これは古い、あまり使われていないカテゴリをフロントページから外す方法にもなり得ますよね？新しいサイドバーからアクセスできるようになります。
「いいね！」 1
manuel
(Manuel Kostka)
17
はい、もちろんです 実際、私はほとんどの場合、サイドバー、ヘッダー、ナビバー、カテゴリページなどのさまざまなページ要素でカテゴリを選択します。それはウェブサイトのサイト構造のようなものです。よく整理されていることは重要ですが、UIの表示方法を決定する必要はありません。
こんにちは、@manuelさん。この素晴らしいコンポーネントがスピーチのアップデート後も引き続き機能するかどうか知りたいです。インストールしましたが、動作しません。よろしくお願いします。
こんにちは、ようこそ 
テーマまたは個別のテーマコンポーネントにCSSを追加できます。
たとえば、カテゴリID 4に画像を追加したいと仮定すると、次のようなことを行います。
.category-list .category-list-banner {
&.category-4 {
background-image: url(https://images.unsplash.com/32/Mc8kW4x9Q3aRR3RkP5Im_IMG_4417.jpg);
background-size: cover;
}
}
これは単なる例です。詳細については、background CSSプロパティを参照してください。
役立つリンクも :
「いいね！」 2
