Meilleure stratégie pour trouver le bon modèle à éditer ?

Je débute encore sur Discourse, mais j’apprends de plus en plus comment coder par-dessus pour personnaliser des éléments. J’essaie de comprendre la meilleure façon d’insérer du code à des endroits précis sur une page (plus ciblé qu’une zone générale de sortie). Il semble que je doive remplacer le modèle qui contrôle cet endroit.

Je comprends cela comme signifiant que, que je le fasse dans la section de mon tableau de bord de personnalisation ou dans un dépôt GitHub séparé que j’utiliserai comme thème, je devrai :

  1. Trouver le bon modèle à modifier
  2. Réimprimer l’intégralité du modèle là où je code (tableau de bord, dépôt, etc.), et
  3. Apporter les modifications souhaitées au modèle

L’étape 1 s’avère être un obstacle. Comment trouver le bon modèle à modifier ?

Voici ce que j’ai compris : les modèles de Discourse sont ici, et il semble que les « vrais » modèles que je souhaite modifier se trouvent généralement dans le fichier des composants ici.

Par exemple, si je veux ajouter une ligne à chaque liste de groupes sur la page d’index des groupes (l’équivalent de cette page). Où se trouve le modèle correspondant ? Ma meilleure hypothèse est qu’il s’agit du modèle group card, mais je ne suis pas sûr, surtout parce que je suis tout nouveau sur Ember.

Existe-t-il une méthode plus sûre pour moi d’identifier le bon modèle ?

Avez-vous essayé l’extension de navigateur Ember ?

Elle affiche les modèles et les composants :

Cela semble super. Parlez-vous de l’inspecteur Ember ?

C’est noté. En l’utilisant, il y a une chose que je ne comprends pas (cela est probablement dû au fait que je débute avec Ember) :

Si vous consultez la page des groupes de Discourse, chaque entrée de groupe affiche un nom et un nombre d’utilisateurs.

En utilisant l’inspecteur Ember, je vois que le nom provient du modèle groups-info, mais d’où vient le group-user-count ? (il ne semble pas avoir d’entrée dans l’inspecteur Ember)

Merci. Je vois que group-user-count apparaît à la ligne 55.

Cela signifie-t-il que si je voulais, par exemple, ajouter une ligne juste avant la ligne group-user-count, je devrais copier l’intégralité des 100 lignes de ce fichier index.hbs dans mon code et l’insérer comme ceci :
<script type="text/x-handlebars" data-template-name="groups/index">
[100 lignes ici]
</script>

  • Normalement, vous vérifiez s’il existe un emplacement de plugin adapté et vous l’utilisez.
  • Vous pouvez essayer de cibler des éléments avec jQuery, mais cela ne fonctionnera pas si vous essayez de modifier un élément itératif.

Si vous ne pouvez pas faire l’une ou l’autre de ces choses :

  • demandez à l’équipe Discourse d’ajouter un emplacement de plugin en justifiant votre demande
  • remplacez l’intégralité du modèle par le vôtre, comme vous le suggérez.

Voulez-vous dire modifier le code dans les prises qui l’entourent ? (comme les composants/group-info)

EDIT : Désolé, j’ai confondu les modèles et les prises de plugin. Je comprends que les prises de plugin sont des lignes dans le code de Discourse (comme {{plugin-outlet name="topic-above-post-stream" args=(hash model=model)}) que l’équipe de Discourse a placées là comme un ancre que vous pouvez utiliser pour modifier le code.

EDIT : J’ai déplacé ce suivi ici car il concerne un problème légèrement différent.