Wir mussten Inhalte dynamisch von unserem Discourse-Forum auf labs.daemon.com.au in die öffentliche Website unseres Unternehmens unter www.daemon.com.au/labs laden.
Der Code ruft die neuesten Inhalte aus ausgewählten Kategorien von Discourse ab, umhüllt sie dann mit dem Markup, das mit unserer Website kompatibel ist, und injiziert sie schließlich in die Seite. Anschließend nehmen wir einige weitere Anpassungen vor, um den Code allgemeiner zu gestalten, sodass er auf verschiedenen Websites wiederverwendet werden kann, um Inhalte aus unterschiedlichen Discourse-Foren zu laden.
Ein Discourse-Forum verfügt über zahlreiche Daten-Endpunkte. Wenn Sie beispielsweise zu Latest gehen, wird der Endpunkt latest.json geladen, der die für diese Seite erforderlichen Daten zurückgibt. Dies ermöglicht uns, Discourse-Inhalte auf unserer eigenen Website anzuzeigen.
Bevor wir beginnen
Um Inhalte remote von Discourse zu laden, müssen wir die Endpunkte von Discourse für unsere Website verfügbar machen. Dies kann in den „Admin"-Einstellungen von Discourse erfolgen.
Melden Sie sich bei Discourse mit einem Konto mit Admin-Zugriff an und gehen Sie dann im „Admin"-Panel zum Reiter „Einstellungen":
Suchen Sie in der linken Navigation nach „Sicherheit" (Security) und finden Sie auf der rechten Seite das Feld „cors origins". Geben Sie die URL der Website ein, die Inhalte von Discourse anzeigen soll (in unserem Fall: http://www.daemon.com.au/) und speichern Sie die Änderungen:
Endpunkte
Da Discourse unzählige Daten-Endpunkte generiert, ist es wichtig, den richtigen Endpunkt je nach den Inhalten zu finden, die remote angezeigt werden sollen. Durch das Hinzufügen von /l/latest.json am Ende der URL einer Kategorien-Seite wird der Endpunkt angezeigt, der die neuesten Beiträge für diese spezifische Kategorie enthält. Beispielsweise ist https://labs.daemon.com.au/c/design/l/latest.json der Endpunkt für https://labs.daemon.com.au/c/design.
HTML & JavaScript
Da wir nun den benötigten Endpunkt haben, gehen wir dazu über, unsere Website so einzurichten, dass sie den Endpunkt lesen kann, um nützliche Informationen abzurufen und korrekt anzuzeigen. In diesem Beispiel möchten wir die neuesten 3 Beiträge anzeigen, die entweder vom Benutzer #1, #2 oder #3 in der Kategorie „Design" veröffentlicht wurden, im #div auf unserer Website. Außerdem möchten wir den Beitrag „Über die Kategorie Design" nicht anzeigen.
Hinweis: In unserem Beispiel verwenden wir standardmäßig Bootstrap v4.0.0-beta.2, um nur für Demonstrationszwecke einige notwendige Stile bereitzustellen. Die Verwendung ist völlig optional.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<meta content="initial-scale=1.0, shrink-to-fit=no, width=device-width" name="viewport">
<title>Discourse einbetten</title>
<!-- Bootstrap CSS für grundlegende Stile in der Demo -->
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card-deck" id="div"></div>
</div>
<!-- jQuery -->
<script crossorigin="anonymous" integrity="sha384-p7RDedFtQzvcp0/3247fDud39nqze/MUmahi6MOWjyr3WKWaMOyqhXuCT1sM9Q+l" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- JavaScript -->
<script>
(function ($) {
'use strict'
$(function () {
$.ajax('https://labs.daemon.com.au/c/design/l/latest.json').then(function (result) {
// Daten parsen, um Inhalte von Discourse zu generieren:
// * Discourse-Endpunkt, d. h. `result`,
// * Anzahl der Beiträge, die auf Ihrer Website angezeigt werden sollen, z. B. `3`,
// * Optionales Array von Benutzer-IDs (Whitelist),
// falls nur Beiträge bestimmter Benutzer auf Ihrer Website angezeigt werden sollen, z. B. `[1, 2, 3]`.
console.log(result);
$('#div').discourse(result, 3, [1, 2, 3]);
});
$.fn.discourse = function (feed, numToShow, whitelist) {
var feedLength = feed.topic_list.topics.length;
// Stellen Sie sicher, dass genügend Beiträge angezeigt werden können.
if (numToShow > feedLength) {
numToShow = feedLength;
}
for (var i = 0; i < numToShow; i++) {
var content = '';
// URLs in Discourse-Endpunkten sind allesamt relative URLs (z. B. topic.image_url),
// wir benötigen dies, damit die auf Ihrer Website angezeigten Links an die richtigen Stellen verweisen.
// Bitte passen Sie dies an die URL Ihres Discourse-Forens an.
var discourseURL = 'http://labs.daemon.com.au/';
// Variablen für Discourse-Beitragsdaten.
var post = feed.topic_list.topics[i],
postAuthor = post.posters[0].user_id,
postDate = new Date(post.created_at),
postLink = discourseURL + 't/' + post.slug + '/' + post.id,
postThumbnail = discourseURL + post.image_url;
// Wenn eine Whitelist vorhanden ist, prüfen, ob der Beitragsautor ein verifizierter Benutzer ist.
if (typeof whitelist !== 'undefined') {
var verifiedUser = false;
for (var n = 0; n < whitelist.length; n++) {
if (postAuthor === whitelist[n]) {
verifiedUser = true;
break;
}
}
// Wenn der Beitragsautor nicht auf der Whitelist steht,
// wird diese Iteration abgebrochen und mit der nächsten Iteration im Loop fortgesetzt.
if (!verifiedUser) {
// Erhöhen Sie die Anzahl der anzuzeigenden Beiträge, falls möglich,
// um den eliminierten Beitrag auszugleichen.
if (numToShow < feedLength) {
numToShow++;
}
continue;
}
}
// Der folgende Codeblock ist optional.
// Der Zweck ist es, den Beitrag „Über die X-Kategorie" zu ignorieren,
// da es möglicherweise nicht wünschenswert ist, diesen auf Ihrer Website anzuzeigen.
if (post.title.substring(0, 10) === "About the " && post.title.substring(post.title.length - 9) === ' category') {
// Erhöhen Sie die Anzahl der anzuzeigenden Beiträge, falls möglich,
// um den eliminierten Beitrag auszugleichen.
if (numToShow < feedLength) {
numToShow++;
}
continue;
}
// Wenn ein Beitrag kein Vorschaubild hat,
// verwenden Sie ein Standard-Platzhalterbild als Vorschaubild für Ihre Website.
// Bitte passen Sie dies an, um das Platzhalterbild Ihrer Website zu verwenden.
if (post.image_url === null) {
postThumbnail = 'http://placehold.it/320x180';
}
// Generieren Sie HTML für Ihre Website.
// Dieser Teil des Codes muss möglicherweise entsprechend angepasst werden,
// um dem Markup Ihrer Website zu entsprechen.
content += '<div class="card" style="max-width: 20rem;">';
content += '<img alt="' + post.fancy_title + '" class="card-img-top" src="' + postThumbnail + '">';
content += '<div class="card-body">';
content += '<h4 class="card-title">' + post.fancy_title + '</h4>';
content += '<p class="card-text"><small>' + postDate.getDate() + '/' + postDate.getMonth() + '/' + postDate.getFullYear() + '</small></p>';
// Die folgende Zeile macht etwas mehr als nur die Anzeige des Exzerpts,
// sie ersetzt `<a>`-Tags im Exzerpt durch `<em>`-Tags,
// damit sie auf Ihrer Website nicht als Links angezeigt werden.
// Dies ist optional, kann jedoch unter bestimmten Umständen erforderlich sein.
content += '<p class="card-text">' + post.excerpt.replace(/<a/g, '<em').replace(/<\/a/g, '</em') + '</p>';
content += '<a href="' + postLink + '">Weiterlesen</a>';
content += '</div>';
content += '</div>';
$(this).append(content);
}
};
});
}(jQuery));
</script>
</body>
</html>
Das Endergebnis
Das JavaScript ist allgemein genug, um auf verschiedenen Websites wiederverwendet zu werden. Möglicherweise möchten Sie jedoch Schritt für Schritt durchgehen, um es an Ihre Bedürfnisse anzupassen. Insbesondere der HTML-Markup-Teil, da dieser höchstwahrscheinlich angepasst werden muss, um dem Markup Ihrer Website zu entsprechen.
Viel Spaß!
h/t @sesemaya Embed latest topics from Discourse on your website - development - Daemon Labs