Nombre del autor más avatar

P2W · 26 Abril, 2022 16:14

Hola a todos: nuestra comunidad tiene el deseo de ver el nombre del autor de la publicación además de su avatar. ¿Algún consejo sobre cómo emular esta visualización, como se ve en el tema Simple de Sam?

Don · 16 Agosto, 2022 16:10

Hola Mike,

Sam’s Simple Theme está sobrescribiendo la plantilla topic-list y solo muestra los últimos publicadores, no los autores. Aquí hay una guía muy útil sobre cómo sobrescribir plantillas.

Hay 2 plantillas en el núcleo que deberíamos sobrescribir para esto.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
topic-list-header para modificar la sección del encabezado.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
topic-list-item para modificar el avatar y agregar el nombre de usuario.

Puedes encontrar todas las plantillas aquí: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

Empecemos

En realidad, creé un componente de tema para presentarlo más fácilmente. Puedes usarlo si quieres.

Puedes elegir entre dos columnas con ajustes.
Por defecto, muestra la última publicación, pero puedes cambiarlo para que muestre autores.

Encabezado de la lista de temas
Primero, tenemos que modificar el encabezado de la columna.

Agregué estas líneas y eliminé los encabezados de las columnas de publicadores, vistas y actividad.

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

Esto agrega el encabezado Última Publicación o Autor
Última Publicación

Autor

También agregué un archivo de localización para traducir estos…
Puedes traducir aquí

Elemento de la lista de temas

Eliminé la columna de publicadores y agregué la columna de Última Publicación o Autor.

Columna de Última Publicación

Columna de Autores con tiempo (de creación del tema).

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, agrega algo de 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 ayude! Puedes compararlo con las plantillas del núcleo o, si usas plantillas personalizadas, cambiarlas o usar el componente si se ajusta a tus necesidades.

system · 19 Febrero, 2023 15:52

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

Tema		Respuestas	Vistas
Add column to home page topic list Support	8	1245	27 Abril 2020
Topic List Author Theme component official , topic-list-author	11	2997	29 Agosto 2025
Add author to recent Support	2	59	7 Febrero 2025
Username of user below topics Support	4	1097	31 Octubre 2020
Display Topic Author on Topic List UX	7	2490	8 Febrero 2021

Nombre del autor más avatar

Temas relacionados