Eine sehr häufige Situation, in die man als Theme-Entwickler gerät, ist die Notwendigkeit, Inhalte zu erstellen, die nur auf der Startseite deiner Community angezeigt werden.
Du könntest etwas HTML in den Bereich „After Header“ deines Themes einfügen, das dann auf jeder Seite erscheinen würde. Du könntest mit CSS einige Akrobatik betreiben, um dies überall außer auf der Startseite zu verstecken … aber stattdessen lass uns ein Discourse-Theme verwenden, um eine Komponente mit Inhalten zu erstellen, die nur auf deiner Startseite sichtbar sind.
Falls du mit Discourse-Themes nicht vertraut bist, schau dir Beginner's guide to using Discourse Themes und Structure of themes and theme components an.
In deinem Discourse-Theme musst du die folgende Verzeichnisstruktur einrichten:
javascripts/discourse/components/
javascripts/discourse/connectors/
Von hier aus werden wir eine Ember-Komponente erstellen. Weitere Informationen zu Ember-Komponenten findest du in deren Dokumentation: Ember.js Guides - Guides and Tutorials - Ember Guides
Aber für jetzt wird dies eine einfache Komponente sein, geschrieben als einzelne .gjs-Datei, die sowohl die Logik als auch die Vorlage enthält.
javascripts/discourse/components/custom-homepage-content.gjs
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()}`;
}
<template>
{{#if this.isHomepage}}
<h1>This is my homepage HTML content</h1>
{{/if}}
</template>
}
Dies erstellt einen isHomepage-Getter, der den Router-Service nach dem currentRouteName prüft – wenn der Routenname deiner Startseite entspricht (wie durch die Seiteneinstellungen vorgegeben), wird true zurückgegeben. Die Vorlage innerhalb von <template>...</template> prüft diesen Getter und zeigt deine Inhalte nur dann an, wenn er true ist. Du kannst zwischen den {{#if}}-Blöcken beliebiges HTML hinzufügen.
Da unsere Komponente erstellt ist, müssen wir sie irgendwo in Discourse hinzufügen. Für diesen Schritt musst du entscheiden, welchen Plugin-Ausgang (Plugin Outlet) du nutzen möchtest. Dies sind Bereiche in Discourse, in denen wir etwas Code hinzugefügt haben, damit Entwickler anknüpfen können. Du kannst diese auf Github in Discourse durchsuchen oder sie unter (deprecated) Plugin outlet locations theme component durchsuchen.
Für benutzerdefinierte Startseiten ist above-main-container eine gängige Wahl, also lass uns das verwenden.
Wir müssen unsere Connector-Datei im richtigen Verzeichnis erstellen:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
und das war’s, es braucht nur eine einzelne Zeile, die deine Komponente aufruft 
Dieses Dokument wird versioniert – Vorschläge für Änderungen auf github.