Componente della Lista Argomenti MD

Steven · 22 Gennaio 2021, 12:28pm

I created a separate component for mobile :

pinder99 · 26 Gennaio 2021, 11:00am

@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 Gennaio 2021, 3:43pm

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 Gennaio 2021, 10:13am

@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 Gennaio 2021, 3:48pm

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 Febbraio 2021, 5:18am

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 Gennaio 2022, 3:35pm

@Steven Ho appena creato una PR per correggere questo componente nel nuovo ambiente ‘ember cli’:

Steven · 26 Gennaio 2022, 4:48pm

Grazie, l’ho unito il prima possibile, tutti possono aggiornare in sicurezza

danielabc · 19 Febbraio 2022, 10:30am

Congratulazioni per il componente, mi è piaciuto molto! è possibile utilizzare il componente e mettere l’avatar della persona che ha creato l’argomento prima dell’argomento? Se sì, come posso farlo? Un esempio di ciò di cui sto parlando

La foto dell’avatar prima dell’argomento sarebbe quella del creatore, e l’avatar alla fine dell’argomento di chi ha pubblicato per ultimo, come posso fare?

[image]

Steven · 19 Febbraio 2022, 12:32pm

Ho usato parte del componente tema @dax per mostrare l’avatar dell’autore: Topic Author

Ecco le parti da aggiungere nella sezione 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>

all’interno di <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...) </script>

E

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

all’interno di <script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...) </script>

Ecco il codice completo che puoi usare

<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 Febbraio 2022, 5:15am

Grazie mille per avermi risposto, per qualche motivo l’interfaccia del mio forum non è la stessa dell’immagine che hai pubblicato, l’avatar nell’angolo in alto a destra è in alto e la @ della persona che ha pubblicato è in basso, questo rompe totalmente l’interfaccia utente. (C’è molto spazio tra alcuni argomenti e altri, in una confusione) come posso metterlo da parte con le informazioni a lato? (Come la tua foto?) E l’avatar a sinistra è della persona che ha pubblicato per ultima, c’è un modo per cambiarlo con la persona che ha creato l’argomento? (Mentre l’avatar nell’angolo in alto a destra sarebbe l’ultima persona che ha pubblicato?) Dato che lascerò l’avatar nell’angolo in alto a destra per il creatore dell’argomento, c’è un modo per rimuovere il nome della persona che ha creato l’argomento accanto al nome della categoria?

Steven · 20 Febbraio 2022, 11:40am

Non sono sicuro di aver capito tutto, presumo che i problemi di layout derivino da un CSS personalizzato da parte tua.

Ecco una versione corretta per te:

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

Aggiungi questo per correggere il sito della prima colonna

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

Dovrebbe essere più vicino a quello che stai cercando

profcaju · 26 Febbraio 2023, 5:29am

Grazie, Steven. Stavo cercando di ottenere esattamente questo!

Hai intenzione di unire questa mod nel tuo componente tema? Sarebbe una cosa importante per me.

Cordiali saluti,

Steven · 26 Febbraio 2023, 7:40pm

Non ho intenzione di farlo, vedo questi due componenti come concetti diversi. Ma puoi facilmente creare la tua unione nella sezione Personalizza per utilizzare l’esempio che ho fornito in precedenza.

digitaldominica · 30 Dicembre 2023, 1:29pm

Ciao, l’icona del tag non viene visualizzata negli elenchi degli argomenti di categoria nel mio tema, quando utilizzo questo componente.

Arkshine · 30 Dicembre 2023, 2:32pm

Stai usando il componente Tag Icons? Sul mio lato lo mostra. Qual è il tuo tema?

digitaldominica · 30 Dicembre 2023, 2:34pm

No, non lo sono, sull’elenco degli argomenti md del componente mobile viene visualizzata l’icona del tag, ma su questo no. L’ho appena disabilitata e proverò le icone dei tag.

Steven · 2 Gennaio 2024, 12:56pm

Nell’impostazione del forum svg icon subset hai configurato qualche icona?

Se hai fa-tag dovresti eliminarlo in questa impostazione

Ahmed26 · 21 Marzo 2024, 3:00pm

quando applico questo componente
il pulsante di regolazione sul telaio non è visibile

Steven · 21 Marzo 2024, 5:26pm

Utilizzi un altro componente del tema o delle modifiche CSS pesanti al tuo tema? Non dovrebbe comportarsi in questo modo

È più simile a questo:

Argomento		Risposte	Visualizzazioni
Topic Author Theme component end-of-life , topic-author	63	12403	Ottobre 4, 2024
MD Topic List Mobile component Theme component	57	6375	Settembre 7, 2025
Sam's Simple Theme Theme official , sams-simple-theme	368	81624	Febbraio 17, 2025
Display Topic Author on Topic List UX	7	2492	Febbraio 8, 2021
Topic List Author Theme component official , topic-list-author	11	3011	Agosto 29, 2025

Componente della Lista Argomenti MD

Argomenti correlati