Componente della Lista Argomenti MD

Steven · 27 Marzo 2020, 1:46pm

Puoi modificare direttamente il componente, cambiare la parte dell’intestazione e incollare questo codice. Verrà utilizzata la versione precedente.

<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 · 27 Marzo 2020, 5:05pm

Grazie mille

Steven · 27 Marzo 2020, 5:31pm

Ho creato un ramo specifico per chi non vuole modificare il componente e non può aggiornare il proprio forum Discourse in questo momento.

Puoi installare un nuovo componente utilizzando le impostazioni avanzate.

Repository contenente il tema: https://github.com/iunctis/md-topic-list
Nome del ramo: bf-20200323

Avrai il componente compatibile con le versioni di Discourse precedenti al 23 marzo 2020. Prima di questo commit.

Steven · 30 Marzo 2020, 7:59pm

Sto sperimentando un po’ con la presentazione dell’elenco degli argomenti su mobile. C’è ancora bisogno di qualche ritocco, ma saresti interessato a qualcosa di simile (sarebbe un componente separato):

La presentazione attuale dell’elenco degli argomenti su mobile:

L’avatar apre ancora la scheda dell’utente e la data rimanda all’ultimo post.

ScammerRevolts · 31 Marzo 2020, 6:55am

Di certo sì, sarebbe un’ottima aggiunta, soprattutto perché il layout per mobile e desktop sarebbe simile invece di essere completamente diverso

jrgong · 31 Marzo 2020, 8:45pm

Il link di anteprima non funziona. Quando provo ad accedere, ricevo questo messaggio di errore:

Accesso negato

mentre provo a caricare /theme/Steven/md-topic-list.json

Qualcosa è andato storto.

Steven · 31 Marzo 2020, 8:48pm

Scusa per questo, ho pulito le pagine del mio tema Discourse prima, ma ho pulito un po’ troppo

Dovrebbe essere risolto ora, grazie per averlo segnalato!

jrgong · 4 Aprile 2020, 10:14am

Ciao @Steven

Sono già sulla versione 2.4.1, ma i miei avatar sono ancora spariti. Vedi l’anteprima dello screenshot del mio argomento qui

Steven · 4 Aprile 2020, 11:21am

Hai provato questo branch?

Se hai una versione di Discourse precedente al 23 marzo, devi utilizzare questo branch finché non aggiorni il tuo forum:

jrgong · 25 Aprile 2020, 1:03pm

Qualcuno sta usando questo componente del tema insieme al plugin Topic List Previews? O sta causando problemi, dopo tutto?

Attualmente sto usando il tema minimalista di Sam, ma non funziona con Topic List Previews nella sua versione attuale. Quindi sto valutando di passare a un altro tema per poter avere entrambi: una lista di argomenti minimalista e anteprime delle immagini degli argomenti.

Steven · 25 Aprile 2020, 1:10pm

È previsto che il plugin Topic List Previews sovrascriva i modelli degli elementi dell’elenco degli argomenti, così come fa questo componente del tema. Penso che il plugin abbia un vantaggio rispetto al componente del tema, quindi credo che il modo migliore per avere entrambi sia forkare il plugin Topic List Previews e personalizzare i modelli.

Ho realizzato io stesso una fork personalizzata, se vuoi vedere come si può fare: https://github.com/iunctis/discourse-topic-previews
Queste modifiche in particolare: https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (non consiglio davvero questa versione per il tuo forum, perché include un tema personalizzato e ho modificato alcune cose nelle tessere che la maggior parte degli utenti non apprezzerebbe).

I modelli desktop nel plugin originale sono qui; questo è il punto di partenza migliore: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

È assolutamente fattibile, ma devi essere un po’ a tuo agio con GitHub (per rimanere aggiornato sul plugin) e con la personalizzazione dei modelli.

Steven · 19 Maggio 2020, 7:51pm

Ho appena applicato un piccolo aggiornamento. Non ci sono nuove funzionalità, ma ho aggiunto la compatibilità con le nuove funzioni per le miniature.

Il componente del tema è compatibile con questi componenti:

nory · 7 Luglio 2020, 7:09pm

Ciao, è compatibile anche con questo plugin? Topic List Previews (legacy)
Grazie,
Deb

Steven · 7 Luglio 2020, 8:15pm

Purtroppo no, dato che modifichiamo lo stesso file.

Puoi far funzionare entrambe le soluzioni modificando il codice dell’intestazione e integrando lo stile delle tessere con le mie modifiche, ma ciò richiede una certa comprensione del funzionamento interno.

Puoti prendere ispirazione dalla mia vecchia versione personalizzata dell’anteprima dell’elenco dei topic (era prima del componente ufficiale del tema per le miniature, quindi potrebbe non funzionare al momento): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
Tuttavia, utilizzava classi CSS e allineamenti diversi per alcuni elementi, quindi potrebbe non funzionare con il tuo forum.

pinder99 · 20 Gennaio 2021, 10:20am

Ciao @Steven, uso il tuo plugin da un po’ di tempo e ho rimosso la scheda attività e la scheda visualizzazione dall’argomento, così da poterle spostare entrambe sotto gli argomenti come fa il tuo plugin, ma non ci sono riuscito. Puoi aiutarmi? Vorrei solo aggiungere la data (attività) come nell’immagine qui sotto

Steven · 20 Gennaio 2021, 12:57pm

Per prima cosa, devi modificare la struttura della tabella ed eliminare le colonne delle schede “Vista” e “Attività”

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

Puoi eliminare anche l’ultima riga se desideri rimuovere la colonna dei messaggi di risposta.

Passiamo ora alla parte più sostanziosa, ovvero i contenuti. Per prima cosa ho eliminato le due colonne:

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

Successivamente, aggiungiamo i contenuti desiderati. Non elencherò tutti i dettagli necessari perché richiedono un po’ di lavoro, ma il risultato dovrebbe essere simile a questo:

<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>Iniziato <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> da <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}}">Ultimo messaggio {{format-date topic.bumpedAt format="tiny"}}</a> da <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>

Tuttavia, si tratta solo di una prima bozza e non l’ho testata. Potresti dover aggiungere alcune classi per gli elementi <span>, modificare il formato della data (ad esempio utilizzando format="medium" invece di tiny), ma la struttura dovrebbe essere sostanzialmente corretta.

pinder99 · 20 Gennaio 2021, 1:02pm

Grazie davvero, @Steven, è esattamente quello di cui avevo bisogno. Apprezzo molto la rapida risposta. Solo un’altra cosa: non c’è spazio tra “admin” e “Ultimo post”. Come posso aggiungere un po’ di spazio tra di loro?

Steven · 20 Gennaio 2021, 1:29pm

Ho aggiunto un <br>, strano non ha funzionato. Mettilo nel tag span o usa   per forzare uno spazio se non ti senti a tuo agio nell’aggiungere un elemento di classe nel tag span.

pinder99 · 20 Gennaio 2021, 2:39pm

nbsp ha funzionato perfettamente

pinder99 · 22 Gennaio 2021, 8:37am

@Steven funziona perfettamente su desktop (ho anche aggiunto altri dati), ma non viene visualizzato nella versione mobile. Puoi aiutarmi?

Argomento		Risposte	Visualizzazioni
MD Topic List Mobile component Theme component	61	6789	Aprile 7, 2026
Topic Author Theme component topic-author , end-of-life	63	12619	Ottobre 4, 2024
Sam's Simple Theme Theme official , sams-simple-theme	368	83017	Febbraio 17, 2025
Discourse Topic List Author & Posters Theme component	8	230	Febbraio 5, 2026
Display Topic Author on Topic List UX	7	2571	Febbraio 8, 2021

Componente della Lista Argomenti MD

Argomenti correlati