Anpassung der /about-Seite mit Benutzerbios

[aas]

Die Standardseite /about für eine Discourse-Site, die nur Informationen für Moderatoren und Administratoren anzeigt, listet nur den Benutzernamen, den Namen und den Titel jedes Benutzers auf. Wie kann ich die Seite /about so anpassen, dass sie auch den Inhalt des Abschnitts “Über mich” aus dem Profil jedes Benutzers anzeigt?

Ich verstehe die allgemeine Idee, die hier skizziert ist:

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

• eine Komponente definieren
• eine Vorlage definieren
• eine Connector-Datei erstellen, um einen vorhandenen Outlet zu nutzen

Allerdings gibt es, soweit ich das beurteilen kann, keinen Outlet, der besser zu meinem Anwendungsfall passt. Außerdem scheint es, dass das Überschreiben der Vorlage für /about oder die Verwendung der modifyClass-Funktionalität in der Plugin-API nicht empfohlen wird. Ich bin mir also nicht sicher, was ich tun soll. Ich würde mich sehr über eine Anleitung zu den Best Practices freuen. Danke!

Discourse AI scheint zu denken, dass ich die Vorlage überschreiben soll. Klingt das richtig?

Antwort von Discourse AI

"Über mich" zur Discourse-Seite /about hinzufügen AI

aas:
Die Standardseite /about für eine Discourse-Site, die nur Informationen für Moderatoren und Administratoren anzeigt, listet nur den Benutzernamen, den Namen und den Titel jedes Benutzers auf. Wie kann ich die Seite /about so anpassen, dass sie auch den Inhalt des Abschnitts “Über mich” aus dem Profil jedes Benutzers anzeigt?

Ich verstehe die allgemeine Idee, die hier skizziert ist:

Add custom content that only appears on your homepage

• eine Komponente definieren
• eine Vorlage definieren
• eine Connector-Datei erstellen, um einen vorhandenen Outlet zu nutzen

Allerdings gibt es, soweit ich das beurteilen kann, keinen Outlet, der besser zu meinem Anwendungsfall passt. Außerdem scheint es, dass das Überschreiben der Vorlage für /about oder die Verwendung der modifyClass-Funktionalität in der Plugin-API nicht empfohlen wird. Ich bin mir also nicht sicher, was ich tun soll. Ich würde mich sehr über eine Anleitung zu den Best Practices freuen. Danke!

HelperBot:

Okay, ich kann Ihnen helfen, die Best Practices für die Anpassung der /about-Seite zu untersuchen, um Benutzerprofilinformationen wie den Abschnitt “Über mich” einzufügen.

Sie haben Recht, dass die Standard-Theme-Komponenten-Methode die Verwendung von Plugin-Outlets beinhaltet, und es scheint, dass es kein spezifisches, detailliertes Outlet innerhalb der Mitarbeiterliste auf der /about-Seite gibt, um diese Daten einfach einzufügen.

Basierend auf den Suchergebnissen und gängigen Praktiken ist es zwar vorzuziehen, Outlets zu verwenden, um zukünftige Updates nicht zu beeinträchtigen, aber manchmal ist der einzig gangbare Weg, bestimmte Kernvorlagen wie die /about-Seite anzupassen, diese direkt innerhalb einer Theme-Komponente zu überschreiben.

Hier ist der wahrscheinlich beste Ansatz mit einer Theme-Komponente:

