Avevamo bisogno di caricare dinamicamente contenuti dal nostro forum Discourse su labs.daemon.com.au nel sito web pubblico della nostra azienda su www.daemon.com.au/labs
Il codice recupera i contenuti più recenti nelle categorie selezionate da Discourse, li avvolge nel markup compatibile con il nostro sito web e poi li inietta nella pagina. Successivamente, apportiamo alcune modifiche aggiuntive per rendere il codice più generico, in modo che possa essere facilmente riutilizzato su diversi siti web per caricare contenuti da forum Discourse differenti.
Un forum Discourse dispone di numerosi endpoint di dati. Ad esempio, quando si accede a Latest, viene caricato l’endpoint latest.json che restituisce i dati necessari per quella specifica pagina. Questo ci consente di visualizzare i contenuti di Discourse sul nostro sito web.
Prima di iniziare
Per caricare contenuti da Discourse in remoto, dobbiamo rendere gli endpoint di Discourse accessibili al nostro sito web. Questo può essere fatto nelle impostazioni “Admin” di Discourse.
Accedi a Discourse utilizzando un account con privilegi di amministratore, quindi vai alla scheda “Settings” nel pannello “Admin”:
Trova “Security” nella navigazione a sinistra, quindi individua il campo “cors origins” sul lato destro. Aggiungi l’URL del sito web che visualizzerà i contenuti da Discourse nel campo (nel nostro caso: http://www.daemon.com.au/), quindi salva le modifiche:
Endpoint
Poiché Discourse genera innumerevoli endpoint di dati, è importante individuare quello corretto in base ai contenuti che devono essere visualizzati in remoto. Aggiungere /l/latest.json alla fine dell’URL di una pagina di categoria mostrerà l’endpoint contenente gli ultimi post per quella specifica categoria. Ad esempio, https://labs.daemon.com.au/c/design/l/latest.json è l’endpoint per https://labs.daemon.com.au/c/design.
HTML & JavaScript
Ora che abbiamo l’endpoint necessario, passiamo a configurare il nostro sito in modo che possa leggere tale endpoint, recuperare informazioni utili e visualizzarle correttamente. In questo esempio, l’obiettivo è visualizzare gli ultimi 3 post pubblicati dall’Utente #1, #2 o #3 nella categoria “Design” all’interno del #div del nostro sito. Inoltre, non vogliamo mostrare il post “About the design category”.
N.B. Nel nostro esempio, utilizziamo Bootstrap v4.0.0-beta.2 predefinito per fornire alcuni stili necessari solo a scopo dimostrativo; il suo utilizzo è completamente opzionale.
<!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 embed</title>
<!-- Bootstrap CSS per stili di base nella 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) {
// Analizza i dati per generare contenuti da Discourse:
// * Endpoint di Discourse, ovvero `result`,
// * Numero di post da mostrare sul tuo sito, ad esempio `3`,
// * Array opzionale di ID utente (whitelist)
// se si desidera mostrare solo i post pubblicati da utenti specifici, ad esempio `[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;
// Assicurati che ci siano abbastanza post da mostrare.
if (numToShow > feedLength) {
numToShow = feedLength;
}
for (var i = 0; i < numToShow; i++) {
var content = '';
// Gli URL negli endpoint di Discourse sono tutti URL relativi (ad esempio topic.image_url),
// abbiamo bisogno di questo affinché i link visualizzati sul tuo sito puntino alle destinazioni corrette.
// Modifica questo valore con l'URL del tuo forum Discourse.
var discourseURL = 'http://labs.daemon.com.au/';
// Variabili per i dati dei post di Discourse.
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;
// Se è presente una whitelist, verifica se l'autore del post è un utente verificato.
if (typeof whitelist !== 'undefined') {
var verifiedUser = false;
for (var n = 0; n < whitelist.length; n++) {
if (postAuthor === whitelist[n]) {
verifiedUser = true;
break;
}
}
// Se l'autore del post non è nella whitelist,
// interrompi questa iterazione e passa alla successiva nel ciclo.
if (!verifiedUser) {
// Aumenta il numero di post da mostrare se possibile
// per compensare il post eliminato.
if (numToShow < feedLength) {
numToShow++;
}
continue;
}
}
// Il blocco di codice seguente è opzionale.
// Lo scopo è ignorare il post "About the X category"
// poiché potrebbe non essere desiderabile mostrarlo sul tuo sito.
if (post.title.substring(0, 10) === "About the " && post.title.substring(post.title.length - 9) === ' category') {
// Aumenta il numero di post da mostrare se possibile
// per compensare il post eliminato.
if (numToShow < feedLength) {
numToShow++;
}
continue;
}
// Se un post non ha una miniatura,
// utilizza un'immagine segnaposto predefinita come miniatura per il tuo sito.
// Modifica questo valore per utilizzare l'immagine segnaposto del tuo sito.
if (post.image_url === null) {
postThumbnail = 'http://placehold.it/320x180';
}
// Genera HTML per il tuo sito.
// Questa parte del codice potrebbe dover essere modificata di conseguenza
// per adattarsi al markup del tuo sito.
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>';
// La riga seguente fa un po' più che mostrare l'estratto così com'è,
// sostituisce i tag `<a>` nell'estratto con tag `<em>`
// in modo che non vengano visualizzati come link sul tuo sito.
// Questo è opzionale, ma potrebbe essere necessario in determinate circostanze.
content += '<p class="card-text">' + post.excerpt.replace(/<a/g, '<em').replace(/<\/a/g, '</em') + '</p>';
content += '<a href="' + postLink + '">Read more</a>';
content += '</div>';
content += '</div>';
$(this).append(content);
}
};
});
}(jQuery));
</script>
</body>
</html>
L’aspetto finale
Il JavaScript è abbastanza generico da poter essere riutilizzato su diversi siti web. Tuttavia, potresti voler procedere passo dopo passo per adattarlo alle tue esigenze. In particolare la parte relativa al markup HTML, poiché è molto probabile che debba essere personalizzata per adattarsi al markup del tuo sito.
Buon lavoro!
h/t @sesemaya Embed latest topics from Discourse on your website - development - Daemon Labs