Nome do autor mais avatar

Don · Agosto 16, 2022, 4:10pm

Olá Mike,

Sam’s Simple Theme está substituindo o template da lista de tópicos e mostra apenas os últimos pôsteres, não os autores. Aqui está um guia muito legal sobre como substituir templates.

Existem 2 templates no core que devemos substituir para isso.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
topic-list-header para modificar a seção do cabeçalho.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
topic-list-item para modificar o avatar e adicionar o nome de usuário.

Você pode encontrar todos os templates aqui: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

Vamos começar

Na verdade, criei um componente de tema para apresentá-lo mais facilmente. Você pode usá-lo se quiser.

Você pode escolher entre duas colunas com configurações.
Por padrão, ele mostra a última postagem, mas você pode alterá-la para mostrar autores.

Cabeçalho da lista de tópicos
Primeiro, precisamos modificar o cabeçalho da coluna.

Adicionei estas linhas e removi os cabeçalhos das colunas de pôsteres e visualizações e atividade.

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"~}}

Isso adiciona o cabeçalho Última Postagem ou Autor
Última Postagem

Autor

Também adicionei um arquivo de local para traduzir isso…
Você pode traduzir aqui

Item da lista de tópicos

Removi a coluna de pôsteres e adicionei a coluna Última Postagem ou Autor.

Coluna Última Postagem

Coluna de Autores com tempo (de criação do tópico).

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

Finalmente, adicione algum 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

Espero que ajude! Você pode comparar com os templates do core ou, se usar algum template personalizado, alterá-lo ou usar o componente se ele atender às suas necessidades.

Tópico		Respostas	Visualizações
Add column to home page topic list Support	8	1245	27 de Abril de 2020
Topic List Author Theme component official , topic-list-author	11	2997	29 de Agosto de 2025
Add author to recent Support	2	59	7 de Fevereiro de 2025
Username of user below topics Support	4	1097	31 de Outubro de 2020
Display Topic Author on Topic List UX	7	2490	8 de Fevereiro de 2021

Nome do autor mais avatar

Tópicos relacionados