Existe-t-il une « carte » de thématiques ? (Un moyen simple de trouver les sorties de plugin, etc.)

J’ai parcouru les guides brillants sur les composants de plugins et de thèmes, mais je suis toujours un peu bloqué pour savoir où trouver rapidement les modèles, composants, widgets ou emplacements de plugins dont j’ai besoin.

J’ai pensé commencer par trois modifications simples : si quelqu’un peut m’orienter dans la bonne direction, ce serait une grande aide :blush:

Quel modèle, composant ou emplacement de plugin dois-je modifier pour ces éléments ?

  1. Les balises dans l’en-tête du HTML de la page d’affichage d’un sujet (lors de la consultation d’un sujet). Je souhaite que la modification soit visible par les robots ainsi que par les humains.
  2. Le code HTML des boîtes de catégorie lorsqu’elles sont affichées n’importe où. (Celles-ci : AdminCP > Paramètres > Style de catégorie.)
  3. Page « À propos » (où modifier le contenu dans les blocs Administrateur et Modérateur)

Lors du theming sur d’autres logiciels de forum, on dispose généralement d’un modèle parent qui contient des références à tous les éléments constituant cette page, ce qui permet de trouver rapidement les modèles à modifier. Par exemple, il y aurait un fichier/modèle forumdisplay (voir Catégorie dans Discourse) contenant le HTML principal et référençant tous les autres modèles. Un autre pour la page showthread (donc la page d’affichage/consultation d’un sujet dans Discourse), un autre pour la page de profil des membres, etc. Ces modèles agiraient comme une liste ou une carte indiquant où trouver ce dont vous avez besoin. Ainsi, si vous souhaitiez modifier, par exemple, le code HTML sous-jacent des publications, vous iriez au fichier ou modèle showthread (c’est-à-dire la page de consultation d’un sujet) et, en l’examinant, vous remarqueriez que vous devez modifier ou consulter le modèle postbit.

Disposons-nous de quelque chose de similaire ? Sinon, l’équipe pourrait-elle envisager d’ajouter quelque chose de comparable ? Ce serait d’une grande aide :slight_smile:

Je l’ai vu (désolé, j’aurais dû le mentionner !) et c’est très utile pour les sorties de plugins visibles, mais qu’en est-il des modèles/composants/widgets, etc. ? Comment les trouvez-vous rapidement et facilement, Robert ? Avez-vous une idée de l’endroit où se trouvent ceux mentionnés dans le premier message ?

Mon conseil est toujours de commencer simplement. Travaillez d’abord sur une exigence simple et trouvez comment la réaliser. Ensuite, passez à la suivante.

En ce qui concerne la personnalisation des thèmes, je dirais que la plupart des modifications porteront sur le CSS. Utilisez les ressources habituelles. Là où cela ne suffit pas, vous devrez envisager de modifier les modèles avec jQuery, ou en dernier recours, de les remplacer. Créez vos propres composants ou widgets pour des cas d’utilisation inédits et intégrez-les.

Le code source est toujours votre allié : explorez la structure des répertoires GitHub de discourse/discourse pour trouver les différentes parties de l’application. Les modèles sont, je pense, la partie la plus facile à comprendre. Si vous n’êtes pas familier avec la structure des répertoires Ember, c’est le moment de vous y familiariser.

Oui, tout à fait. Je crée des thèmes depuis presque aussi longtemps que Discourse existe, et je consulte constamment le code source dans une fenêtre séparée.

Généralement, pour les modèles, vous devriez consulter ceci : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/templates

et pour les widgets, ceci : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets.

Parfois, il n’est pas immédiatement clair où se trouve un modèle, car il peut s’agir d’un composant imbriqué dans un autre modèle… Si je ne me souviens plus, je finis par rechercher dans le source un élément de balisage spécifique…

Par exemple, si je souhaite ajouter quelque chose à la page « À propos »… Je vois que le corps de la page « À propos » possède une classe unique about-page, donc je commence par rechercher about et body-page (qui est une autre classe présente sur la page).

Pour répondre à certaines de vos questions :

Je pense que cela nécessite un plugin, ce qui sort de mon domaine d’expertise… Peut-être qu’une autre personne pourra vous être plus utile.

Il existe différents modèles pour les différentes mises en page de pages, mais en supposant que vous parliez de l’une des mises en page « Boîtes avec… »

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/about.hbs

Merci pour vos réponses à tous les deux :slight_smile:

C’est ce que je pensais faire (je ne pense pas qu’on puisse faire beaucoup plus simple que de modifier les balises titre). Sur d’autres logiciels de forum, j’ouvrirais simplement le fichier ou le modèle de la page ‘showthread’ et je le modifierais ; cela prendrait littéralement moins d’une minute. J’aimerais que le theming de Discourse soit aussi simple (bien qu’il soit possible que mon manque de familiarité avec le theming de Discourse en ce moment soit la raison pour laquelle je me sens perdu).

C’est ce que je pense nécessaire pour tous les éléments du premier message, car ils doivent modifier du contenu existant (plutôt que d’ajouter ou de préfixer à un endroit spécifique, ce vers quoi semblent être orientés les plugin-outlets).

Je pense que c’est très probablement le problème ici. Je ne connais pas Ember et peut-être que c’est ce qui rend tout cela un peu étrange. J’aimerais beaucoup avoir quelque chose comme (deprecated) Plugin outlet locations theme component, mais pour les modèles et tout le reste qui peut être personnalisé — cela serait d’une grande aide.

