Autorenname plus Avatar

P2W · 26. April 2022 um 16:14

Hallo zusammen – unsere Community wünscht sich, zusätzlich zum Avatar des Autors auch dessen Namen angezeigt zu bekommen. Habt ihr Tipps, wie man diese Anzeige, wie sie bei Sam’s Simple Theme zu sehen ist, nachahmen kann?

Don · 16. August 2022 um 16:10

Hallo Mike,

Sam’s Simple Theme überschreibt die Topic-List-Vorlage und zeigt nur die neuesten Poster an, nicht die Autoren. Hier ist eine wirklich coole Anleitung, wie man Vorlagen überschreibt.

Es gibt 2 Vorlagen im Core, die wir dafür überschreiben sollten.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
topic-list-header zum Ändern des Header-Bereichs.
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
topic-list-item zum Ändern des Avatars und Hinzufügen des Benutzernamens.

Alle Vorlagen findest du hier: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

Lass uns anfangen

Eigentlich habe ich eine Theme-Komponente erstellt, um es einfacher darzustellen. Du kannst sie gerne verwenden.

Du kannst in den Einstellungen zwischen zwei Spalten wählen.
Standardmäßig wird der letzte Beitrag angezeigt, aber du kannst ihn ändern, um Autoren anzuzeigen.

Topic list header
Zuerst müssen wir den Spaltenkopf ändern.

Ich habe diese Zeilen hinzugefügt und die Spaltenüberschriften für Poster, Ansichten und Aktivität entfernt.

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

Dies fügt die Überschrift Last Post oder Author hinzu.
Last Post

Author

Ich habe auch eine Locale-Datei hinzugefügt, um diese zu übersetzen…
Du kannst hier übersetzen

Topic list item

Ich habe die Poster-Spalte entfernt und die Spalte “Last Post” oder “Author” hinzugefügt.

Last Post Column

Authors Column mit (Topic-Erstellungs-)Zeit.

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

Zum Schluss noch etwas 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

Ich hoffe, das hilft! Du kannst es mit den Core-Vorlagen vergleichen oder, wenn du eigene benutzerdefinierte Vorlagen verwendest, diese ändern oder die Komponente verwenden, wenn sie deinen Bedürfnissen entspricht.

system · 19. Februar 2023 um 15:52

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

Thema		Antworten	Aufrufe
Add column to home page topic list Support	8	1245	27. April 2020
Topic List Author Theme component official , topic-list-author	11	2985	29. August 2025
Add author to recent Support	2	58	7. Februar 2025
Username of user below topics Support	4	1097	31. Oktober 2020
Display Topic Author on Topic List UX	7	2488	8. Februar 2021

Autorenname plus Avatar

Verwandte Themen