Voici un cours accéléré sur les bases des thèmes Discourse. Ce guide s’adresse à tous ceux qui ne connaissent pas encore les thèmes Discourse. Si vous avez déjà utilisé des thèmes ou des composants de thème Discourse, ce guide n’est probablement pas pour vous.
Que sont les thèmes et les composants de thème ?
Un thème ou un composant de thème est un ensemble de fichiers regroupés, conçus soit pour modifier l’apparence visuelle de Discourse, soit pour ajouter de nouvelles fonctionnalités.
Commençons par les thèmes.
Thèmes
En règle générale, les thèmes ne sont pas conçus pour être compatibles entre eux, car ils constituent essentiellement des designs autonomes et distincts. Imaginez les thèmes comme des skins, ou comme les lanceurs d’applications sur Android. Vous pouvez installer plusieurs lanceurs, mais vous ne pouvez pas en utiliser deux en même temps. Votre installation par défaut de Discourse comprend deux thèmes : Foundation et Horizon.
Foundation offre un look classique et épuré de Discourse, tandis qu’Horizon propose un design plus moderne avec plusieurs palettes de couleurs au choix (telle que Horizon, Royal, Clover, Lily, Violet et Marigold — chacune disposant de variantes claires et sombres).
Mode clair
et Mode sombre
Disons que cela ne vous suffit pas et que vous en voulez PLUS. Eh bien, vous pouvez installer des thèmes supplémentaires assez facilement. Voici quelques exemples de thèmes gratuits disponibles ici sur Meta.
Le design « minimal » personnel de la liste des sujets de Sam
Comme vous pouvez le voir, l’apparence de votre site peut radicalement changer selon le thème que vous sélectionnez ; cependant, ce n’est pas tout. En plus des thèmes, Discourse prend également en charge les composants de thème.
Composants de thème
Nous utilisons l’expression « composant de thème » pour décrire des packages plus axés sur la personnalisation d’un aspect spécifique de Discourse. En raison de leur focalisation étroite, les composants de thème sont presque toujours compatibles entre eux. Cela signifie que vous pouvez faire fonctionner plusieurs composants de thème simultanément sous n’importe quel thème. Vous pouvez considérer les composants de thème comme des applications sur votre téléphone.
Comme toujours, les exemples sont le meilleur moyen de décrire quelque chose, voici donc quelques exemples de composants de thème disponibles ici sur Meta :
Ce composant de thème prend vos détails de catégorie existants, y compris le nom, la description et la couleur, et génère une bannière en haut des pages de catégorie concernées.
Composant de thème Brand header
Ce composant de thème ajoute un en-tête supérieur supplémentaire pour l’image de marque, avec votre logo, des liens de navigation et des icônes sociales, tant pour les vues mobile que desktop. Le logo de la marque peut être une image ou du texte.
Comme vous pouvez le voir, les composants de thème ont une portée beaucoup plus étroite. Par conséquent, ils sont compatibles entre eux dans la plupart des cas. Vous avez maintenant une idée générale de ce que sont les thèmes et les composants de thème Discourse. Creusons un peu plus.
Interface des thèmes Discourse
Examinons l’interface des thèmes. Rendez-vous sur votre.site.com/admin/customize/themes et vous devriez voir quelque chose comme ceci :
Il s’agit de l’interface par défaut des thèmes dans Discourse. Vous pouvez y effectuer un certain nombre d’opérations :
- Définir le thème actif par défaut
- Choisir quels thèmes rendre disponibles pour vos utilisateurs
- Créer de nouveaux thèmes et composants de thème
- Importer de nouveaux thèmes et composants de thème
- Ajouter des composants de thème à un thème
- Modifier les schémas de couleurs
- Changer les paramètres du thème
- Prévisualiser un thème
Passons en revue ces points un par un.
Définir le thème actif par défaut
La petite coche à côté du nom du thème par défaut indique qu’il s’agit du thème actif sur votre site.
Modifions maintenant le thème actif pour le thème Dark (Sombre). Cliquez sur le thème Dark et vous devriez voir ceci :
Le thème actif de votre site sera défini sur Dark. Cela signifie que tous les visiteurs de votre site verront ceci :
Et la coche se déplacera alors à côté du nom du thème Dark, indiquant qu’il est le thème actif.
Choisir quels thèmes rendre disponibles pour vos utilisateurs
Il est agréable de pouvoir définir un thème pour votre site, mais savez-vous ce qui est encore mieux ? Laisser vos utilisateurs décider. Discourse vous permet de proposer différents thèmes à vos utilisateurs, leur permettant de définir le thème selon leurs préférences. Leur choix est limité à leur propre compte et n’affectera pas votre choix de thème actif ni les choix des autres utilisateurs.
Par exemple, vous pouvez définir le thème actif sur le thème par défaut (clair) mais proposer le thème sombre comme option. Essayons de faire cela maintenant. Dans l’interface des thèmes.
Tous les thèmes actifs que vous avez, qu’il s’agisse du thème par défaut défini sur votre site ou de tout thème que vous avez marqué comme sélectionnable par les utilisateurs, s’afficheront ici :
Seul le thème par défaut aura la coche verte.
Maintenant, essayons de rendre le thème Red (Rouge) sélectionnable par les utilisateurs, par exemple.
Tout ce que vous avez à faire est de cliquer dessus, puis de cocher la case qui indique « Le thème peut être sélectionné par les utilisateurs ».
C’est tout ! Vous remarquerez qu’il est automatiquement déplacé de la liste des thèmes inactifs à la liste des thèmes actifs.
et vos utilisateurs pourront sélectionner le thème de leur choix en allant sur
votre.site.com/my/preferences/interface
Créer de nouveaux thèmes et composants de thème
Pour créer un nouveau thème ou un nouveau composant de thème, cliquez sur l’un des deux boutons « Install » (Installer).
Une boîte de dialogue apparaîtra. Sélectionnez l’option « Create new » (Créer nouveau) dans le menu de gauche. Vous devrez fournir un nom pour ce que vous souhaitez créer et décider s’il s’agit d’un thème ou d’un composant de thème.
Nous avons couvert les bases de ce que sont les thèmes et les composants de thème. Si vous vous en souvenez, un composant de thème est généralement axé sur la modification d’une zone de Discourse. Alors qu’un thème couvre généralement plusieurs aspects. Vous devez également noter qu’un thème peut avoir autant de composants de thème qu’il le souhaite, tandis qu’un composant de thème ne peut pas en avoir. Ne vous en faites pas pour l’instant, une explication plus détaillée de cette relation suivra plus tard.
Maintenant, disons que vous avez choisi le nom et décidé d’en faire un thème. Eh bien, une fois que vous avez cliqué sur le bouton « Create » (Créer), le thème sera créé et vous pourrez ensuite :
- Changer le nom du thème / du composant de thème
- Définir ou modifier un schéma de couleurs pour le thème
- Ajouter du HTML / CSS / JS au thème / au composant de thème
- Ajouter des fichiers ou des uploads au thème
- Ajouter des composants enfants à votre thème
Les personnalisations spécifiques sortent du cadre de ce guide, je m’arrête donc ici pour ce point.
L’interface pour ajouter du HTML / CSS / JS ressemble à ceci (une fois que vous avez cliqué sur le point n°3 ci-dessus)
Importer de nouveaux thèmes et composants de thème
Nous avons déjà un guide sur la façon d’importer des thèmes, mais j’inclus la procédure ici car ce guide est censé couvrir toutes les bases.
Pour importer un thème ou un composant de thème, cliquez sur l’un des deux boutons « Install » (Installer).
La section « Popular » (Populaire) vous permettra de prévisualiser/installer à partir d’une liste de nos thèmes et composants les plus populaires.
Vous pouvez également importer des fichiers de thème depuis votre appareil ou via le lien du dépôt de thèmes. Le lien du dépôt pour chaque thème est fourni par l’auteur dans le sujet du thème. Une fois que vous avez importé un thème, toutes les opérations dont nous avons discuté précédemment s’appliqueront à celui-ci. Vous pouvez le définir comme thème par défaut, le rendre sélectionnable par les utilisateurs, etc.
Si vous importez un composant de thème, vous pouvez également l’ajouter à n’importe lequel de vos thèmes. Cela est couvert en détail dans la section suivante.
Ajouter des composants de thème à un thème
Disons que vous aimez le composant de thème Discourse Category Banners et que vous souhaitez l’utiliser. Vous procéderiez comme suit :
- Importez le thème depuis le dépôt comme nous l’avons discuté ci-dessus
- Ajoutez-le en tant que composant de thème à vos thèmes actifs / sélectionnables par les utilisateurs
Vous pouvez le faire comme ceci :
Après avoir importé le composant, rendez-vous sur le thème auquel vous souhaitez l’ajouter et recherchez la section « Included components » (Composants inclus).
Cette liste affichera tous les composants de thème installés. À partir de là, vous pouvez ajouter des composants de thème au thème. L’ajout du composant de thème Versatile Banner ressemblerait à ceci :
Une option similaire, « Include component on these themes » (Inclure le composant sur ces thèmes), existe depuis la page d’un composant individuel. Cela vous permet d’ajouter un composant à plusieurs thèmes à la fois.
C’est à peu près tout. Discourse Category Banners est désormais un composant actif du thème par défaut. Si vous souhaitez également qu’il soit ajouté au thème Dark (Sombre), vous répéterez le processus d’ajout du composant de thème pour le thème Dark.
Si vous avez défini le thème Dark comme sélectionnable par les utilisateurs et ajouté le composant de thème Discourse Category Banners à celui-ci, les utilisateurs qui sélectionnent le thème Dark comme thème actif bénéficieront également du composant de thème Discourse Category Banners, car il s’agit d’un « composant enfant » du thème Dark.
Vous pouvez avoir un nombre illimité de composants de thème sous un thème et, comme nous l’avons discuté plus tôt, ils sont généralement compatibles entre eux. Vous pouvez donc faire quelque chose comme ceci :
Et tous ces composants seraient actifs sur le thème par défaut en même temps.
Modifier les schémas de couleurs
Un schéma de couleurs est une palette de couleurs que vous choisissez pour générer la couleur des éléments d’un thème. Je n’entrerai pas dans beaucoup de détails ici, mais je vous montrerai comment utiliser les schémas de couleurs.
Rendez-vous sur votre.site.com/admin/customize/colors et vous verrez :
À partir de là, vous pouvez modifier les schémas de couleurs ou en créer de nouveaux. Pour modifier un schéma de couleurs, cliquez dessus et changez les couleurs à votre convenance.
Pour créer un nouveau schéma de couleurs, cliquez ici.
Une fois que vous avez terminé de modifier les couleurs, il est temps de définir le schéma de couleurs comme actif dans vos thèmes actifs ou sélectionnables par les utilisateurs. Pour ce faire, rendez-vous sur la page du thème et regardez ici :
Paramètres des thèmes
Les thèmes Discourse peuvent avoir des paramètres. Ces paramètres sont conçus pour être un moyen facile pour vous de configurer un thème ou un composant de thème selon vos besoins. Par exemple, le thème Discourse Button Styles a quelques paramètres permettant une personnalisation facile de l’apparence des boutons en modifiant simplement quelques valeurs à votre convenance.
Tous les thèmes / composants de thème n’ont pas de paramètres, mais pour ceux qui en ont, ils s’afficheront toujours ici. Les paramètres incluront généralement des instructions fournies par l’auteur qui vous aident à déterminer les modifications à apporter.
Prévisualisation d’un thème
Parfois, vous avez besoin de voir à quoi ressemble un thème sur votre site avant de l’appliquer. Discourse offre un moyen facile de prévisualiser les thèmes sans les définir comme actifs.
Lorsque vous êtes sur la page d’un thème, cliquez ici.
et un nouvel onglet s’ouvrira avec un aperçu en direct de ce à quoi le thème ressemblerait sur votre site. Vous pouvez naviguer vers différentes pages et voir à quoi ressemble tout.
La meilleure partie de la prévisualisation d’un thème est que vous pouvez tester les modifications en direct sans causer de problèmes sur votre site au cas où quelque chose tournerait mal.
Informations supplémentaires
Mode sans échec (Safe-mode)
Discourse dispose d’un moyen intégré de contourner le thème actif actuel au cas où les choses tourneraient mal. Par exemple, une erreur JavaScript dans le code d’un composant peut empêcher votre site de fonctionner correctement. Pour contourner le thème actif actuel, rendez-vous simplement sur
votre.site.com/safe-mode
Vous verrez alors :
À partir de là, vous pouvez désactiver le thème actif actuel, naviguer vers la page du thème et soit corriger le problème, soit désactiver définitivement le thème.
Obtenir de nouveaux thèmes
Le moyen le plus simple de trouver de nouveaux thèmes et composants de thème est de consulter la catégorie Customization > Theme ici sur Meta.
Lectures complémentaires
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
Si vous avez des questions, n’hésitez pas à demander.