強化されたカテゴリボックス表示コンポーネント

カスタマイズ テーマコンポーネント
1

discourse-theme-category-homepage

コミュニティのフォーラム向けに、新しい category-box ホームページをかなり開発しました。これは私たちのニーズに特化したものなので、多くの人には役立たないかもしれませんが、アイデアの参考にされるかもしれません。

変更後/変更前

category-homepage
category-homepage1105×683 148 KB

initial-category-box
initial-category-box1106×600 98.3 KB

私たちの具体的なユースケース

私たちは多様なトピックを取り扱うコミュニティを持っています。地元 NGO を連携させており、それぞれが独自のメンバーを持っています。また、自律的なグループも存在し、それぞれが広告を出す必要があるアクションを 1 つまたは複数行っており、それらについて話し合うためのプライベートスペースも必要としています。

メンバーの多くは高齢者であり、3 クリックを超える操作は彼らにとって非常に困難です（そのため、通常の通知レベルの管理は彼らには不可能です）。

コミュニティは十分に大きいため、強力な分類システムが必要ですが、ユーザーのデジタルスキルや意欲は比較的低いため、できるだけ簡単で明確に使えるものにする必要があります。

トピックの整理

最上位カテゴリは、コミュニティの主な目的をホストするために使用されます。
グループに関連しないトピックは、最も近い最上位カテゴリに属し、その主要な点はタグでラベル付けされます。タグは主に、必ずしも最上位カテゴリに含まれるわけではありません。

各 NGO や地元グループは、最も明らかな関連性を持つ最上位カテゴリの公開サブカテゴリで告知を行い、静かにプライベートサブカテゴリで作業を行います。

したがって、ユーザーは、私たちの主な目的（最上位カテゴリ）、特定のトピック（複数の目的にまたがるタグ）、特定のグループ（公開サブカテゴリ）に関するすべてのコンテンツを簡単に検索できます。

機能

  • 各カテゴリを強調表示し、ウェブサイトのセクション全体として感じさせる。
    • クリック可能な要素には太字フォントで書かれ、アイコンを追加して、重要な部分に集中しやすくする。
  • 各カテゴリに追加情報を表示：
    • 通常の投稿数
    • 通知レベル選択器
    • 「このドメインに関連するすべての投稿を見るにはここをクリック」というリンクを追加し、さらに明確にする
  • カテゴリに関連するタグを追加
    • これらが私たちが議論している主要なテーマであることを非常に明確にするためにヘッダーを追加
    • これらのタグはテーマ設定で選択される
    • タグの表示は、タグが実際にタグらしく見えるように設計されており、ユーザーが「タグ」という言葉を使用する際に何を指しているかを理解できるようにする。
    • 注： 表示は「Tag icon」コンポーネントによって強化されます
  • サブカテゴリにヘッダーを追加し、これらのカテゴリが告知用であることをさらに明確にし、別のヘッダーでこれらのサブカテゴリがプライベートであることを明確にする（はい、ロックがあり、中級ユーザーなら誰でも理解します。しかし…）
    • 注： 表示は「Category icon」コンポーネントによって強化されます
  • これらの機能のほとんどは切り替え可能です。

インストール

注：このコンポーネントは現在開発中です。CSS のバグを修正したり、他の場所に波及している問題を修正したりしています。何か不自然な点があれば、ご容赦の上、お知らせください。

通常通りコンポーネントをインストールしてください。テーマまたはテーマコンポーネントのインストール方法
リポジトリ: https://framagit.org/oca/discourse-theme-category-homepage.git

今後の拡張機能のロードマップ

膨大な数の CSS バグを修正。
公開またはプライベートのサブカテゴリが存在しない場合でも、サブカテゴリのセパレーター/ヘッダーを強制的に表示させる問題を修正。
サブカテゴリボックスとトピックを表示する、より見やすいカテゴリページを作成。
Discourse チームがサブサブカテゴリが実現可能だと決定したら、すぐにすべてを更新（願わくば…）。

新しい機能の提案は歓迎しますが、非常に特定のユースケースに役立つ場合、または非常に簡単に実装できる場合のみ、このコンポーネントに追加します。追加される新しい機能はすべて切り替え可能になります。

「いいね！」 26
Problem with Enhanced category-box display theme component
Suggestions for achieving a custom layout without having to code everything
Any existing theme with categories on top as cards?
Theme suggestion
2

問題ありません。対応完了しました。

「いいね！」 7
3

この素晴らしいコンポーネントを作成してくださり、本当にありがとうございます！ :awthanks:

一つ質問なのですが、「特集トピックを含むボックス」というカテゴリ設定でこれを有効にすることは可能でしょうか？もし不可能であれば、実装可能な機能でしょうか、それとも何か問題が予想されますか？

よろしくお願いいたします。そして、またもや作成してくださり心から感謝申し上げます！ :pray:

「いいね！」 3
4

こんにちは、ありがとうございます。
現状ではそれは不可能です（調整されているボックスが異なるため）。しかし、簡単に実装できることではあります。もしよろしければ、PMで話し合いながらお手伝いすることもできますし、時間ができたら確認することもできます。そのためには、どのようなものを（そしてどのように表示させたいか）のスケッチをいただけると助かります。

「いいね！」 4
5

完全に理解しました。

私にとって、このコンポーネントの決め手となる機能は、各サブカテゴリに通知ステータスのベルを追加できる点と、カラム幅を自由に調整できるシンプルながら強力な仕組みです。私のユースケースでは、「特集トピック付きボックス」を有効にした状態でこれらの機能を利用できれば、まさに理想にかなうものになります。

私は初心者ですが、ぜひ実装に挑戦してみたいと思います。もし何かヒントがあれば教えていただければ幸いですし、他のカテゴリボックスコンポーネントを調査して、どう実現すればよいか自分で見つけ出せるはずです。数週間後にはこの課題について理解を深める時間ができるでしょうので、進展があればここで報告いたします。

よろしくお願いいたします。

「いいね！」 3
6

それを行うのに苦労しましたが、結局それほど難しくはありませんでした。

テーマコンポーネント内で、ハンドルバーコンポーネントを以下のように変更してください。

{{#each categories as |c|}}
  
  ...ベルの前にある処理...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...ベルの後にある処理...

{{/each}}

やり方がわからない場合は、Johaniのチュートリアルが「最初に確認すべき場所」として最適です。

また、タグについても同じ方法でできることがわかったら教えてください！その方法が見つかりません。

「いいね！」 5
7

@oca コア側で最近行った変更により、このテーマコンポーネントの SCSS のコンパイルに失敗するようになりました。修正は非常に簡単で、スタイルシートから以下の 2 行を削除する必要があります。

@import "common/foundation/variables";
@import "theme_variables";

（2 行目は、そのファイルが存在しなくなったため SCSS コンパイルエラーを引き起こします。ただし、どちらの行も不要です。コア変数とテーマ変数は、SCSS ファイルがコンパイルされる前に注入されるようになりました。）

「いいね！」 6
Custom CSS isn't applied to my Discourse
How do colors work and how to change them?
8

ご説明いただき、ありがとうございます。

削除されました。

「いいね！」 6
9

素晴らしい仕事だ！これはモバイルでは動作しないのか？

モバイル

image
image624×947 53.5 KB

デスクトップ

image
image1929×1297 374 KB

「いいね！」 1
10

モバイルでこれを機能させる方法を見つけたいのですが、デスクトップではクールに見えますが、モバイルで利用できなければ、それは無意味です。簡単な方法があるはずですが、わかりません。誰か提案はありますか？

「いいね！」 1
11

申し訳ありません、マルチポストです。

モバイル専用で Categories Layout Override を動作させることに成功しました。

そして、私の修正版 GitHub - cyanlabs/discourse-categories-layout-override を使用することで、categories_boxes としてオーバーライドを指定できるようになりました。
image
これにより、モバイルビューがこのプラグインを機能させるために必要なビューに強制されます。

タブレット

image
image813×949 79.8 KB

モバイル

image
image479×950 55.2 KB

明らかに理想的な解決策ではありませんが、機能するので、誰かがより良い解決策を見つけるまで、これは回避策です :slight_smile:

「いいね！」 9
How Can I Set Mobile Category Page Style?
12

テーマコンポーネント「Categories Layout Override」のカスタマイズ、ありがとうございます。テーマコンポーネント「Enhanced category-box display component」のカスタマイズも共有していただけますでしょうか。貴社のウェブサイトを拝見しましたが、「background-color」をクラス「category-logo」に使用されている点が素晴らしいと思いました。

「いいね！」 1
13

最近のカスタマイズありがとうございます。しかし、バージョン3.2.0.beta4-devへの最近のアップグレードにより、テーマコンポーネントが機能しなくなりました。また、モバイル表示のカスタマイズがDiscourseのコアに統合されることを願っています。デスクトップからモバイルまで同期したエクスペリエンスを求めているからです。

「いいね！」 1
14

残念ながら、修正方法がわかりません。

「いいね！」 2
15

最近、最新バージョンにアップグレードしたところ、「discourse theme category homepage」というテーマコンポーネントがモバイルで動作しなくなり、以下のメッセージが表示され続けます。

image
image1242×883 171 KB

私のサイトはこちらです：https://businesslab.vn/categories

「いいね！」 2
Preparing for Discourse's upgrade to Ember 5
16

@hoangphuctran93様、投稿を関連するテーマコンポーネントのトピックに移動しました（@oca様にもCC）。

「いいね！」 4
17

ああ、これは私にとって非常に役立つものになりそうですね！幅広いトピックを持つ活発なサポートコミュニティがありますが、おそらく多くの人々のデジタルリテラシーは非常に低く、巨大な庭の小さな区画に留まるでしょう。壊れているように見えるのは残念ですが、試してみるつもりです。@oca さんはまだそちらで積極的に利用されていますか？

18

#broken タグには注意してください。本当に壊れます。

デフォルトですべてのカテゴリをミュートし、利用可能なカテゴリの概要を伝えるために #welcome タグの付いたトピックを準備することを検討します。グループをカテゴリの監視に関連付けると、人々がグループに参加してカテゴリのミュートを解除/発見できる段階的なエクスペリエンスを作成できます。ごく少数のウェルカムトピックで、読者に利用可能なものの概要を提供し、どこで参加したいかを選択させることができます。情報過多を避けるために、通知の文書化も重要です。

19

注意喚起ありがとうございます、それなら避けたほうがよさそうですね…

確かに！

20

テーマコンポーネントをインストールしてみることもできますが、本番環境ではやめてください :slight_smile:

「いいね！」 1