Diese Anleitung erklärt, wie Sie mithilfe von JavaScript eine Liste von Discourse-Themen auf externen Websites einbetten und anzeigen können. So können Sie Foreninhalte wie Diskussionen oder Ankündigungen auf Blogs, Websites oder externen Content-Plattformen präsentieren.
Erforderliche Benutzerstufe: Administrator
Zusammenfassung
Durch das Einbetten von Discourse-Themen auf externen Websites können Sie Themenlisten aus Ihrem Discourse-Forum direkt auf anderen Seiten anzeigen. Diese Integration hilft dabei, Traffic auf Ihr Forum zu lenken und Ihr Publikum mit Community-Inhalten zu binden. Die eingebetteten Themen erscheinen als JavaScript-Widget, das in die DOM-Struktur Ihrer Website integriert wird, was eine einfachere Anpassung über CSS ermöglicht.
Themen-Einbettung aktivieren
So richten Sie die Themen-Einbettung auf Ihrer externen Website ein:
- Navigieren Sie zu Admin > Erweitert > Einbettung und wechseln Sie zum Reiter Einstellungen. Aktivieren Sie die Site-Einstellung
embed_topics_list.
- Fügen Sie das Einbettungsskript im
<head>-Bereich Ihrer externen Website hinzu:
<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>
Ersetzen Sie discourse.example.com durch die tatsächliche URL Ihres Discourse-Foren.
- Platzieren Sie das Element für die Themenliste dort, wo Sie Themen anzeigen möchten (z. B. in einem Blogbeitrag oder auf einer einzelnen Website-Seite):
<d-topics-list discourse-url="https://discourse.example.com" category="1234" per-page="5"></d-topics-list>
- Wenn Sie Themen auf einer anderen Domain als Ihrer Discourse-Website einbetten, fügen Sie die Domain Ihrer externen Website unter Admin > Erweitert > Einbettung > Hosts hinzu.
Wenn sich Ihre Discourse-Website beispielsweise unter yourdiscourseforum.com befindet und Sie Themen auf yourexternalsite.com einbetten möchten, müssen Sie yourexternalsite.com zur Liste der erlaubten Hosts hinzufügen.
Sie können keine Themen von einem privaten, loginpflichtigen Discourse-Forum einbetten.
Konfigurationsparameter
Das Element d-topics-list unterstützt folgende Attribute zur Anpassung der Themenanzeige:
discourse-url– Die URL Ihrer Discourse-Website (erforderlich)template– Optionen für den Anzeigestil:basic(Standard) – Zeigt die Thementitel als Links ancomplete– Zeigt Titel, Benutzername, Avatar, Erstellungsdatum, Zeit der letzten Antwort, Anzahl der Likes, Anzahl der Antworten sowie das hervorgehobene Bild/Thumbnail an
per-page– Anzahl der anzuzeigenden Themen (begrenzt durch die versteckte Site-Einstellungembed_topic_limit_per_page, Standardwert 200)category– Kategorie-ID, um Themen aus einer bestimmten Kategorie zu filterntags– Filtern von Themen nach bestimmten Tagsallow-create– Wenn auftruegesetzt, wird eine Schaltfläche „Neues Thema“ angezeigtembed-class– Fügt dem Container der eingebetteten Themenliste eine benutzerdefinierte CSS-Klasse hinzu (nur alphanumerische Zeichen, Bindestriche und Unterstriche erlaubt)top-period– Zeigt Top-Themen aus einem bestimmten Zeitraum an:allyearlyquarterlymonthlyweeklydaily
Sie können mehrere Parameter kombinieren, um Ihre Themenliste weiter zu verfeinern. Beispiel:
<d-topics-list
discourse-url="https://discourse.example.com"
category="5"
tags="announcements"
per-page="10"
template="complete">
</d-topics-list>
Anpassung des Erscheinungsbilds
Sie können die eingebetteten Themen mithilfe von benutzerdefiniertem SCSS im Bereich Admin > Erscheinungsbild > Themes und Komponenten gestalten. Klicken Sie auf Ihr aktuelles oder Standard-Theme und dann auf Code bearbeiten. Wählen Sie anschließend Show_advanced und dann Embedded CSS, um Ihren benutzerdefinierten Code hinzuzufügen:
Hier ist ein Beispiel-SCSS für ein Raster-Layout:
.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%;
}
}
}
}
Best Practices
- Verwenden Sie aussagekräftige Kategorien- und Tag-Filter, um relevante Inhalte für Ihr Publikum anzuzeigen.
- Legen Sie einen angemessenen Wert für
per-pagefest, um Besucher nicht zu überfordern. - Testen Sie Ihre eingebetteten Themen auf verschiedenen Bildschirmgrößen, um ein responsives Design sicherzustellen.
- Erwägen Sie die Verwendung der
complete-Vorlage für eine ansprechendere Darstellung, wenn Platz vorhanden ist. - Überprüfen Sie regelmäßig Ihre Liste der erlaubten Hosts, um sicherzustellen, dass nur autorisierte Domains Ihre Themen einbetten können.
Häufige Probleme und Lösungen
Themen werden auf externer Domain nicht angezeigt
Problem: Die eingebetteten Themen erscheinen als leerer oder grauer Kasten, wenn sie auf einer externen Domain betrachtet werden.
Lösung: Fügen Sie die externe Domain unter Admin > Erweitert > Einbettung > Hosts zu Ihrer Discourse-Website hinzu. Stellen Sie sicher, dass Sie das korrekte Subdomain einfügen (z. B. wenn Ihre Website www.example.com verwendet, fügen Sie www.example.com hinzu, nicht nur example.com).
Skript-Ladefehler
Problem: Das Einbettungsskript lädt nicht oder es treten Verbindungsfehler auf.
Lösung:
- Überprüfen Sie, ob die Discourse-URL in Ihrer Skript-Quellangabe korrekt und erreichbar ist.
- Stellen Sie sicher, dass die Site-Einstellung
embed_topics_listaktiviert ist. - Vergewissern Sie sich, dass Ihre Discourse-Website für öffentliche Themen nicht loginpflichtig ist.
Verhalten im SameSite-Kontext
In SameSite-Kontexten, in denen die einbettende Website und das Forum eine gemeinsame übergeordnete Domain teilen, berücksichtigt Discourse den Login-Status und zeigt die Ergebnisse entsprechend an. Eingeloggte Benutzer können möglicherweise Inhalte aus sicheren Kategorien sehen, die für anonyme Benutzer nicht zugänglich sind.
FAQs
F: Kann ich Themen von einem privaten Discourse-Forum einbetten?
A: Nein, die Themen-Einbettung funktioniert nur mit öffentlichen Discourse-Websites. Private, loginpflichtige Websites können nicht eingebettet werden.
F: Kann ich mehrere Themenlisten auf derselben Seite einbetten?
A: Ja, Sie können mehrere <d-topics-list>-Elemente mit unterschiedlichen Parametern auf derselben Seite einfügen, um verschiedene Themenkollektionen anzuzeigen.
F: Wie bette ich Themen mit hervorgehobenen Bildern ein?
A: Verwenden Sie den Parameter template="complete" in Ihrem <d-topics-list>-Element, um Themen mit Thumbnails und hervorgehobenen Bildern anzuzeigen.
F: Kann ich ändern, wo Themen-Links geöffnet werden?
A: Standardmäßig öffnen sich Themen-Links im übergeordneten Fenster. Dieses Verhalten kann durch CSS- oder JavaScript-Anpassungen geändert werden.
