トピックリストのエントリをカスタマイズ（並べ替え、グループ化、フィルタリング）して、整理を改善する

Sören_Geier · 2022 年 8 月 20 日午後 6:28

TLDR:
filteredTopics (26行目) の構成を変更する最も速い方法は？トピック（どのプロパティを持つか）を収集するかどうかを完全に制御できるようにしたいです。

app/assets/javascripts/discourse/app/templates/components/topic-list.hbs

dc5dc7830


      
          
          <PluginOutlet @name="before-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled
              lastVisitedTopic=this.lastVisitedTopic
              discoveryList=this.discoveryList
              hideCategory=this.hideCategory}} />
          
          <tbody class="topic-list-body">
            {{#each this.filteredTopics as |topic index|}}
              <TopicListItem @topic={{topic}} @bulkSelectEnabled={{this.bulkSelectEnabled}} @showTopicPostBadges={{this.showTopicPostBadges}} @hideCategory={{this.hideCategory}} @showPosters={{this.showPosters}} @showLikes={{this.showLikes}} @showOpLikes={{this.showOpLikes}} @expandGloballyPinned={{this.expandGloballyPinned}} @expandAllPinned={{this.expandAllPinned}} @lastVisitedTopic={{this.lastVisitedTopic}} @selected={{this.selected}} @lastChecked={{this.lastChecked}} @tagsForUser={{this.tagsForUser}} @focusLastVisitedTopic={{this.focusLastVisitedTopic}} @index={{index}} />
              {{raw "list/visited-line" lastVisitedTopic=this.lastVisitedTopic topic=topic}}
              <PluginOutlet @name="after-topic-list-item" @args={{hash topic=topic index=index}} @connectorTagName="tr" />
            {{/each}}
          </tbody>
          
          <PluginOutlet @name="after-topic-list-body" @args={{hash
              topics=this.topics
              selected=this.selected
              bulkSelectEnabled=this.bulkSelectEnabled

コミュニティの皆様へ

ホスト環境で GitHub - discourse/discourse-topic-thumbnails: Display thumbnails in topic lists テーマコンポーネントを使用していますが、ニーズに合わせてさらに変更を加えたいと考えています。

すべてのトピックを 1 つの大きなグリッドアイテムの塊に混ぜ合わせるのではなく、ある程度の順序を導入したいと考えています。
目指しているのは次のとおりです。
まず、既読/未読で並べ替え、次にカテゴリで並べ替え、その後、時系列でグループ化します（例：今日（今日の関連投稿すべて）、昨日、先週などのバケットを作成します）。

したがって、トピックリストは、互いに 3 つの異なるグリッドで次のように表示されるはずです。

<今日、昨日、先週> はグループ化を表します

ピン留め:
トピック 20、トピック 30、トピック 40

未読:
<今日：[ART：トピック 1、トピック 2]、[DESIGN：トピック 4]> <昨日：[CONCEPT：トピック 3]、[OTHER_CATEGORY：トピック 6、トピック 11]> <先週：トピック 8、トピック 10>

既読:
<今日：[ART：トピック 4、トピック 12]、[DESIGN：トピック 4]> <昨日：[CGI：トピック 13]、[OTHER_CATEGORY：トピック 16、トピック 21]>、<先週：トピック 18、トピック 100>

私の主な質問は、discourse/app/assets/javascripts/discourse/app/templates/components/topic-list.hbs at dc5dc783094eff098d6c51a8c1d64a0fe9dbc98b · discourse/discourse · GitHub で filteredList によって反復処理される結果セットを作成するクエリをどのように作成/拡張できるかということです。

これがどこかで入力されている場所を見つけましたが、「拡張」する方法がわかりませんでした。結果セットに影響を与える可能性のある queryParam システムといくつかのルート関連のものがあるようですが、理解できませんでした。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/topic-list.js

dc5dc7830


      
          
          export default Component.extend(LoadMore, {
            tagName: "table",
            classNames: ["topic-list"],
            classNameBindings: ["bulkSelectEnabled:sticky-header"],
            showTopicPostBadges: true,
            listTitle: "topic.title",
            canDoBulkActions: and("currentUser.staff", "selected.length"),
          
            // Overwrite this to perform client side filtering of topics, if desired
            filteredTopics: alias("topics"),
          
            _init: on("init", function () {
              this.addObserver("hideCategory", this.rerender);
              this.addObserver("order", this.rerender);
              this.addObserver("ascending", this.rerender);
              this.refreshLastVisited();
            }),
          
            @discourseComputed("bulkSelectEnabled")
            toggleInTitle(bulkSelectEnabled) {

適切な場所を教えていただけますか？

上記で言及したテーマコンポーネントを使用しているため、できることには制限があります。
たとえば、filteredList を未読投稿トピックのみに制限する方法を示すことができれば、そこから進めることができます。

どうもありがとうございました！

CC @pfaffman

JammyDodger · 2022 年 8 月 20 日午後 7:23

余談ですが、Topic List Thumbnails はプラグインではなく、Customization > Theme component です。:＋1:

Sören_Geier · 2022 年 8 月 20 日午後 8:44

はい、ありがとうございます。それに気づいていましたが、正しい用語を見落としていました。修正します。

Sören_Geier · 2022 年 8 月 23 日午前 6:11

Jammy、tldrを追加しました。その短縮された質問について何か手がかりはありますか？
ありがとう

JammyDodger · 2022 年 8 月 23 日午前 7:40

申し訳ありませんが、それは私のスキルセットを超えています。

Developing Discourse Themes & Theme Components のクラスの変更方法をご覧になりましたか？そこに役立つものがあるかもしれません。キーワードを広げて検索すると、役立つ例が見つかるかもしれません。

Joe:

modifyClass()

このメソッドを使用して、コンポーネントやコントローラーなどのクラスのメソッドを拡張またはオーバーライドできます（参照：Ember Classes ）。また、情報を取得したり、変数を設定したりするのにも役立ちます。
<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('controller:composer', {
    actions: {
      newActionHere() { }
    }
  });
</script>

Sören_Geier · 2022 年 8 月 23 日午前 9:54

ええ、ありがとう、ジャミー。それらは認識しており、いくつかのプライベートプラグインも作成（または拡張）しました。しかし、問題は、リストがどこで集計されているのか、そしてQUERYING TOPICsのロジック全体がどのように機能するのか、または実際にはどこにあるのかを理解できないことです。どちらか一方でもわかれば、先に進むことができます。

Sören_Geier · 2022 年 8 月 24 日午前 10:12

Gitコードで確認したので、CCにさらに数名追加します。

JammyDodger · 2022 年 8 月 24 日午前 10:45

念のためお伝えしておきますが、チームメンバーをこのようにタグ付けするのはMetaのエチケットとして非常に悪い行為ですので、他の人が模倣しようとするパターンを作らないように、それらを削除しました。

トピックがあまり注目されなかったとのこと、大変申し訳ありません。これは私が知らないことなので、直接お答えすることはできません。

その後、調査や試みは進みましたか？

Sören_Geier · 2022 年 8 月 24 日午前 11:51

賢く適切な人をCCに入れたと思っていたのですが🤣

そして、いいえ、これ以上進んでいません。トピックリストを3回表示し、それぞれで不要なトピックを非表示にしようとしましたが、その後に「さらに読み込む」機能が起動し、DOMの大部分が書き直され、JavaScriptの計算が重すぎて奇妙な効果が発生しました。

Discourseが提供するAPIを使用して、適切に行う必要があることに気づきました。

Sören_Geier · 2022 年 8 月 27 日午前 7:34

いくつか質問があります。

ピン留めされたすべてのトピックを取得できるAPIエンドポイントはありますか？ /latest.json や /top.json と同様のものはありますか？
トピックリストのアイテムのステータスを変更した後、変更がすぐに反映されるように、トピックリストを再レンダリングさせるためのJavaScriptコマンド（プラグイン内にあると仮定）はありますか？ topics.[] のオブザーバーで対応する必要があるかと思います。

また、トピックリストをカスタマイズするために必要な情報がすべて含まれている、以下の記事を見つけました。

https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949

nathank · 2022 年 9 月 6 日午前 10:08

進捗があったとのこと、おめでとうございます。まさに未踏の領域ですね！

Sören_Geier · 2022 年 9 月 6 日午前 10:15

ピン留めされたトピックは、/search.json?expanded=true&q=in%3Apinned をクエリすることで取得できます。
実際の検索キーワードなしで検索を使用します。

これにより、トピックIDのリスト、または単純化されたトピックデータセットのみが返されます。トピックに関する完全なデータセットを取得するには、/t/${topic.id}.json に対してフォローアップのajaxリクエストを行う必要があります。

JSでトピックリストの再レンダリングを強制する方法について、まだ興味があります。

トピック		返信	表示
Filtered Topic Lists Theme component	14	979	2025 年 12 月 22 日
Latest/Hot/Top - what about Best/Popular? Request for automatic selection Support	3	204	2024 年 7 月 7 日
Topics list filter feature Feature feedback , topic-filter	41	4761	2024 年 11 月 24 日
Filtering topic lists in Discourse Using Discourse search , reference , topic-filter	19	1287	2026 年 4 月 3 日
Featured Lists Theme component	29	2295	2026 年 2 月 18 日

トピックリストのエントリをカスタマイズ（並べ替え、グループ化、フィルタリング）して、整理を改善する

関連トピック