MD トピックリストコンポーネント

Steven · 2021 年 1 月 22 日午後 12:28

モバイル用に別のコンポーネントを作成しました：

pinder99 · 2021 年 1 月 26 日午前 11:00

@Steven、カテゴリのみの設定になっているインデックスまたはホームページのカテゴリボックス内に「最後の投稿者」も追加できますか？

Steven · 2021 年 1 月 26 日午後 3:43

テンプレートの書き換えが必要です。コンポーネントにこの機能を追加するには選択肢が多すぎますが、カスタマイズセクションで対応できます。

おそらく、カテゴリボックス（トピック付き）を使用して、以下のテンプレートを書き換える必要があるでしょう：https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs

pinder99 · 2021 年 1 月 28 日午前 10:13

@Steven、改めてありがとうございます。もう一点、もし「最新」または「人気トピック」のカテゴリーを選択すると、インデックスページでは「最終投稿者」が表示されなくなりますが、カテゴリーセクション内では表示されます。

Steven · 2021 年 1 月 28 日午後 3:48

このシナリオでどのテンプレートが使用されているか確信が持てませんが、おそらくこのリストにあるでしょう：https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components

ただし、どのテンプレートかはっきりしません。私の最善の推測では、こちらです：https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs

pinder99 · 2021 年 2 月 2 日午前 5:18

「カテゴリにトピック」だと思いますが、動作しません。@Steven さん、トピックの直下に「最後の投稿者」のみを表示するために何を追加すればよいか教えていただけますか？

david · 2022 年 1 月 26 日午後 3:35

@Steven 新しい「ember cli」環境でこのコンポーネントを修正するためのPRを作成しました。https://meta.discourse.org/t/new-installs-will-default-to-ember-cli-builds-in-production/208282:

Steven · 2022 年 1 月 26 日午後 4:48

ありがとうございます。すぐにマージしましたので、皆さま安全にアップデートできます。

danielabc · 2022 年 2 月 19 日午前 10:30

コンポーネント、おめでとうございます。とても気に入りました！コンポーネントを使用して、トピックを作成した人のアバターをトピックの前に表示することは可能ですか？もし可能であれば、どのようにすればよいですか？私が言っていることの例を挙げます。

トピックの前のアバター写真は作成者で、トピックの最後のアバターは最後に投稿した人になりますが、どのようにすればこれを実現できますか？

[image]

Steven · 2022 年 2 月 19 日午後 12:32

@dax テーマコンポーネントの一部を使用して、作成者のアバターを表示しました: Topic Author

Header セクションに追加する部分は次のとおりです。

<td class='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}}
  </a>
</td>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...)</script> の中

そして

{{raw "topic-list-header-column" number='true'}}

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...)</script> の中

こちらが使用できる完全なコードです。

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}}
  </a>
</td>

<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
	  {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
                                   topicId=topic.id
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
      {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type="script/discourse-plugin">
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()

});

})();
</script>

danielabc · 2022 年 2 月 20 日午前 5:15

お返事ありがとうございます。なぜか私のフォーラムのUIが投稿された画像と異なっています。右上のアバターが上にあり、投稿した人の「@」が下にあります。これはUIを完全に壊しています。（トピックによっては、他のトピックとの間にかなりのスペースがあり、混乱しています。）あなたの写真のように、情報を横に置いておくにはどうすればよいですか？また、左側のアバターは最後に投稿した人ですが、トピックを作成した人に変更する方法はありますか？（右上のアバターは最後に投稿した人になりますか？）右上のアバターをトピック作成者に設定するので、カテゴリ名の横にあるトピック作成者の名前を削除する方法はありますか？

Steven · 2022 年 2 月 20 日午前 11:40

レイアウトの問題はカスタムCSSによるものだと推測しますが、すべてを理解できたわけではありません。

修正版はこちらです。

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}}
  </a>
</td>

<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
	  {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
                                   topicId=topic.id
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
      {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type="script/discourse-plugin">
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});

})();
</script>

最初の列のサイトを修正するには、以下を追加してください。

.topic-list .author {
    width: 50px;
}

これで、お探しのものに近いものになるはずです。

profcaju · 2023 年 2 月 26 日午前 5:29

スティーブン、ありがとうございます。まさにこれを達成しようとしていました！

このMODをあなたのテーマコンポーネントにマージする予定はありますか？私にとっては大きなことです。

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

Steven · 2023 年 2 月 26 日午後 7:40

いいえ、これを行う予定はありません。これら 2 つのコンポーネントは異なる概念として捉えています。ただし、カスタマイズセクションで独自の結合を簡単に作成して、前述の例を使用できます。

digitaldominica · 2023 年 12 月 30 日午後 1:29

こんにちは、このコンポーネントを使用している場合、テーマのカテゴリトピックリストにタグアイコンが表示されません。

Arkshine · 2023 年 12 月 30 日午後 2:32

Tag Icons コンポーネントを使用していますか？私の側では表示されています。あなたのテーマは何ですか？

digitaldominica · 2023 年 12 月 30 日午後 2:34

いや、そうではありません。mdトピックリストのモバイルコンポーネントにはタグアイコンが表示されますが、これには表示されません。無効にして、タグアイコンを試してみます。

Steven · 2024 年 1 月 2 日午後 12:56

フォーラム設定の「svg アイコンサブセット」でアイコンを設定しましたか？

fa-tag がある場合は、この設定で削除してください。

Ahmed26 · 2024 年 3 月 21 日午後 3:00

このコンポーネントを適用すると、フレームの調整ボタンが表示されません。

Steven · 2024 年 3 月 21 日午後 5:26

テーマコンポーネントやテーマの重いCSS編集を使用していますか？このようにはならないはずです。

もっとこのような感じです。

トピック		返信	表示
MD Topic List Mobile component Theme component	61	6770	2026 年 4 月 7 日
Topic Author Theme component topic-author , end-of-life	63	12615	2024 年 10 月 4 日
Sam's Simple Theme Theme official , sams-simple-theme	368	82811	2025 年 2 月 17 日
Discourse Topic List Author & Posters Theme component	8	219	2026 年 2 月 5 日
Display Topic Author on Topic List UX	7	2568	2021 年 2 月 8 日

MD トピックリストコンポーネント

関連トピック