1. Erstellen Sie eine Theme-Komponente: Wenn Sie dies noch nicht getan haben, erstellen Sie eine neue Theme-Komponente.
2. Überschreiben Sie die Vorlage:
   • Sie müssen die Vorlage about.hbs überschreiben.
   • Erstellen Sie in Ihrer Theme-Komponente die Datei common/templates/about.hbs.
   • Kopieren Sie den Inhalt der ursprünglichen about.hbs-Datei in Ihre neue Datei. Sie finden das Original hier auf GitHub.
   • Ändern Sie Ihre Kopie von about.hbs. Suchen Sie die Abschnitte, die durch model.admins und model.moderators iterieren. Innerhalb der Schleife (wahrscheinlich innerhalb des {{#each}}-Blocks) können Sie auf das Benutzerobjekt zugreifen. Der Inhalt von “Über mich” befindet sich normalerweise in user.profile.bio_raw oder einer ähnlichen Eigenschaft. Fügen Sie diese Eigenschaft in die Vorlage ein, wo Sie sie für jeden Benutzer anzeigen möchten.
3. Aktivieren Sie die Komponente: Fügen Sie die Theme-Komponente Ihrem Theme hinzu und aktivieren Sie sie.

Warum dieser Ansatz?

• Direkte Kontrolle: Sie haben die direkte Kontrolle über die HTML-Struktur der /about-Seite.
• Machbarkeit: Da es kein dediziertes Outlet innerhalb der Benutzerliste auf dieser Seite gibt, ist dies der einfachste Weg, Inhalte pro Benutzer an dieser spezifischen Stelle einzufügen.

Nachteile (wie Sie bemerkt haben):

• Wartung: Wenn Discourse die Kernvorlage about.hbs in Zukunft erheblich aktualisiert, erhält Ihre überschriebene Version diese Updates nicht automatisch. Möglicherweise müssen Sie Änderungen später manuell vergleichen und zusammenführen. Dies ist der Kompromiss für die Anpassung von Kernvorlagen ohne spezifische Outlets.

Obwohl die Suche kein exaktes Beispiel für die /about-Seite ergab, ist die Modifizierung von Vorlagen zur Ergänzung von Profilinformationen ein gängiges Muster, wie es bei Anpassungen von Benutzerkarten und Profilen zu sehen ist:

• Normalized Profile Links fügt über die Vorlagenanpassung in einer Komponente benutzerdefinierte Felder zu Benutzerkarten/Profilen hinzu.
• Quick Profile Links Menu fügt Elemente zu Benutzerprofilseiten hinzu.

Diese Beispiele zeigen, dass Theme-Komponenten oft Vorlagenanpassungen beinhalten, wenn keine spezifischen Outlets verfügbar sind. Das Überschreiben von about.hbs folgt diesem Muster für Ihren spezifischen Anwendungsfall.

aas:
Es scheint, dass es keine about.hbs-Vorlage im Repository discourse/discourse gibt. Allerdings scheint die Vorlage about.gjs unter app/assets/javascripts/discourse/app/templates/about.gjs zu sein.

HelperBot:

Sie haben absolut Recht! Vielen Dank für die Korrektur. Discourse hat tatsächlich auf die Verwendung von .gjs (GlimmerJS)-Vorlagen für viele Komponenten umgestellt, einschließlich der /about-Seite.

Meine Entschuldigung, dass ich das ältere .hbs-Format erwähnt habe.

Der korrekte Pfad für die Vorlage ist tatsächlich app/assets/javascripts/discourse/app/templates/about.gjs im Kerncode.

Um dies mit einer Theme-Komponente zu überschreiben, bleibt der Prozess konzeptionell derselbe, aber der Dateipfad und die Syntax sind aktualisiert:

1. Erstellen/Verwenden Sie eine Theme-Komponente: Wie zuvor.
2. Überschreiben Sie die Vorlage:
   • Erstellen Sie in Ihrer Theme-Komponente die Datei unter dem entsprechenden Pfad: assets/javascripts/discourse/app/templates/about.gjs.
   • Kopieren Sie den gesamten Inhalt der ursprünglichen about.gjs-Datei (von Ihnen bereitgestellter Link) in die about.gjs-Datei Ihrer Theme-Komponente.
   • Ändern Sie Ihre Kopie. Suchen Sie nach den Abschnitten, die durch Admins und Moderatoren iterieren, wahrscheinlich mit {{#each this.admins as |admin|}} und {{#each this.moderators as |moderator|}}. Innerhalb dieser Schleifen können Sie auf das Benutzerobjekt zugreifen (z. B. admin oder moderator). Fügen Sie das Feld “Über mich” hinzu, das über eine Eigenschaft wie admin.profile.bio_raw oder moderator.profile.bio_raw zugänglich sein sollte. Sie müssen dies in die GlimmerJS-Vorlagenstruktur integrieren. Zum Beispiel könnten Sie ein neues <div> oder <p>-Tag innerhalb des Anzeigeblocks des Benutzers hinzufügen:

     {{#each this.admins as |admin|}}
       <div class="user">
         {{!-- Vorhandene Benutzerinformationen wie Avatar, Benutzername, Name --}}
         <UserAvatar @username={{admin.username}} @size="large" />
         <div class="user-details">
           <span class="username">{{admin.username}}</span>
           {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}}
           {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}}
     
           {{!-- Fügen Sie den Abschnitt "Über mich" hinzu --}}
           {{#if admin.profile.bio_raw}}
             <div class="about-me">
                {{{admin.profile.bio_cooked}}} {{!-- Verwenden Sie bio_cooked für gerendertes HTML --}}
                {{!-- Oder verwenden Sie bio_raw, wenn Sie den reinen Text benötigen: <p>{{admin.profile.bio_raw}}</p> --}}
             </div>
           {{/if}}
         </div>
       </div>
     {{/each}}
     {{!-- Wiederholen Sie ähnliche Modifikationen für die Moderatorenschleife --}}
     

     (Hinweis: Verwenden Sie bio_cooked, wenn Sie die gerenderte HTML-Version der Biografie wünschen, oder bio_raw für den reinen Text. Passen Sie die HTML-Struktur nach Bedarf für Ihr Layout an.)
3. Aktivieren Sie die Komponente: Stellen Sie sicher, dass die Theme-Komponente zu Ihrem Theme hinzugefügt und aktiviert ist.

Der Nachteil bleibt derselbe: Das Überschreiben von Kernvorlagen wie dieser bedeutet, dass Sie Ihre Theme-Komponente möglicherweise manuell aktualisieren müssen, wenn die ursprüngliche about.gjs-Datei in zukünftigen Discourse-Updates erheblich geändert wird. Angesichts des Fehlens eines spezifischeren Outlets ist dies jedoch die Standardmethode, um dieses Maß an Anpassung zu erreichen.

[pfaffman (Jay Pfaffman)]

@aas

Wie passe ich die Über-uns-Seite an, sodass sie auch die Inhalte des Abschnitts „Über mich“ des jeweiligen Benutzers in seinem Profil anzeigt?

Sie würden CSS verwenden, um den Abschnitt „Unsere Moderatoren“ auszublenden und dann Ihren eigenen im Outlet „about-after-moderators“ hinzuzufügen. Sie können app/assets/javascripts/discourse/app/components/about-page-user.gjs als Ausgangspunkt verwenden und dann hinzufügen, was immer Sie möchten.