| | | |
|:information_source: | Résumé | Démarrez rapidement la conception de votre thème avec un modèle de thème préparé.|
|:busts_in_silhouette: | 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.|
|:hammer_and_wrench: | Dépôt | https://gitlab.com/manuelkostka/discourse/canvas/theme|
|:open_book: | Nouveau dans les thèmes Discourse ? | Guide du débutant pour utiliser les thèmes Discourse|
Canvas fournit un modèle flexible qui vous permet de créer des thèmes personnalisés avec moins de codage. 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.
Synchroniser le thème avec votre instance Discourse en utilisant le gem discourse_theme.
Accéder au backend d’administration et ajuster manuellement ces paramètres de composant de thème : Bannières de catégorie
Sortie 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
Modifier scss/properties.scss pour définir les valeurs des propriétés personnalisées
Modifier about.json pour ajouter des actifs, des schémas de couleurs et d’autres composants de thème
Un regard plus approfondi 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 quelques 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 séparé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 via le composant.
Thèmes d’exemple
Vous pouvez prévisualiser les thèmes d’exemple partagés sur https://canvas.kostka.studio. Il y a un commutateur de thème en bas de la barre latérale pour changer de thème.
Examinez le code des vues d’exemple partagées ou installez-les 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 élaboré un nouveau thème d’exemple basé sur ce modèle. Comme son nom l’indique, celui-ci est un 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 Custom User Menu 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’un bon aperçu de l’apparence et de la convivialité 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é plus tard. Si vous êtes curieux et souhaitez y jeter un œil, le thème est également disponible en direct ici, sélectionnez-le à l’aide du sélecteur de thème de la barre latérale : https://canvas.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.
Avec la mise à jour Foundation devenant la nouvelle valeur par défaut dans un avenir proche, le modèle de thème Canvas sera-t-il mis à jour pour utiliser les mêmes « foundations » (eh), ou conservera-t-il le même style qu’il a actuellement, très proche du thème Foundation actuel (bientôt obsolète) ?
Un immense merci à Discourse pour avoir parrainé le développement de ce projet !
!