Si vous téléchargez les dernières versions de Discourse, vous bénéficierez de la possibilité d’intégrer des listes de sujets sur d’autres sites grâce à quelques lignes simples de JavaScript et HTML.
Le cas d’usage typique est un blog ou tout autre site axé sur le contenu, où vous souhaitez un widget sur le côté de l’écran listant des sujets. Vous pouvez filtrer par catégorie, par tag, ou par l’une des autres options de filtrage publiques disponibles.
Comment intégrer une liste de sujets
Tout d’abord, vous devez activer le paramètre du site embed topics list.
Ensuite, dans votre HTML, ajoutez une balise <script> incluant le JavaScript nécessaire à l’intégration des sujets Discourse. Vous pouvez l’ajouter là où vous ajoutez habituellement vos scripts. Par exemple :
<script src="http://URL/javascripts/embed-topics.js"></script>
Remplacez URL par l’adresse du forum, en incluant le sous-dossier s’il existe.
Après cela, dans le <body> de votre document HTML, ajoutez une balise d-topics-list pour indiquer la liste des sujets que vous souhaitez intégrer. Vous devrez également remplacer URL par votre URL de base ici :
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
Tous les attributs que vous fournissez (à l’exception de discourse-url qui est obligatoire) seront convertis en paramètres de requête pour la recherche de sujets. Ainsi, si vous souhaitez rechercher des sujets par tag, vous pouvez faire ceci :
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
Si un paramètre de requête contient des underscores, convertissez-les en tirets. Dans l’exemple ci-dessus, vous avez probablement remarqué que per_page est devenu per-page.
Dans les contextes SameSite (c’est-à-dire lorsque le site d’intégration et votre forum partagent un domaine parent), Discourse saura si vous êtes connecté au forum et affichera les résultats en conséquence. Ne soyez pas surpris de voir des catégories sécurisées et autres lorsque vous êtes connecté — les utilisateurs anonymes n’y auront pas accès !
Liste des paramètres
template : Soit complete ou basic (par défaut). Alors que basic n’affiche qu’une liste de titres de sujets, complete ajoute le titre, le nom d’utilisateur, l’avatar de l’utilisateur, la date de création et la miniature du sujet.
per-page : Nombre. Contrôle le nombre de sujets à retourner.
category : Nombre. Restreint les sujets à une seule catégorie. Passez l’id de la catégorie cible.
allow-create : Booléen. Si activé, l’intégration affichera un bouton « Nouveau sujet ».
tags : Chaîne de caractères. Restreint les sujets à ceux associés à ce tag.
top_period : L’un de all, yearly, quarterly, monthly, weekly, daily. Si activé, retourne les sujets « Top » de la période.
Exemples
J’ai créé un site d’exemple ici :
Vous devriez pouvoir afficher le code source dans votre navigateur pour voir le code, mais l’intégralité du code source est également disponible sur GitHub :
Il s’agit d’une toute nouvelle fonctionnalité, donc tout retour ou demande est apprécié.
Styliser la liste
Vous pouvez utiliser notre fonctionnalité de thème existante pour ajouter des styles personnalisés à la liste intégrée.
Par exemple, par défaut, notre liste intégrée utilisant le modèle complete ressemble à ceci :
Si vous souhaitez qu’elle ressemble, par exemple, à une grille, vous pouvez ajouter du SCSS personnalisé dans Thème > Commun > CSS intégré :
.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%;
}
}
}
}
Ce qui donnera un résultat semblable à ceci :
