Dieser Leitfaden erklärt, wie Sie eine Liste von Discourse-Themen auf externen Websites mithilfe von JavaScript einbetten und anzeigen können, sodass Sie Foreninhalte wie Diskussionen oder Ankündigungen auf Blogs, Websites oder externen Content-Plattformen präsentieren können.
Erforderliches Benutzerniveau: Administrator
Zusammenfassung
Das Einbetten von Discourse-Themen auf externen Websites ermöglicht es Ihnen, Themenlisten von Ihrem Discourse-Forum direkt auf anderen Websites anzuzeigen. Diese Integration hilft, Traffic auf Ihr Forum zu lenken und Ihr Publikum mit Ihren Community-Inhalten zu beschäftigen. Die eingebetteten Themen erscheinen als JavaScript-Widget, das sich in die DOM-Struktur Ihrer Website integriert und so eine einfache Anpassung durch CSS ermöglicht.
Einbetten von Themen aktivieren
So richten Sie das Einbetten von Themen auf Ihrer externen Website ein:
-
Navigieren Sie zu Ihrem Discourse-Admin-Dashboard und klicken Sie auf
site_settings. Suchen Sie nach der Website-Einstellungembed_topics_listund aktivieren Sie sie. -
Fügen Sie das Einbettungsskript in den HTML-Head-Bereich Ihrer externen Website ein:
<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>Ersetzen Sie
discourse.example.comdurch die tatsächliche URL Ihres Discourse-Forums. -
Platzieren Sie das Themenlisten-Element 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 zu Admin > Erweitert > Einbetten > Hosts hinzu.
Wenn sich Ihre Discourse-Website beispielsweise unter
yourdiscourseforum.combefindet und Sie Themen aufyourexternalsite.comeinbetten möchten, müssen Sieyourexternalsite.comzu Ihrer Liste der erlaubten Hosts hinzufügen.
Sie können keine Themen von einer privaten Discourse-Website einbetten, die eine Anmeldung erfordert.
Konfigurationsparameter
Das Element d-topics-list unterstützt die folgenden Attribute zur Anpassung Ihrer Themenanzeige:
discourse-url- Die URL Ihrer Discourse-Website (erforderlich)template- Optionen für den Anzeigestil:basic(Standard) - Zeigt minimale Themeninformationen ancomplete- Zeigt Titel, Benutzernamen, Avatar, Erstellungsdatum und Miniaturansicht an
per-page- Anzahl der anzuzeigenden Themencategory- Kategorie-ID zum Filtern von Themen aus einer bestimmten Kategorietags- Themen nach bestimmten Tags filternallow-create- Wenn auftruegesetzt, wird eine Schaltfläche “Neues Thema” angezeigttop_period- Zeigt die Top-Themen aus einem bestimmten Zeitraum an:allyearlyquarterlymonthlyweeklydaily
Sie können mehrere Parameter kombinieren, um Ihre Themenlistenanzeige zu verfeinern. Zum 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 mit benutzerdefiniertem SCSS in Ihrem Bereich Admin > Anpassen > Themes gestalten. Klicken Sie auf Ihr aktuelles oder Standardthema und dann auf Code bearbeiten. Sie können dann Erweitert anzeigen auswählen und Eingebettetes CSS wählen, um Ihren benutzerdefinierten Code hinzuzufügen:
Hier ist ein Beispiel für SCSS zum Erstellen eines Rasterlayouts:
.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 Kategorie- und Tag-Filter, um relevante Inhalte für Ihr Publikum anzuzeigen.
- Legen Sie einen geeigneten Wert für
per-pagefest, um Besucher nicht zu überfordern. - Testen Sie Ihre eingebetteten Themen auf verschiedenen Bildschirmgrößen, um ein responsives Design zu gewährleisten.
- Erwägen Sie die Verwendung der Vorlage
completefür eine bessere visuelle Darstellung, wenn der Platz dies zulässt. - Ü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 leeres oder graues Feld, wenn sie auf einer externen Domain angezeigt werden.
Lösung: Fügen Sie die externe Domain zu Admin > Anpassen > Einbetten > Erlaubte Hosts Ihrer Discourse-Website hinzu. Stellen Sie sicher, dass Sie die richtige Subdomain angeben (z. B. wenn Ihre Website www.example.com verwendet, fügen Sie www.example.com und nicht nur example.com hinzu).
Skriptladefehler
Problem: Das Einbettungsskript kann nicht geladen werden oder gibt Verbindungsfehler zurück.
Lösung:
- Überprüfen Sie, ob die Discourse-URL in Ihrer Skriptquelle korrekt und zugänglich ist.
- Stellen Sie sicher, dass die Website-Einstellung
embed_topics_listaktiviert ist. - Stellen Sie sicher, dass Ihre Discourse-Website für öffentliche Themen keine Anmeldung erfordert.
SameSite-Kontextverhalten
In SameSite-Kontexten, in denen die einbettende Website und das Forum eine übergeordnete Domain teilen, respektiert Discourse den Anmeldestatus und zeigt die Ergebnisse entsprechend an. Angemeldete Benutzer sehen möglicherweise Inhalte aus sicheren Kategorien, auf die anonyme Benutzer keinen Zugriff haben.
FAQs
F: Kann ich Themen von einer privaten Discourse-Website einbetten?
A: Nein, das Einbetten von Themen funktioniert nur mit öffentlichen Discourse-Websites. Private Websites, die eine Anmeldung erfordern, 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 Themcollections 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 Miniaturansichten und hervorgehobenen Bildern anzuzeigen.
F: Kann ich ändern, wo Themenlinks geöffnet werden?
A: Standardmäßig werden Themenlinks im übergeordneten Fenster geöffnet. Sie können dieses Verhalten durch Anpassung von CSS oder JavaScript ändern.
