Ceci est un cours accéléré sur les bases des thèmes Discourse. Le public cible est toute personne non familière avec les thèmes Discourse. Si vous avez déjà utilisé des thèmes Discourse / composants de thème, ce guide n’est probablement pas quelque chose que vous devez lire.
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çus pour soit modifier Discourse visuellement, soit 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 les uns avec les autres car ce sont essentiellement des designs autonomes différents. Pensez aux thèmes comme à des skins, ou comme aux lanceurs sur Android. Vous pouvez avoir plusieurs lanceurs installés mais vous ne pouvez pas utiliser deux d’entre eux en même temps. Votre installation Discourse par défaut comprend deux thèmes : Foundation et Horizon.
Foundation offre un look Discourse propre et classique, tandis que Horizon propose un design plus moderne avec plusieurs palettes de couleurs au choix (telles que Horizon, Royal, Clover, Lily, Violet et Marigold — chacune avec des variantes claires et sombres).
Foundation
et Horizon
Disons que ce n’est pas suffisant pour vous 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.
Design de liste de sujets “minimaliste” personnel de Sam
Comme vous pouvez le voir, votre site peut avoir une apparence radicalement différente selon le thème que vous sélectionnez ; cependant, ce n’est pas la fin de l’histoire. 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 de Discourse. En raison de leur champ d’application restreint, les composants de thème sont presque toujours compatibles entre eux. Cela signifie que vous pouvez avoir plusieurs composants de thème fonctionnant simultanément sous n’importe quel thème. Vous pouvez penser aux 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, alors voici quelques exemples de composants de thème disponibles ici sur Meta
Bannières de catégorie Discourse
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 pertinentes.
Composant de thème d’en-tête de marque
Ce composant de thème ajoute un en-tête supplémentaire pour le branding avec votre logo, des liens de navigation et des icônes sociales pour les vues mobiles et de bureau. Le logo de la marque peut être une image ou du texte.
Comme vous pouvez le voir, les composants de thème ont un champ d’application beaucoup plus restreint. En tant que tels, ils sont compatibles les uns avec les autres dans la plupart des cas. Maintenant, vous avez une idée générale de ce que sont les thèmes Discourse et les composants de thème. Plongeons un peu plus profondément.
Interface des thèmes Discourse
Regardons l’interface des thèmes. Allez à your.site.com/admin/customize/themes et vous devriez voir quelque chose comme ceci :
Ceci est l’interface de thème par défaut dans Discourse. Vous pouvez faire plusieurs choses ici :
- 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
Vous pouvez voir un badge indiquant qu’un thème est défini comme par défaut :
Maintenant, changeons le thème actif en Horizon. Vous pouvez le faire depuis le bouton du menu … ou en cliquant sur le nom du thème et en sélectionnant la case à cocher sur la page des paramètres :
Le thème actif sur votre site sera défini sur Horizon. Cela signifie que tout le monde qui visite votre site verra ceci :
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 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 ou les choix des autres utilisateurs.
Par exemple, vous pouvez définir le thème actif sur le thème par défaut (Horizon) mais offrir le thème Foundation en option. Essayons de faire cela maintenant dans l’interface des thèmes.
Tout ce que vous avez à faire est de cliquer sur le bouton du menu …, puis de sélectionner “Autoriser les utilisateurs à sélectionner”
C’est tout ! il obtiendra maintenant un badge “sélectionnable par l’utilisateur”
et vos utilisateurs pourront sélectionner le thème qu’ils préfèrent 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 composant de thème, cliquez sur le bouton “Installer”
Vous obtiendrez alors une boîte de dialogue. Sélectionnez l’option “Créer nouveau” dans le menu. Vous devrez fournir un nom pour ce que vous voulez 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 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 choses. Vous devez également noter qu’un thème peut avoir n’importe quel nombre de composants de thème sous lui, tandis qu’un composant de thème ne le peut pas. Ne vous inquiétez pas de cela pour le moment, une explication plus détaillée de cette relation suivra plus tard.
Maintenant, disons que vous avez décidé du nom et que vous avez décidé d’en faire un thème. Eh bien, une fois que vous avez appuyé sur le bouton “Créer”, le thème sera créé et vous pourrez alors
- Changer le nom du thème / composant de thème
- Définir ou modifier un schéma de couleurs pour le thème
- Ajouter des composants enfants à votre thème
- Ajouter du html / css / js au thème / composant de thème
- Ajouter des fichiers ou des téléchargements au thème
Les personnalisations spécifiques sont hors du champ de ce guide et donc je m’arrêterai ici pour ce point.
L’interface pour ajouter du html / css / js ressemble à ceci (une fois que vous avez cliqué sur #4 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 comment faire cela ici car ce guide est censé couvrir toutes les bases.
Pour importer un thème ou un composant de thème, le bouton “Installer”
La section “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 référentiel de thèmes. Le lien du référentiel pour chaque thème est fourni par l’auteur sur le sujet du thème. Une fois que vous avez importé un thème, toutes les choses dont nous avons discuté plus tôt s’appliqueront à celui-ci. Vous pouvez le définir comme par défaut, le rendre sélectionnable par l’utilisateur, 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 des bannières de catégorie Discourse et que vous voulez l’utiliser. Vous procéderez comme suit
- importez le thème du référentiel comme nous l’avons discuté ci-dessus
- ajoutez-le comme composant de thème à vos thèmes actifs / sélectionnables par l’utilisateur
Vous pouvez le faire comme suit :
Après avoir importé le composant, allez au thème auquel vous voulez 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. L’ajout du composant Fonctionnalité de la page d’accueil ressemblerait à ceci
Une option similaire, “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. Fonctionnalité de la page d’accueil est maintenant un composant actif du thème par défaut. Si vous voulez également qu’il soit ajouté à un autre thème, vous répéteriez le processus d’ajout du composant de thème.
Si vous avez défini le thème Foundation comme sélectionnable par l’utilisateur et ajouté le composant de thème Fonctionnalité de la page d’accueil à celui-ci également, les utilisateurs qui sélectionnent le thème Foundation comme thème actif obtiendront également le composant de thème Fonctionnalité de la page d’accueil car c’est un “sous-thème” du thème Foundation.
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. Donc vous pouvez faire quelque chose comme ceci :
Et tous ces composants seraient actifs sur le thème 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 dans 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/config/colors et vous verrez
À partir d’ici, 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 changer 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 l’utilisateur. Pour ce faire, allez à 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 composant de thème Fonctionnalité de la page d’accueil a quelques paramètres pour permettre le contrôle des sujets mis en avant :
Tous les thèmes / composants de thème n’ont pas de paramètres, mais pour ceux qui en ont, ils apparaîtront toujours ici. Les paramètres incluront généralement des instructions fournies par l’auteur qui vous aident à déterminer quels changements doivent être effectués.
Prévisualisation d’un thème
Parfois, vous devez 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.
Alors que vous êtes sur la page d’un thème, cliquez ici
et un nouvel onglet s’ouvrira avec une prévisualisation en direct de ce à quoi ressemblerait le thème sur votre site. Vous pouvez naviguer vers différentes pages et voir à quoi ressemble tout. La meilleure chose à propos de la prévisualisation d’un thème est que vous pouvez tester les changements en direct sans causer de problèmes sur votre site au cas où quelque chose ne fonctionnerait pas.
Informations supplémentaires
Mode sans échec
Discourse a un moyen intégré de contourner le thème actif actuel au cas où les choses ne fonctionneraient pas. 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 verriez alors
d’où 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 le thème définitivement.
Obtenir de nouveaux thèmes
La manière la plus directe de trouver de nouveaux thèmes et composants de thème est de vérifier 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 à poser.