Nome autore più avatar

P2W · 26 Aprile 2022, 4:14pm

Ciao a tutti: la nostra community desidera vedere il nome dell’autore del post oltre al suo avatar. Avete qualche consiglio su come emulare questa visualizzazione, come si vede nel Sam’s Simple Theme?

Don · 16 Agosto 2022, 4:10pm

Ciao Mike,

Sam’s Simple Theme sta sovrascrivendo il template topic-list e mostra solo gli ultimi poster, non gli autori. Ecco una guida molto interessante su come sovrascrivere i template.

Ci sono 2 template nel core che dovremmo sovrascrivere per questo.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
topic-list-header per modificare la sezione dell’intestazione.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
topic-list-item per modificare l’avatar e aggiungere il nome utente.

Puoi trovare tutti i template qui: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

Iniziamo

In realtà ho creato un componente tema per presentarlo più facilmente. Puoi usarlo se vuoi.

Puoi scegliere tra due colonne con le impostazioni.
Per impostazione predefinita mostra l’ultimo post, ma puoi cambiarlo per mostrare gli autori.

Intestazione dell’elenco argomenti
Innanzitutto dobbiamo modificare l’intestazione della colonna.

Ho aggiunto queste righe e rimosso le intestazioni delle colonne poster e visualizzazioni e attività.

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/topic-list-header.hbr

438529e70


      
          {{#if (theme-setting 'author_column')}}
            {{raw "topic-list-header-column" sortable=sortable order='created' forceName=(theme-i18n 'author_header')}}
            {{else}}
            {{raw "topic-list-header-column" sortable=sortable order='activity' forceName=(theme-i18n 'last_header')}}
          {{/if}}
          {{~raw-plugin-outlet name="topic-list-header-after"~}}

Questo aggiunge l’intestazione Ultimo post o Autore
Ultimo post

Autore

Ho anche aggiunto un file di localizzazione per tradurre questi…
Puoi tradurre qui

Elemento dell’elenco argomenti

Ho rimosso la colonna dei poster e aggiunto la colonna Ultimo post o Autore.

Colonna Ultimo post

Colonna Autori con tempo (di creazione argomento).

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/list/topic-list-item.hbr

215b70d13


      
          <td class="custom-user-column topic-list-data">
            <div class="custom-user-column-avatar">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.createdAt}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="medium"}}</a>
                {{else}}
                <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
              {{/if}}
            </div>
            <div class="custom-user-column-info">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.firstPostUrl}}">
                  {{format-date topic.createdAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
                {{else}}
                <a href="{{topic.lastPostUrl}}">
                  {{format-date topic.bumpedAt format="tiny"}}
                </a>
                <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>
              {{/if}}

This file has been truncated. show original

Infine aggiungi un po’ di CSS.

github.com/VaperinaDEV/discourse-custom-user-column

desktop/desktop.scss

main

.custom-user-column {
  &.topic-list-data {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: var(--font-0);
    .custom-user-column-info {
      display: flex;
      flex-direction: column;
      a {
        color: var(--primary-high);
        span.relative-date {
          font-weight: 600;
        }
      }
      .editor a {
        font-size: var(--font-down-1);
      }
    }
  }

This file has been truncated. show original

Spero aiuti! Puoi confrontarlo con i template core o, se usi template personalizzati, modificarli o usare il componente se si adatta alle tue esigenze.

system · 19 Febbraio 2023, 3:52pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Argomento		Risposte	Visualizzazioni
Add column to home page topic list Support	8	1245	Aprile 27, 2020
Topic List Author Theme component official , topic-list-author	11	3001	Agosto 29, 2025
Add author to recent Support	2	59	Febbraio 7, 2025
Username of user below topics Support	4	1098	Ottobre 31, 2020
Display Topic Author on Topic List UX	7	2491	Febbraio 8, 2021

Nome autore più avatar

Argomenti correlati