Wenn Sie die neuesten Builds von Discourse herunterladen, erhalten Sie die Möglichkeit, Themenlisten in anderen Websites über einfaches JavaScript und HTML einzubetten.
Der typische Anwendungsfall dafür ist ein Blog oder eine andere inhaltsorientierte Website, auf der Sie ein Widget am Rand des Bildschirms haben möchten, das Themen auflistet. Sie können nach Kategorie, Tag oder einer der anderen öffentlichen Filteroptionen filtern.
So betten Sie eine Liste von Themen ein
Zunächst müssen Sie die Site-Einstellung „Themenliste einbetten" aktivieren.
Fügen Sie dann in Ihrem HTML ein <script>-Tag hinzu, das das erforderliche JavaScript zum Einbetten der Discourse-Themen enthält. Sie können dies dort hinzufügen, wo Sie normalerweise Skripte einfügen. Zum Beispiel:
<script src="http://URL/javascripts/embed-topics.js"></script>
Ersetzen Sie URL durch die Forum-Adresse, einschließlich des Unterordners, falls vorhanden.
Anschließend fügen Sie im <body> Ihres HTML-Dokuments ein d-topics-list-Tag hinzu, um die Liste der Themen anzugeben, die Sie einbetten möchten. Auch hier müssen Sie URL durch Ihre Basis-URL ersetzen:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Alle von Ihnen angegebenen Attribute (außer discourse-url, das erforderlich ist) werden in die Abfrageparameter für die Themensuche umgewandelt. Wenn Sie also nach Tags suchen möchten, können Sie Folgendes tun:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Wenn ein Abfrageparameter Unterstriche enthält, wandeln Sie diese in Bindestriche um. Im obigen Beispiel haben Sie wahrscheinlich bemerkt, dass per_page zu per-page wurde.
In SameSite-Kontexten (d. h. die einbettende Website und Ihr Forum teilen sich eine übergeordnete Domain) erkennt Discourse, ob Sie im Forum angemeldet sind, und zeigt die Ergebnisse entsprechend an. Lassen Sie sich nicht überraschen, wenn Sie als angemeldeter Benutzer sichere Kategorien und dergleichen sehen – anonyme Benutzer können dies nicht!
Liste der Parameter
template: Entweder complete oder basic (Standard). Während basic nur eine Liste von Titelnamen ist, umfasst complete Titel, Benutzernamen, Benutzer-Avatar, Erstellungsdatum und Themen-Miniaturansicht.
per-page: Zahl. Steuert, wie viele Themen zurückgegeben werden sollen.
category: Zahl. Beschränkt Themen auf eine einzelne Kategorie. Geben Sie die id der Zielkategorie an.
allow-create: Boolean. Wenn aktiviert, enthält die Einbettung eine Schaltfläche „Neues Thema".
tags: String. Beschränkt Themen auf solche, die mit diesem Tag verknüpft sind.
top_period: Einer von all, yearly, quarterly, monthly, weekly, daily. Wenn aktiviert, werden die „Top"-Themen des jeweiligen Zeitraums zurückgegeben.
Beispiele
Ich habe hier eine Beispielwebsite erstellt:
Sie sollten den Quellcode in Ihrem Browser einsehen können, um den Code zu sehen. Der gesamte Quellcode befindet sich jedoch auch auf GitHub:
Dies ist eine brandneue Funktion, daher wäre jedes Feedback oder jede Anfrage willkommen.
Styling der Liste
Sie können unsere vorhandene Theme-Funktion verwenden, um benutzerdefinierte Stile für die eingebettete Liste hinzuzufügen.
Standardmäßig sieht unsere eingebettete Liste mit der complete-Vorlage beispielsweise so aus:
Wenn Sie möchten, dass sie beispielsweise wie ein Raster aussieht, können Sie benutzerdefiniertes SCSS zu Theme > Common > Embedded CSS hinzufügen:
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
Dadurch sieht es so aus:
