Canvas fournit un modèle flexible qui vous permet de créer des thèmes personnalisés avec moins de code. Ajustez facilement les propriétés et les valeurs de configuration pour adapter un thème à vos besoins.
Vues d’exemple
Le modèle de base conserve les valeurs par défaut et reste neutre dans sa conception.
Synchronisez le thème avec votre instance Discourse en utilisant la gem discourse_theme.
Accédez au backend d’administration et ajustez manuellement ces paramètres du composant de thème : Bannières de catégorie
Emplacement du plugin → above-main-container Bannières de balise
Afficher sous l’en-tête du site → décocher
Afficher au-dessus du conteneur principal → cocher
Modifiez scss/properties.scss pour définir les valeurs des propriétés personnalisées
Modifiez about.json pour ajouter des actifs, des schémas de couleurs et d’autres composants de thème
Un regard plus attentif sur la configuration
Le modèle Canvas Theme étend uniquement le squelette de thème par défaut en regroupant quelques composants de thème et en ajoutant des fichiers de style prêts à l’emploi. Les fonctionnalités réelles sont gérées par un composant de thème séparé, Canvas Settings. Ce composant remplit deux fonctions :
Il attribue des propriétés personnalisées qui peuvent être utilisées avec le modèle. Un tableau listant toutes les propriétés se trouve dans le fichier Readme du modèle.
Cette configuration divisée vous permet de créer un thème en utilisant le modèle Canvas, tout en bénéficiant des corrections et mises à jour continues fournies par le composant.
Exemples de thèmes
Vous pouvez examiner le code des vues d’exemple partagées ou les installer comme thème de démarrage à partir de ces dépôts :
Les paramètres sont situés dans le composant de thème installé sous Canvas Settings. Il est peut-être un peu trompeur que les paramètres soient toujours nommés Theme Settings dans l’interface utilisateur, même sur les composants de thème.
J’ai testé la version Editor localement, elle fonctionne très bien dans l’ensemble, mais j’ai remarqué quelques petits problèmes.
Sur une installation par défaut, sans modifier aucun paramètre, le libellé de l’étiquette dans le composant Extra Banners apparaît au mauvais endroit :
La bannière de catégorie est également affichée au même endroit, au-dessus de la barre latérale. Les derniers sujets et les sujets populaires sont correctement affichés dans la colonne principale.
Je suppose que ce n’est pas l’objectif du thème de couvrir entièrement l’interface d’administration, cependant, les palettes de couleurs claires et sombres de l’Editor donnent un aspect assez différent à la barre latérale d’administration. Je suis curieux de savoir s’il est possible d’harmoniser cela avec la barre latérale non-admin.
Le thème est conçu pour afficher des bannières à côté de la barre latérale, en utilisant la sortie above-main-container. Le composant Extra-Banners utilise cette sortie par défaut, mais les deux composants pour les bannières de catégorie et d’étiquette sont par défaut rendus sous l’en-tête. Je ne voudrais pas forker ces composants, juste pour définir une sortie par défaut différente. C’est pourquoi j’ai mis ces instructions :
Mais si c’est facile à manquer, peut-être y a-t-il une meilleure façon de le dire ?
Oui, c’est assez facile et semble être une bonne approche pour ce thème. Je viens d’ajouter un commit !
Ah oui, je vois comment nous en sommes arrivés là. Nous ne voulons pas nécessairement modifier les valeurs par défaut des composants de bannière de catégorie/tag, et nous ne voulons pas non plus les forker. C’est délicat à corriger, laissons les choses telles qu’elles sont pour l’instant et voyons si d’autres rencontrent le même problème.
Le changement dans la barre latérale de l’administrateur semble déjà bien, merci !
Ces instructions pourraient-elles être un peu plus détaillées ? N’est-il pas possible d’installer simplement depuis l’interface d’administration ? Merci
EDIT : Je l’ai installé via l’interface d’administration et cela semble fonctionner, sauf qu’il ne semble y avoir nulle part où modifier le SCSS maintenant.
EDIT : Laissez tomber, je vois que c’est probablement attendu et que vous montrez comment modifier les fichiers de thème directement. Je me demande si cela pourrait être dans la feuille de route pour que cela se produise via l’interface d’administration ? Par exemple, avoir un éditeur de variables comme vous avez un éditeur de paramètres.
Je ne sais pas ce qu’il y a sur la feuille de route principale, mais une chose que vous pourriez faire dès maintenant est de créer un nouveau composant de thème directement dans l’interface d’administration :
Et ensuite déclarer des propriétés personnalisées dans son fichier CSS. Vous pourriez soit rechercher des propriétés dans le fichier Readme. Ou copier le contenu de properties.scss depuis le dépôt de thème.
Cependant, si vous souhaitez pouvoir synchroniser les modifications, je pense que vous devrez tirer vers un clone local, puis pousser à partir de celui-ci. Quelque chose comme ceci :
Je ne vois pas de plus sur mobile sur GitHub. Je devrai peut-être essayer les lignes de commande quand je serai chez moi.
Tout ce que je vois sur GitHub dans le tableau de bord est l’option de créer un nouveau dépôt mais aucune option de réclamation. Je suis sur un compte gratuit, donc je ne suis pas sûr que cela puisse y être lié.
J’ai ajouté un composant qui vous permet de définir quelques variables de style et options de mise en page directement sur l’interface utilisateur du composant :
C’est limité par rapport à la déclaration de variables personnalisées dans la feuille de style. Mais cela vous permet de tester quelques looks différents. Curieux de savoir si cela fonctionne !
J’ai juste ajusté les styles CSS de la barre latérale solide, le défilement devrait fonctionner à nouveau !
Cependant, la barre latérale solide n’est qu’une des options du composant Styles que j’ai mentionné dans le message ci-dessus. Si vous souhaitez ajuster plus de styles (comme l’espacement du menu de la barre latérale), vous devrez suivre l’approche expliquée ci-dessus dans Utilisation et Un regard plus attentif sur la configuration : Utilisez votre propre feuille de style avec des propriétés CSS personnalisées – dans ce cas, ce serait -d-sidebar-row-height.
J’ai assemblé un nouveau thème d’exemple basé sur ce modèle. Comme son nom l’indique, celui-ci rend hommage au thème Central original !
J’ai adoré la mise en page et le style visuel de Central et j’ai regroupé certaines de ses fonctionnalités dans des composants autonomes, comme le Menu utilisateur personnalisé et plusieurs blocs de barre latérale.
J’ai réalisé qu’avec la barre latérale et quelques styles, ce modèle vous rapproche déjà de l’apparence du thème original.
Dans tous les cas, je ne prévois pas de reconstruire entièrement le thème Central… mais je pourrais encore expérimenter avec un style de liste de sujets dédié à l’avenir. Si vous êtes curieux et souhaitez y jeter un œil, le thème est également disponible ici : https://central.kostka.studio
Merci d’avoir partagé ce modèle ! La flexibilité avec les composants et la conception épurée le rendent vraiment facile à personnaliser. J’ai hâte de l’essayer sur ma propre instance.
| Résumé | Lancez rapidement la conception de votre thème avec un modèle de thème préparé.
|Public| Nouveaux développeurs souhaitant commencer à créer des thèmes pour Discourse. Développeurs expérimentés souhaitant utiliser un modèle prêt à l’emploi. |
|Dépôt| Manuel Kostka / Discourse / Canvas / Canvas Theme Template · GitLab |
|Guide d’installation|Comment installer un thème ou un composant de thème|
|Nouveau aux thèmes Discourse ?| Guide pour débutants sur l’utilisation des thèmes Discourse|
Un immense merci à Discourse pour avoir sponsorisé le développement de ce projet !
!