Discourse prend en charge les thèmes natifs qui peuvent être obtenus à partir d’une archive .tar.gz ou d’un dépôt git distant, y compris les dépôts privés.
Un exemple de thème est disponible ici : GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub
Le dépôt git est vérifié pour les mises à jour (une fois par jour), ou en utilisant le bouton Vérifier les mises à jour. Lorsqu’un changement est détecté, le bouton Vérifier les mises à jour se transforme en Mettre à jour vers la dernière version.
![]()
Pour créer un thème, vous devez suivre une structure de fichiers spécifique. Voici les fichiers que vous pouvez inclure :
about.json (requis)
common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss
desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html
mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html
locales/en.yml
locales/{locale}.yml
stylesheets/{anything}/{anything}/{anything}.scss
javascripts/{anything}.js
javascripts/{anything}.gjs
javascripts/{anything}.hbs
assets/{asset_filename}
settings.yml
Tous ces fichiers
sont facultatifs, vous n’avez donc besoin de créer que ceux dont vous avez besoin.
Pour ceux qui souhaitent diviser les fichiers SCSS du thème en plusieurs fichiers, c’est désormais possible.
Pour ceux qui souhaitent diviser le thème en plusieurs fichiers JS, il suffit d’ajouter les fichiers JS souhaités dans le répertoire javascripts.
La structure du fichier about.json est présentée ci-dessous. Vous trouverez plus d’informations à ce sujet ici : Adding metadata and screenshots to a Theme :
{
"name": "Mon Thème",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
"variable-name": "assets/my-asset.jpg"
},
"color_schemes": {
"Mon Schéma de Couleurs": {
"primary": "222222"
}
},
"screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}
Des instructions sur la façon d’ajouter des paramètres à votre thème sont disponibles ici : Add settings to your Discourse theme.
Pour indiquer à Discourse que vous allez ajouter un composant de thème et non un thème complet, ajoutez simplement la ligne "component": true au fichier about.json.
La structure des fichiers correspond aux CSS / HTML personnalisés du thème.
Pour aller plus loin
Consultez les autres articles avec le tag #themes::tag.
Voir également :
- Developing Discourse Themes & Theme Components
- Install the Discourse Theme CLI console app to help you build themes
- Include assets (e.g. images, fonts) in themes and components
Dernière révision par @SaraDev le 2022-08-15T21:00:00Z
Ce document est versionné - proposez des modifications sur GitHub.

