Se scarichi le ultime build di Discourse, otterrai la possibilità di incorporare elenchi di argomenti in altri siti tramite un semplice JavaScript e HTML.
Il caso d’uso tipico è un blog o un altro sito basato sui contenuti, dove desideri un widget sul lato dello schermo che elenchi gli argomenti. Puoi filtrare per categoria, tag o qualsiasi altra opzione di filtro pubblica disponibile.
Come incorporare un elenco di argomenti
Per prima cosa, devi abilitare l’impostazione del sito embed topics list.
Successivamente, nel tuo HTML aggiungi un tag <script> che includa il JavaScript necessario per incorporare gli argomenti di Discourse. Puoi aggiungerlo ovunque aggiungi normalmente gli script. Ad esempio:
<script src="http://URL/javascripts/embed-topics.js"></script>
Sostituisci URL con l’indirizzo del forum, inclusa la sottocartella se esiste.
Dopo di ciò, nel <body> del tuo documento HTML, aggiungi un tag d-topics-list per indicare l’elenco degli argomenti che desideri incorporare. Anche qui dovrai sostituire URL con il tuo URL di base:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Qualsiasi attributo che fornisci (tranne discourse-url, che è obbligatorio) verrà convertito nei parametri di query per la ricerca degli argomenti. Quindi, se volessi cercare argomenti per tag, potresti fare così:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Se un parametro di query contiene caratteri di sottolineatura, convertili in trattini. Nell’esempio sopra, avrai probabilmente notato che per_page è diventato per-page.
In contesti SameSite (cioè quando il sito che incorpora e il tuo forum condividono un dominio padre), Discourse saprà se hai effettuato l’accesso al forum e mostrerà i risultati di conseguenza. Non sorprenderti se vedi categorie sicure e simili quando sei loggato: gli utenti anonimi non potranno farlo!
Elenco dei parametri
template: Può essere complete o basic (predefinito). Mentre basic è solo un elenco di titoli degli argomenti, complete include titolo, nome utente, avatar dell’utente, data di creazione e miniatura dell’argomento.
per-page: Numero. Controlla quanti argomenti restituire.
category: Numero. Restringe gli argomenti a una singola categoria. Passa l’id della categoria di destinazione.
allow-create: Booleano. Se abilitato, l’incorporamento avrà un pulsante “Nuovo argomento”.
tags: Stringa. Restringe gli argomenti a quelli associati a questo tag.
top_period: Uno tra all, yearly, quarterly, monthly, weekly, daily. Se abilitato, restituirà gli argomenti “Top” del periodo.
Esempi
Ho creato un sito di esempio qui:
Dovresti essere in grado di visualizzare il codice sorgente nel tuo browser per vedere il codice, ma anche l’intero sorgente è su GitHub:
Questa è una funzionalità nuovissima, quindi qualsiasi feedback o richiesta sarebbe apprezzato.
Stile dell’elenco
Puoi utilizzare la nostra funzionalità tema esistente per aggiungere stili personalizzati per l’elenco incorporato.
Ad esempio, per impostazione predefinita, il nostro elenco incorporato che utilizza il modello complete appare così:
Se desideri che appaia, ad esempio, come una griglia, puoi aggiungere SCSS personalizzato a Tema > Comune > CSS incorporato:
.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%;
}
}
}
}
Il che lo farà apparire così:
