MD Topic List-Komponente

Steven · 22. Januar 2021 um 12:28

I created a separate component for mobile :

pinder99 · 26. Januar 2021 um 11:00

@Steven can we also add “last post by” inside a category box on the index or homepage which is set to categories only

Steven · 26. Januar 2021 um 15:43

You will need to rewrite a template, there are too many options for me to add this in my component, but it can be done in your customize section

My guess is you should use categories boxes with topics and rewrite this template : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs

pinder99 · 28. Januar 2021 um 10:13

@Steven thanks again and one last thing if i choose categories with latest or top topics then i am unable to see the "Last Post BY " on index page but it is visible inside the category sections

Steven · 28. Januar 2021 um 15:48

I’m not sure what templates is used in this scenario, it’s probably on this list : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components

But I’m note sure which one, my best guess is this one : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs

pinder99 · 2. Februar 2021 um 05:18

I think it is “categories with topic “ but it is not working , @Steven can you share what i need to add for just “last post by “ below topics

david · 26. Januar 2022 um 15:35

@Steven Ich habe gerade einen PR erstellt, um diese Komponente unter der neuen ‘ember cli’-Umgebung zu beheben:

Steven · 26. Januar 2022 um 16:48

Danke, ich habe es so schnell wie möglich zusammengeführt, jeder kann sicher aktualisieren

danielabc · 19. Februar 2022 um 10:30

Herzlichen Glückwunsch zu der Komponente, sie hat mir sehr gut gefallen! Ist es möglich, die Komponente zu verwenden und den Avatar der Person, die das Thema erstellt hat, vor dem Thema anzuzeigen? Wenn ja, wie mache ich das? Ein Beispiel, wovon ich spreche

Das Avatarfoto vor dem Thema wäre der Ersteller, und der Avatar am Ende des Themas, der zuletzt gepostet hat, wie mache ich das?

[image]

Steven · 19. Februar 2022 um 12:32

Ich habe einen Teil der @dax-Themenkomponente verwendet, um den Autoren-Avatar anzuzeigen: Topic Author

Hier sind die Teile, die im Abschnitt Header hinzugefügt werden sollen

<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>

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

Und

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

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

Hier ist der vollständige Code, den Sie verwenden können

<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 · 20. Februar 2022 um 05:15

Vielen Dank, dass Sie mir geantwortet haben. Aus irgendeinem Grund ist die Benutzeroberfläche meines Forums nicht dieselbe wie auf dem von Ihnen geposteten Bild. Der Avatar in der rechten Ecke ist oben und das @ der geposteten Person ist unten, was die Benutzeroberfläche total zerstört. (Es gibt viel Platz zwischen einigen Themen und nicht zwischen anderen, was zu Verwirrung führt.) Wie kann ich es beiseite legen, mit den Informationen an der Seite? (Wie auf Ihrem Foto?) Und der Avatar auf der linken Seite ist die Person, die es zuletzt gepostet hat. Gibt es eine Möglichkeit, dies zu der Person zu ändern, die das Thema erstellt hat? (Während der Avatar in der rechten Ecke die letzte Person wäre, die gepostet hat?) Da ich den Avatar in der rechten Ecke für den Ersteller des Themas belassen werde, gibt es eine Möglichkeit, den Namen des Erstellers des Themas neben dem Kategorienamen zu entfernen?

Steven · 20. Februar 2022 um 11:40

Ich bin mir nicht sicher, ob ich alles verstanden habe. Ich gehe davon aus, dass die Layoutprobleme von einem benutzerdefinierten CSS Ihrerseits herrühren.

Hier ist eine korrigierte Version für Sie:

<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>

Fügen Sie dies hinzu, um die Website der ersten Spalte zu korrigieren:

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

Dies sollte dem entsprechen, was Sie suchen.

profcaju · 26. Februar 2023 um 05:29

Danke, Steven. Genau das habe ich versucht zu erreichen!

Haben Sie vor, diesen Mod in Ihre Theme-Komponente zu integrieren? Das wäre für mich eine große Sache.

Mit freundlichen Grüßen,

Steven · 26. Februar 2023 um 19:40

Ich habe nicht vor, dies zu tun, ich sehe diese beiden Komponenten als unterschiedliche Konzepte. Aber Sie können Ihre eigene Zusammenführung in Ihrem Bereich “Anpassen” erstellen, um das von mir zuvor gegebene Beispiel zu verwenden.

digitaldominica · 30. Dezember 2023 um 13:29

Hallo, das Tag-Symbol wird in meiner Kategorie-Themenliste in meinem Thema nicht angezeigt, wenn ich diese Komponente verwende.

Arkshine · 30. Dezember 2023 um 14:32

Verwenden Sie die Komponente Tag Icons? Sie wird auf meiner Seite angezeigt. Welches Theme verwenden Sie?

digitaldominica · 30. Dezember 2023 um 14:34

Nein, das bin ich nicht. Auf der mobilen Komponente der MD-Themenliste wird das Tag-Symbol angezeigt, auf dieser hier jedoch nicht. Ich habe es gerade deaktiviert und werde die Tag-Symbole ausprobieren.

Steven · 2. Januar 2024 um 12:56

Haben Sie im Forum-Setting svg icon subset ein Icon eingerichtet?

Wenn Sie fa-tag haben, sollten Sie es in diesem Setting löschen.

Ahmed26 · 21. März 2024 um 15:00

Wenn ich diese Komponente anwende, ist der Einstellknopf am Rahmen nicht sichtbar.

Steven · 21. März 2024 um 17:26

Verwendest du eine andere Theme-Komponente oder starke CSS-Bearbeitungen an deinem Theme? Es sollte sich nicht so verhalten.

Es ist eher so:

Thema		Antworten	Aufrufe
Topic Author Theme component end-of-life , topic-author	63	12400	4. Oktober 2024
MD Topic List Mobile component Theme component	57	6368	7. September 2025
Sam's Simple Theme Theme official , sams-simple-theme	368	81588	17. Februar 2025
Display Topic Author on Topic List UX	7	2491	8. Februar 2021
Topic List Author Theme component official , topic-list-author	11	3000	29. August 2025

MD Topic List-Komponente

Verwandte Themen