Comment trouvez-vous ce dont vous avez besoin, Kris ?

Ah merci, c’est vraiment un bon conseil !

Êtes-vous sûr, Kris ? Je pensais que les plugins (ou les plugin-outlets) permettaient seulement d’ajouter quelque chose à l’emplacement de cet outlet particulier. Alors que pour modifier le format des balises titre, je devrais probablement ouvrir le modèle existant (ou le composant ou le widget) et le copier/modifier. Du moins, c’est ma compréhension après avoir lu les deux guides sur les plugins et le theming.

Merci ! Cela ressemble à celui dont j’ai besoin :smiley:

Merci encore, haha ! Ces deux-là semblent maintenant relativement faciles à trouver étant donné leur nom et le fait que vous les ayez indiqués. Je pense que le fait d’être bloqué sur la modification des balises titre a peut-être joué un rôle :relaxed:

Pour le moment, j’ai l’impression qu’il me manque quelque chose, et comme @merefield l’a souligné, cela pourrait être mon manque de familiarité avec Ember. Quelqu’un connaît-il des vidéos YouTube qui vous expliquent rapidement le processus ? Peut-être que vous ou @merefield pourriez en faire une ? :blush:

Ember vaut vraiment la peine d’être appris. Il est très puissant, extensible et rapide.

La lecture de ceci aidera à mieux comprendre le code source :

Lisez les sections sur les modèles, les propriétés calculées, le routeur et les composants.

Discourse n’est pas exactement comme une application Ember standard, mais les guides sont très utiles dans tous les cas.

Un dernier conseil important : identifiez un plugin existant (bon) qui réalise quelque chose de similaire à ce que vous souhaitez accomplir. Examinez son code et adoptez la même approche.

Merci Robert ! Il indique que cette version des guides est ancienne — Discourse utilise-t-elle cette version ou devrais-je consulter les guides les plus récents, la version 3.15 ?

Lisez la version 3.10 pour l’instant. C’est celle que Discourse utilise actuellement. Si vous ouvrez la console JavaScript, vous verrez la version d’Ember et de jQuery sur laquelle fonctionne une instance.

Sachez également qu’il existe différents « styles » de décoration de code. Ainsi, les éléments dans le code source peuvent parfois varier légèrement.

Malheureusement, ce n’est pas ça :–(

J’ai aussi essayé ces modèles :

J’ai créé un composant de thème et j’ai ajouté ce qui suit :

<script type="text/x-handlebars" data-template-name="components/categories-boxes">
 test
</script>

Mais modifier le data-template-name avec tous ces noms n’a aucun effet. (Lorsque je le modifie pour components/topic-list, cela fonctionne.)

Avez-vous des idées sur l’emplacement de ce modèle ?

Voici ce que je souhaite modifier (lorsque le format box est affiché, depuis AdminCP > paramètres > style de catégorie) :

Toute aide serait grandement appréciée.

Il semble donc que cela ne soit pas possible avec les composants de thème, car il n’existe apparemment aucun modèle ou composant pour cela :sob:

Il semble que ce module Ruby injecte des styles en ligne : discourse/lib/category_badge.rb at 888e68a1637ca784a7bf51a6bbb524dcf7413b13 · discourse/discourse · GitHub

Cela était-il destiné à être une mesure temporaire ? Si non, pensez-vous qu’il serait possible de nous permettre de spécifier des styles personnalisés, s’il vous plaît @sam ?

Cela pourrait être lié à l’option none existante, où nous pourrions avoir deux champs dans le panneau des paramètres d’administration où nous pourrions coller nos styles pour chacun (si aucun style n’est collé, cela agit simplement comme l’option none agit actuellement) :

<span class="badge-category-bg" style="background-color: #25AAE2;"></span>

et

<span style="color: #FFFFFF;" data-drop-close="true" class="badge-category clear-badge restricted" title="Une catégorie exclusive aux membres avec un niveau de confiance de 3 et plus."><svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#lock"></use></svg><span class="category-name">Salon</span></span>

À partir de cet extrait :

Nous aurions simplement besoin d’accéder aux variables de couleur d’arrière-plan et de couleur de texte depuis la page habituelle de modification de catégorie.

Ou y a-t-il une autre façon de modifier cela, Sam ? Je veux simplement supprimer la couleur d’arrière-plan et lui donner une bordure de la même couleur que le texte (comme spécifié dans la page habituelle de modification de catégorie).

Toute aide serait grandement appréciée.

Édition : il semble que ce ne soit pas ce fichier Ruby après tout (je l’ai modifié sur mon installation de développement mais rien n’a changé) … une recherche plus approfondie montre qu’il s’agit de celui-ci : discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub Existe-t-il un moyen de créer un plugin pour le modifier ?

Il existe probablement plusieurs façons de le faire.

Essayez ceci :

  • remplacez le modèle qui appelle cet helper
  • substituez-le par un helper de votre propre création

Modèle concerné : discourse/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs at c6e255f4e00400b8a6f82a799b7fa082b17adb1c · discourse/discourse · GitHub

Remplacer un modèle aussi bas dans la hiérarchie présente un risque relativement faible.

Une autre méthode consisterait à utiliser jQuery dans une surcharge du composant topic-list-item pour effectuer les modifications dont vous avez besoin.