Structure des thèmes et des composants de thème

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.

image

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 :arrow_up: 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.

:information_source: Voir également :


Dernière révision par @SaraDev le 2022-08-15T21:00:00Z


Ce document est versionné - proposez des modifications sur GitHub.

62 « J'aime »
Alien Night Theme - A free Dark Theme for Discourse
Override values for auto-generated color variables
How to modify the header HTML, but still remaining the default founctions
Custom user fields show on Activity, but not Summary page
Add Unsolved button to top menu using custom HTML
Add support for theme settings
Create and share a font theme component
Color Scheme Contest (with Prizes!)
How do I get started with Discourse development as a regular end user with no programming experience?
Custom assets upload folder?
Some basic questions about discourse and rails
Create and share a color scheme
Split up theme SCSS into multiple files
Theme Developer Quick Reference Guide
Theme Developer Tutorial: 2. Creating a remote theme
Mobile View Loading different HTML as compared to Desktop
Developing Discourse Themes & Theme Components
Minimizing Maintenance on Theme Customizations
Need help with theme component Github
Allow users to select new color palettes
Challenges creating a custom color palette
Adding metadata and screenshots to a Theme
Push to digital ocean from command line and rebuild
Battle Axe - A free theme by the Tappara.co hockey community
Beginner's guide to using Discourse Themes
Discourse deployment using github or bitbucket?
How to remove sticky top bar?
Do you have original customisations?
Add custom content that only appears on your homepage
Highlight color
Timefuser Theme
Compact member list
Understanding the development/deployment process
CSS Theme Contest (with Prizes!)
How to bring in Latest topics when using category boxes
Need to include PGN (chess game notation) in a post
Custom header colour and category icons and login button
Automatic dark mode for embedded comments as well?
Add settings to your Discourse theme
Designer's Guide to getting started with themes in Discourse