Eine sehr häufige Situation, in der Sie sich als Theme-Entwickler wiederfinden werden, ist die Notwendigkeit, Inhalte zu erstellen, die nur auf der Homepage Ihrer Community angezeigt werden.
Möglicherweise fügen Sie etwas HTML zum Abschnitt „After Header“ Ihres Themes hinzu, das dann auf jeder Seite angezeigt wird. Sie könnten einige Umwege in CSS gehen, um dies überall außer auf der Homepage auszublenden … aber lassen Sie uns stattdessen eine Discourse-Theme verwenden, um eine Komponente mit Inhalten zu erstellen, die nur auf Ihrer Homepage sichtbar sind.
Wenn Sie mit Discourse-Themes nicht vertraut sind, lesen Sie bitte Beginner's guide to using Discourse Themes und Structure of themes and theme components
In Ihrem Discourse-Theme müssen Sie die folgende Verzeichnisstruktur einrichten:
javascripts/discourse/components/
javascripts/discourse/connectors/
Von hier aus werden wir eine Ember-Komponente erstellen. Weitere Informationen zu Ember-Komponenten finden Sie in deren Dokumentation: Ember.js Guides - Guides and Tutorials - Ember Guides
Aber vorerst wird dies eine einfache Komponente sein. Die Komponente besteht aus zwei Dateien, eine enthält die Logik und die andere die Vorlage.
javascripts/discourse/components/custom-homepage-content.js
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";
export default class CustomHomepageContent extends Component {
@service router;
get isHomepage() {
const { currentRouteName } = this.router;
return currentRouteName === `discovery.${defaultHomepage()}`;
}
}
Dies erstellt einen isHomepage-Getter, der den Router-Service nach dem currentRouteName abfragt – wenn der Routenname mit Ihrer Homepage übereinstimmt (wie durch die Site-Einstellungen festgelegt), wird true zurückgegeben.
Nun benötigen wir unsere Vorlage
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>This is my homepage HTML content</h1>
{{/if}}
Die Vorlage überprüft den isHomepage-Getter und zeigt Ihren Inhalt an, wenn dieser true ist. Sie können beliebigen HTML-Code zwischen die {{#if}}-Blöcke einfügen.
Nachdem unsere Komponente erstellt wurde, müssen wir sie irgendwo in Discourse hinzufügen. Für diesen Schritt müssen Sie entscheiden, welchen Plugin-Outlet Sie verwenden möchten. Dies sind Bereiche in ganz Discourse, in denen wir ein wenig Code hinzugefügt haben, in den Entwickler einsteigen können. Sie können diese auf Github durchsuchen oder sie mithilfe von (deprecated) Plugin outlet locations theme component durchsuchen.
Für benutzerdefinierte Homepages ist above-main-container eine übliche Wahl, also verwenden wir diese.
Wir müssen unsere Connector-Datei im richtigen Verzeichnis erstellen:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
und das ist alles, es benötigt nur eine einzige Zeile, die nach Ihrer Komponente ruft 
Dieses Dokument wird versioniert – schlagen Sie Änderungen auf github vor.