Rhidian
(Rhidian Bramley)
1
このテーマコンポーネントは、Discourse のカテゴリヘッダーにいくつかの機能強化を提供します。
「標準」の Discourse カテゴリヘッダーは、各カテゴリページの上部、ナビゲーションリンクとトピック一覧の上に表示されます。通常、カテゴリ設定でカテゴリロゴ画像がアップロードされている場合にのみ表示されます。ヘッダーには、ロゴとカテゴリの簡単な説明（「～について」トピックの最初の段落から取得）が表示されます。
このテーマコンポーネントが提供する機能強化
カテゴリヘッダーは、現在すべてのカテゴリでデフォルト表示されます。ロゴ（設定されている場合）とカテゴリの説明に加えて、カテゴリ名も含まれるようになりました。さらに、ロゴの背景画像を含めることもでき、カテゴリカラー設定を使用して「ボックス」または「バナー」のいずれかで表示するようにスタイルを設定できます。テーマ設定には、さまざまな設定可能なオプションがあります。
テーマ設定
- カテゴリ名を表示: ヘッダーにカテゴリ名を表示
- カテゴリ説明を表示: カテゴリ説明テキスト（「このカテゴリについて」トピックの最初の段落）を表示
- 説明テキストサイズ: カテゴリ説明内のテキストサイズ
- テキストの配置: カテゴリヘッダー内のテキストの配置
- サブカテゴリヘッダーを表示: サブカテゴリのヘッダーを表示
- 親カテゴリ名を表示: サブカテゴリヘッダーに親カテゴリ名をプレフィックスとして追加（これは親カテゴリページへのパンくずリストリンクとして機能します）
- ロックアイコンを表示: 権限で保護されたカテゴリにロックアイコンを表示
- カテゴリロゴを表示: ヘッダー内にカテゴリロゴ画像を表示
- 親カテゴリロゴを表示: サブカテゴリロゴが設定されていない場合に親カテゴリロゴを表示
- サイトロゴを表示: カテゴリロゴが設定されていない場合に小さなサイトロゴを表示
- ロゴの位置: ボックス内のロゴの位置
– ‘left’（左）と ‘right’（右）は、ロゴをテキストと同一直線上に表示します。
– ‘top’（上）は、ロゴをテキストと揃えて上に表示します。
- ロゴのサイズ: ヘッダー内のロゴのサイズ
– Small（小）は、サブカテゴリボックスロゴと同様の高さ 50px です。
– Standard（標準）は高さ 150px です。
– Original（元）はアップロードされた画像のサイズです。
- ヘッダースタイル: ヘッダースタイルを以下から設定:
– Box（ボックス）: カテゴリヘッダーを標準の Discourse ボックスと同じスタイルで表示
– Banner（バナー）: ヘッダーの背景をカテゴリの背景色に、テキストを前景色に設定
– None（なし）: 境界線や背景スタイルを適用しない
- ヘッダー背景画像: カテゴリ背景画像をアップロードした場合に適用
– ‘contain’、‘cover’、‘resize’ は背景をヘッダー内に表示します。
– ‘outside’ は Discourse のデフォルトで、ヘッダー外（ページ全体）に表示します。
- モバイルで表示: モバイルデバイスでカテゴリヘッダーを表示
- モバイル配置を強制: ロゴとテキストのモバイル配置をヘッダーの上部中央に強制
- カテゴリ説明がない場合は非表示: カテゴリ説明が設定されていない場合にヘッダーを非表示
- カテゴリの例外を非表示: これらのカテゴリではヘッダーを表示しない
テーマコンポーネントのインストール
Git リポジトリ: https://github.com/naidihr/discourse-category-headers
テーマまたはテーマコンポーネントをインストールする方法は？
クレジット
@Johani 氏による優れた Discourse テーマの開発者ガイド に感謝します。
このテーマコンポーネントは、特に @awesomerobot 氏による Discourse カテゴリバナー テーマなどの他のテーマに触発されました。
例
ボックススタイル: カテゴリヘッダーをサブカテゴリボックスと同じスタイルで表示
サブカテゴリ: サブカテゴリにはロゴが設定されていませんが、親カテゴリのロゴを継承するように設定されています。また、親カテゴリ名はパンくずリストリンクとして表示されるように設定されています。
サブカテゴリに独自のロゴがある場合は、代わりにそれが表示されます。
モバイルビュー: 異なるテキストとアイコンの配置を示しています。
テキストサイズ設定。
配置オプションの例: テキスト中央、ロゴ右。
バナースタイル: カテゴリの背景色と前景色を使用
背景画像: カテゴリの背景画像を使用
「いいね！」 82
豊富な選択肢により、非常に柔軟で、見た目も素晴らしいです！
「いいね！」 21
Rhidian さん、共有されたスクリーンショット（下記リンク）でカテゴリがグリッド形式で表示されるようにするための設定値を共有していただけますか？
このテーマコンポーネントをインストールしましたが、各カテゴリページの上部に「Box ヘッダー」しか表示されません。お手数ですが、ご協力をお願いします！
「いいね！」 3
実は、解決方法がわかりました。
設定の下に以下の項目が抜けていました：
「いいね！」 5
Rhidian
(Rhidian Bramley)
7
素晴らしいです、@labrumfield 
。回答を投稿してくださってありがとうございます。きっと他の人にも役立つと思います。テーマコンポーネントがうまく機能することを願っています。
「いいね！」 1
この「サブカテゴリ付きボックス」設定を公開せずに、新しいテーマでプレビューできる方法をご存知でしょうか？
Rhidian
(Rhidian Bramley)
9
「プレビュー」とはどういう意味かよくわかりません。テーマとテーマコンポーネントのプレビューは、「カスタマイズ」管理設定で行うことができます。
理想的には、公開せずに「サブカテゴリ付きボックス」設定をプレビューしたいと考えています。あるいは、この設定を他のテーマやテーマコンポーネントではなく、特定のテーマコンポーネントのみに関連付ける方法があればと思います。
そのような方法はないと思うのですが、何かアイデアがあれば教えていただければ幸いです。ありがとうございます！
Rhidian
(Rhidian Bramley)
11
サブカテゴリ設定付きのボックスはこのコンポーネントの一部ではありません。これは Discourse のカテゴリ設定です。
それを「プレビュー」することはできませんが、一時的に有効にして外観を確認することはできます。カテゴリ設定では、サブカテゴリを行またはボックスとして表示するかを指定します。
「いいね！」 2
こんにちは、
カテゴリー設定を変更したところ、カテゴリーの見出しが少しおかしくなってしまいました（画像参照）。
変更した設定は、「サブカテゴリリストのスタイル」を「ボックス」から「おすすめトピック付きボックス」に変更したものです。他の設定は変更されていないと思います。バナーを左上のボックスではなく、上部に横断するように元に戻す方法をご存知でしょうか？
また、設定を「ボックス」に戻しても、元に戻りません。
どうもありがとうございます。これは本当に、本当に、本当に素晴らしいコンポーネントです。
私は運試しに、YouTube の動画と SoundCloud のポッドキャストを追加してみましたが、残念ながらカテゴリボックスには表示されませんでした。
もし画像や動画、音声から選択できるようになれば、カテゴリの概要を人々に紹介する素晴らしい方法になると思います。画像の代わりに、各カテゴリの短い動画イントロを作成することも可能です。このようにすれば、潜在的なメンバーは短いテキストで概要を確認し、カテゴリについての紹介動画を見たり、好みに合わせて音声版やポッドキャスト版を聴いたりできるようになります。
しかしながら、あなたの努力と貢献に心から感謝申し上げます。
「いいね！」 1
バナーをレスポンシブにするための最適な寸法とオプションは何ですか？もしかしたら、別のコンポーネントを確認する必要があるかもしれません。
カテゴリ情報を優れたデザインで表示できるといいですね。
このモジュール、ありがとうございます。素晴らしいです。
「いいね！」 1
Rhidian
(Rhidian Bramley)
15
バナーは標準の Discourse のレスポンシブテンプレートを使用しているため、お使いのデバイスに合わせて自動的にサイズが調整されます。
「いいね！」 1
自動修正された設定が、デスクトップとモバイル機器でのフルバナー幅には適していないことがわかりました。
そのような例はありますか？もしかするとCSSとメディアクエリで対応できるかもしれませんが、それは皆にとって役立つかもしれません。あるいは、私の設定に何か見落としていることがあるのかもしれません。
リディアン、返信ありがとうございます。
こんにちは、
素晴らしいテーマコンポーネントを利用させていただいておりますが、設定を変更してもレイアウトに変化が見られません。説明が表示されませんし、ロゴを「上」「左」「右」に移動させても反映されません。
何が不足しているのでしょうか？
このトピックを現在も監視している人はいますか、それともこのテーマコンポーネントはもうメンテナンスされていないのでしょうか。
Rhidian
(Rhidian Bramley)
21
コンポーネントに変更はありません。このような場合、他のコンポーネントがそれと相互作用している可能性があります。コンポーネントを一つずつ無効にして、特定できるか確認することをお勧めします。特定できた場合は、お知らせください。
「いいね！」 2
evantill
(Eric Vantillard)
22
カテゴリ説明内のリンクが、component.css 内の CSS ルール a,a:visited {color: inherit;} により、通常のコードのように表示されています。
これは意図した動作でしょうか？
