Questa guida spiega come incorporare e visualizzare un elenco di argomenti di Discourse su siti web esterni utilizzando JavaScript, consentendo di mostrare contenuti del forum come discussioni o annunci su blog, siti web o piattaforme di contenuti esterni.
Livello utente richiesto: Amministratore
Riepilogo
Incorporare argomenti di Discourse su siti web esterni consente di visualizzare elenchi di argomenti dal proprio forum Discourse direttamente su altri siti. Questa integrazione aiuta a generare traffico verso il tuo forum e mantiene il tuo pubblico coinvolto con i contenuti della tua community. Gli argomenti incorporati appaiono come un widget JavaScript che si integra con la struttura DOM del tuo sito, rendendolo più facile da personalizzare tramite CSS.
Abilita incorporamento argomenti
Per configurare l’incorporamento di argomenti sul tuo sito esterno:
-
Accedi alla dashboard di amministrazione di Discourse e fai clic su
site_settings. Cerca e abilita l’impostazione del sitoembed_topics_list. -
Aggiungi lo script di incorporamento alla sezione
<head>HTML del tuo sito esterno:<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>Sostituisci
discourse.example.comcon l’URL effettivo del tuo forum Discourse. -
Posiziona l’elemento dell’elenco argomenti dove desideri visualizzare gli argomenti (ad esempio, in un post del blog o in una singola pagina del sito):
<d-topics-list discourse-url="https://discourse.example.com" category="1234" per-page="5"></d-topics-list> -
Se stai incorporando argomenti su un dominio diverso dal tuo sito Discourse, aggiungi il dominio del tuo sito esterno in Admin > Avanzate > Incorporamento > Host.
Ad esempio, se il tuo sito Discourse si trova su
tuo-forum-discourse.come desideri incorporare argomenti sutuo-sito-esterno.com, devi aggiungeretuo-sito-esterno.comal tuo elenco di host consentiti.
Non è possibile incorporare argomenti da un sito Discourse privato che richiede l’accesso.
Parametri di configurazione
L’elemento d-topics-list supporta i seguenti attributi per personalizzare la visualizzazione degli argomenti:
discourse-url- L’URL del tuo sito Discourse (richiesto)template- Opzioni di stile di visualizzazione:basic(predefinito) - Mostra informazioni minime sull’argomentocomplete- Mostra titolo, nome utente, avatar, data di creazione e miniatura
per-page- Numero di argomenti da visualizzarecategory- ID della categoria per filtrare gli argomenti da una categoria specificatags- Filtra gli argomenti per tag specificiallow-create- Se impostato su true, mostra un pulsante “Nuovo argomento”top_period- Mostra gli argomenti principali di un periodo specifico:allyearlyquarterlymonthlyweeklydaily
Puoi combinare più parametri per affinare la visualizzazione del tuo elenco di argomenti. Ad esempio:
<d-topics-list
discourse-url="https://discourse.example.com"
category="5"
tags="announcements"
per-page="10"
template="complete">
</d-topics-list>
Personalizzazione dell’aspetto
Puoi stilizzare gli argomenti incorporati utilizzando SCSS personalizzato nel tuo pannello Admin > Personalizza > Temi. Fai clic sul tuo tema corrente o predefinito e fai clic su Modifica codice. Puoi quindi selezionare Mostra_avanzate e scegliere CSS incorporato per aggiungere il tuo codice personalizzato:
Ecco un esempio di SCSS per creare un layout a griglia:
.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%;
}
}
}
}
Migliori pratiche
- Utilizza filtri di categorie e tag significativi per mostrare contenuti pertinenti per il tuo pubblico.
- Imposta un valore appropriato per
per-pageper evitare di sovraccaricare i visitatori. - Testa i tuoi argomenti incorporati su diverse dimensioni dello schermo per garantire un design reattivo.
- Considera l’utilizzo del template
completeper un migliore impatto visivo quando lo spazio lo consente. - Rivedi regolarmente il tuo elenco di host consentiti per garantire che solo i domini autorizzati possano incorporare i tuoi argomenti.
Problemi comuni e soluzioni
Argomenti non visualizzati sul dominio esterno
Problema: Gli argomenti incorporati appaiono come una casella vuota o grigia quando visualizzati su un dominio esterno.
Soluzione: Aggiungi il dominio esterno all’elenco Admin > Personalizza > Incorporamento > Host consentiti del tuo sito Discourse. Assicurati di includere il sottodominio corretto (ad esempio, se il tuo sito utilizza www.example.com, aggiungi www.example.com anziché solo example.com).
Errori di caricamento dello script
Problema: Lo script di incorporamento non viene caricato o restituisce errori di connessione.
Soluzione:
- Verifica che l’URL di Discourse nell’origine dello script sia corretto e accessibile.
- Verifica che l’impostazione del sito
embed_topics_listsia abilitata. - Assicurati che il tuo sito Discourse non richieda l’accesso per gli argomenti pubblici.
Comportamento del contesto SameSite
Nei contesti SameSite in cui il sito di incorporamento e il forum condividono un dominio padre, Discourse rispetta lo stato di accesso e visualizza i risultati di conseguenza. Gli utenti connessi potrebbero vedere contenuti da categorie sicure a cui gli utenti anonimi non possono accedere.
Domande frequenti
D: Posso incorporare argomenti da un sito Discourse privato?
R: No, l’incorporamento di argomenti funziona solo con siti Discourse pubblici. I siti privati che richiedono l’accesso non possono essere incorporati.
D: Posso incorporare più elenchi di argomenti nella stessa pagina?
R: Sì, puoi includere più elementi <d-topics-list> nella stessa pagina con parametri diversi per visualizzare varie raccolte di argomenti.
D: Come incorporo argomenti con immagini in evidenza?
R: Utilizza il parametro template="complete" nel tuo elemento <d-topics-list> per visualizzare argomenti con miniature e immagini in evidenza.
D: Posso cambiare dove si aprono i link degli argomenti?
R: Per impostazione predefinita, i link degli argomenti si aprono nella finestra padre. Puoi modificare questo comportamento tramite personalizzazione CSS o JavaScript.
