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

Steven · 2020 年 3 月 27 日午後 1:46

コンポーネントを直接編集して、ヘッダー部分を変更し、これを貼り付けることができます。これにより、以前のバージョンが使用されます。

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

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

<td class='main-link clearfix' colspan="1">
  <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"}}
    {{~#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> &nbsp;
    {{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">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

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

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" 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'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#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>
(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>

WorldIsMine · 2020 年 3 月 27 日午後 5:05

ありがとうございます

Steven · 2020 年 3 月 27 日午後 5:31

編集したくない方、また現時点で Discourse フォーラムのアップグレードができない方のために、専用のブランチを作成しました。

新しいコンポーネントをインストールし、高度な設定を使用してください。

テーマを含むリポジトリ: https://github.com/iunctis/md-topic-list
ブランチ名: bf-20200323

2020 年 3 月 23 日以降の Discourse バージョンよりも古いバージョンと互換性のあるコンポーネントが利用可能です。このコミットより前です。

Steven · 2020 年 3 月 30 日午後 7:59

モバイルでのトピック一覧の表示について少し試作してみました。まだ手を入れる必要がありますが、このようなデザインに興味がありますか（これは別コンポーネントになります）：

現在のモバイルでのトピック一覧の表示：

アバターは引き続きユーザーカードを開き、日付は最後の投稿にリンクします。

ScammerRevolts · 2020 年 3 月 31 日午前 6:55

ぜひそうしたいですね。特に、モバイルとデスクトップのレイアウトが全く別物ではなく、似たようなものになるのは素晴らしい追加になると思います

jrgong · 2020 年 3 月 31 日午後 8:45

プレビューリンクが機能しません。アクセスしようとすると、次のエラーメッセージが表示されます:

アクセス拒否

/theme/Steven/md-topic-list.json の読み込み中にエラーが発生しました

何らかの問題が発生しました。

Steven · 2020 年 3 月 31 日午後 8:48

申し訳ありません。以前、Discourse のテーマページを整理したのですが、少しやりすぎました。

現在は修正済みです。ご報告ありがとうございます！

jrgong · 2020 年 4 月 4 日午前 10:14

こんにちは @Steven

私はすでに 2.4.1 にアップデートしていますが、アバターはまだ表示されていません。私のトピックのプレビュー画像をご覧ください。

Steven · 2020 年 4 月 4 日午前 11:21

このブランチを試しましたか？

2020 年 3 月 23 日以前の Discourse バージョンをお使いの場合は、フォーラムをアップグレードするまで、このブランチを使用する必要があります。

jrgong · 2020 年 4 月 25 日午後 1:03

このテーマコンポーネントを Topic List Previews プラグインと併用している方はいますか？それとも結局問題が発生しているのでしょうか？

現在、Sam の minimal テーマを使用していますが、現状では Topic List Previews とは互換性がありません。そのため、両方を実現するためにテーマを切り替えることを検討しています：ミニマルなトピックリストとトピックの画像プレビューの両方を併用したいと考えています。

Steven · 2020 年 4 月 25 日午後 1:10

これは予想通りです。トピックリストプレビューのプラグインはトピックリストアイテムのテンプレートを上書きするため、このテーマコンポーネントも同様です。プラグインの方がテーマコンポーネントよりも優れていると考えられるため、両方を併用する最善の方法は、トピックリストプレビューのプラグインをフォークしてテンプレートをカスタマイズすることです。

私自身もカスタマイズしたフォークを作成しましたので、どのように行うことができるか確認してみてください：https://github.com/iunctis/discourse-topic-previews

特にこれらの変更については：https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41（このバージョンをあなたのフォーラムに推奨はしません。私自身のカスタマイズされたテーマが付属しており、多くのユーザーが好まないようなタイルのいくつかを変更しているためです）

元のプラグインのデスクトップ用テンプレートはこちらです。これを始めるのに最適な方法です：https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

完全に可能ですが、プラグインを最新の状態に保つためにGitHubにある程度慣れていることと、テンプレートのカスタマイズに少し慣れておく必要があります。

Steven · 2020 年 5 月 19 日午後 7:51

さっき少しアップデートを適用しました。新機能はありませんが、新しいサムネイル関数との互換性を追加しました。

このテーマコンポーネントは、以下のコンポーネントと互換性があります。

nory · 2020 年 7 月 7 日午後 7:09

こんにちは、このプラグインとも互換性がありますか？

ありがとうございます、
Deb

Steven · 2020 年 7 月 7 日午後 8:15

残念ですが、同じファイルを編集しているため、それはできません。

ヘッダーコードを変更し、タイルのスタイルを私の修正と統合すれば、両方を機能させることは可能です。ただし、その仕組みを理解する必要があります。

私の古いカスタム版のトピックリストプレビューからヒントを得ることができます（公式のサムネイルテーマコンポーネントが登場する前のバージョンなので、現在は機能しない可能性があります）：https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr

ただし、一部の要素で異なる CSS クラスや配置を使用していたため、あなたのフォーラムでは機能しない可能性があります。

pinder99 · 2021 年 1 月 20 日午前 10:20

こんにちは、@Steven さん。しばらくあなたのプラグインを使わせていただいております。トピックからアクティビティタブとビュータブを削除し、それらをあなたのプラグインのようにトピックの下に移動させたいと考えていますが、うまくいきません。お手数ですがご支援いただけますでしょうか。画像のように日付（アクティビティ）を追加したいだけです。

Steven · 2021 年 1 月 20 日午後 12:57

まず、テーブルの構造を変更し、表示タブとアクティビティタブの列を削除する必要があります。

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#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'}}
</script>

返信列も削除したい場合は、最後の行も削除できます。

次に、コンテンツの主要部分に取り組みます。まず、2 つの列を削除しました。

<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='main-link clearfix' colspan="1">
  {{~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}}

</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='main-link clearfix' colspan="1">
  {{~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>開始: <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> by <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">最終投稿: {{format-date topic.bumpedAt format="tiny"}}</a> by <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_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}}

</script>

ただし、これはあくまで最初の草案であり、まだテストしていません。span クラスを追加したり、日付形式を変更したり（format=“tiny” ではなく format=“medium” を使用するなど）する必要があるかもしれませんが、構造自体はほぼ問題ないはずです。

pinder99 · 2021 年 1 月 20 日午後 1:02

本当にありがとうございます、@Steven。これがまさに私が求めていたものです。迅速な対応に感謝します。あと一点だけ、「admin」と「Last post」の間に間隔がないのですが、どのようにしてスペースを追加すればよいでしょうか？

Steven · 2021 年 1 月 20 日午後 1:29

<br> を追加しましたが、反映されませんでした。span タグ内に配置するか、span タグにクラス要素を追加することに抵抗がある場合は、間隔を強制的に空けるために   を使用してください。

pinder99 · 2021 年 1 月 20 日午後 2:39

nbsp は完璧に機能しました

pinder99 · 2021 年 1 月 22 日午前 8:37

@Steven デスクトップでは正常に動作しています（さらにデータを追加しました）が、モバイル版では表示されません。お手伝いいただけますでしょうか。

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

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

関連トピック