Voici un cours accéléré sur les bases des thèmes Discourse. Il s’adresse à tous ceux qui ne sont pas familiers avec les thèmes Discourse. Si vous avez déjà utilisé des thèmes ou des composants de thème Discourse, ce guide ne vous sera probablement pas utile.
Qu’est-ce que 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çu soit pour modifier l’apparence visuelle de Discourse, soit pour ajouter de nouvelles fonctionnalités.
Commençons par les thèmes.
Thèmes
En général, les thèmes ne sont pas censés être compatibles entre eux, car ils représentent essentiellement des conceptions autonomes différentes. Pensez aux thèmes comme à des skins ou à des lanceurs sur Android. Vous pouvez installer plusieurs lanceurs, mais vous ne pouvez pas en utiliser deux simultanément. Votre installation Discourse par défaut inclut deux thèmes : Foundation et Horizon.
Foundation offre un look Discourse classique et épuré, tandis qu’Horizon propose un design plus moderne avec plusieurs palettes de couleurs au choix (telles que Horizon, Royal, Clover, Lily, Violet et Marigold — chacune disposant de variantes clair et sombre).
Par défaut
et Sombre
Si cela ne vous suffit pas et que vous en voulez ENCORE PLUS, pas de problème. Vous pouvez installer des thèmes supplémentaires assez facilement. Voici quelques exemples de thèmes gratuits disponibles ici sur Meta.
Design de liste de sujets “minimal” personnel de Sam
Comme vous pouvez le constater, l’apparence de votre site peut varier considérablement selon le thème sélectionné ; 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 davantage orientés vers la personnalisation d’un aspect spécifique de Discourse. En raison de leur objectif ciblé, les composants de thème sont presque toujours compatibles entre eux. Cela signifie que vous pouvez exécuter 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 :
Bannières de catégorie Discourse
Ce composant de thème reprend les détails existants de vos catégories, 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 En-tête de marque
Ce composant de thème ajoute un en-tête supérieur supplémentaire pour le branding avec votre logo, des liens de navigation et des icônes sociales, tant pour les vues mobiles que bureautiques. Le logo de marque peut être une image ou du texte.
Comme vous pouvez le constater, les composants de thème ont un objectif beaucoup plus restreint. Par conséquent, ils sont généralement compatibles entre eux. Vous avez maintenant une idée générale de ce que sont les thèmes et les composants de thème Discourse. Approfondissons un peu.
Interface des thèmes Discourse
Examinons l’interface des thèmes. Allez à your.site.com/admin/customize/themes et vous devriez voir quelque chose comme ceci :
C’est l’interface de thème par défaut dans Discourse. Vous pouvez y effectuer plusieurs actions :
- 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
Parcourons-les 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.
Passons maintenant au thème Sombre. Cliquez sur le thème Sombre et vous devriez voir ceci :
Le thème actif de votre site sera défini sur Sombre. 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 Sombre, indiquant qu’il est actif.
Choisir quels thèmes rendre disponibles pour vos utilisateurs
C’est bien 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 d’offrir différents thèmes à vos utilisateurs, leur permettant ainsi de définir le thème selon leurs préférences. Leur choix est limité à leur propre compte et n’affectera ni 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) tout en proposant le thème sombre comme option. Essayons de le faire maintenant, dans l’interface des thèmes.
Tous les thèmes actifs que vous possédez, 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 :
Cependant, seul le thème par défaut aura la coche verte.
Maintenant, essayons par exemple de rendre le thème Rouge sélectionnable par les utilisateurs.
Tout ce que vous avez à faire est de cliquer dessus, puis de cocher la case indiquant « 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 vers la liste des thèmes actifs.
Vos utilisateurs pourront alors sélectionner le thème de leur choix en allant à :
your.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 « Installer ».
Une boîte de dialogue s’ouvrira alors. Sélectionnez l’option « 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 déjà couvert les bases de ce que sont les thèmes et les composants de thème. Si vous vous souvenez, un composant de thème est généralement axé sur la modification d’une zone spécifique de Discourse, tandis qu’un thème couvre généralement plusieurs aspects. Notez également qu’un thème peut inclure n’importe quel nombre de composants de thème en dessous de lui, mais qu’un composant de thème ne peut pas en avoir. Ne vous inquiétez pas pour l’instant, une explication plus détaillée de cette relation suivra plus tard.
Maintenant, disons que vous avez décidé du nom et choisi de le faire en tant que thème. Une fois que vous aurez cliqué sur le bouton « Créer », le thème sera créé et vous pourrez alors :
- 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 sont hors du cadre de ce guide, je m’arrêterai donc ici pour ce point.
L’interface pour ajouter du HTML / CSS / JS ressemble à ceci (une fois que vous avez cliqué sur #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 je l’inclus 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 « Installer ».
La section « Populaire » vous permettra de prévisualiser et d’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 un lien vers le dépôt de thème. 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, tout ce que nous avons discuté précédemment s’appliquera à lui. Vous pouvez le définir comme défaut, le rendre sélectionnable par les utilisateurs, etc.
Si vous importez un composant de thème, vous pouvez également l’ajouter à l’un 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 « Bannières de catégorie Discourse » et que vous souhaitez l’utiliser. Vous procéderez 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 ou sélectionnables par les utilisateurs.
Vous pouvez le faire comme ceci :
Après avoir importé le composant, allez au thème auquel vous souhaitez l’ajouter et cherchez la section « 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. Ajouter le composant de thème « Bannière polyvalente » ressemblerait à ceci :
Une option similaire, « Inclure le composant sur ces thèmes », existe sur la page d’un composant individuel. Cela vous permet d’ajouter un composant à plusieurs thèmes à la fois.
C’est à peu près tout. Les bannières de catégorie Discourse sont maintenant un composant actif du thème par défaut. Si vous souhaitez également qu’elles soient ajoutées au thème Sombre, vous devrez répéter le processus d’ajout du composant de thème pour le thème Sombre.
Si vous avez défini le thème Sombre comme sélectionnable par les utilisateurs et que vous avez également ajouté le composant de thème « Bannières de catégorie Discourse » à celui-ci, les utilisateurs qui sélectionnent le thème Sombre comme thème actif obtiendront également le composant de thème « Bannières de catégorie Discourse », car il s’agit d’un « thème enfant » du thème Sombre.
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 seront 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.
Naviguez vers your.site.com/admin/customize/colors et vous verrez :
À partir d’ici, vous pouvez modifier des schémas de couleurs ou en créer de nouveaux. Pour modifier un schéma de couleurs, cliquez dessus et changez les couleurs selon vos préférences.
Pour créer un nouveau schéma de couleurs, cliquez ici.
Une fois que vous avez terminé de modifier les couleurs, il est maintenant 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, allez sur la page du thème et cherchez ici.
Paramètres du thème
Les thèmes Discourse peuvent avoir des paramètres. Ces paramètres sont conçus pour être un moyen facile de configurer un thème ou un composant de thème selon vos besoins. Par exemple, le thème Styles de boutons Discourse dispose de quelques paramètres permettant une personnalisation facile de l’apparence des boutons en modifiant simplement quelques valeurs selon vos préférences.
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 quelles modifications doivent être apportées.
Prévisualiser un thème
Parfois, vous devez voir à quoi ressemble un thème sur votre site avant de l’appliquer. Discourse offre un moyen simple de prévisualiser des 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 l’apparence du thème sur votre site. Vous pouvez naviguer vers différentes pages et voir à quoi tout ressemble.
La meilleure partie de la prévisualisation d’un thème est que vous pouvez tester des modifications en direct sans causer de problèmes sur votre site au cas où quelque chose irait mal.
Informations supplémentaires
Mode sécurisé
Discourse dispose d’un moyen intégré de contourner le thème actif actuel en cas de problème. 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, visitez simplement :
your.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
La méthode la plus directe pour trouver de nouveaux thèmes et composants de thème est de consulter la catégorie #thème ici sur Meta.
Pour aller plus loin
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.