Tutoriel précédent : Developing Discourse Plugins - Part 1 - Create a basic plugin
Prise en main : les modèles (Templates)
L’application cliente de Discourse est écrite avec le framework JavaScript Ember.js. Ember utilise des modèles (Templates) pour générer du HTML. Vous trouverez une excellente introduction au langage de modélisation à l’adresse indiquée, alors lisez-la attentivement.
Le problème : ajouter des éléments à l’interface utilisateur de Discourse
De nombreux plugins doivent ajouter et étendre l’interface web de Discourse. Nous fournissons un mécanisme pour cela appelé « plugin outlets » dans les modèles Handlebars.
Si vous parcourez les modèles de Discourse, vous verrez souvent le code suivant :
<PluginOutlet @name="edit-topic" />
Cela déclare un plugin outlet nommé « edit-topic ». C’est un point d’extension dans le modèle que les auteurs de plugins peuvent exploiter pour ajouter leur propre code.
Lorsque vous créez votre plugin, recherchez dans les modèles de Discourse (dans les fichiers .gjs) que vous souhaitez modifier la présence d’un <PluginOutlet />. S’il n’y en a pas, n’hésitez pas à nous demander de l’étendre ! Nous serons ravis de les ajouter si vous avez un bon cas d’utilisation. Si vous voulez nous faciliter et accélérer la tâche, veuillez soumettre une pull request sur GitHub !
Si vous souhaitez voir certains des emplacements où existent les plugin outlets, vous pouvez exécuter la commande suivante dans un shell compatible POSIX :
git grep -A 1 "<PluginOutlet" -- "*.gjs"
Vous pouvez également afficher les plugin outlets sur un site Discourse en activant la Discourse Developer Toolbar. Tapez simplement enableDevTools() dans la console du navigateur sur un forum Discourse et cliquez sur l’icône de prise qui apparaît sur le côté gauche de la page.
Connexion à un plugin outlet
Une fois que vous avez trouvé le plugin outlet auquel vous souhaitez ajouter du contenu, vous devez écrire un connector pour celui-ci. Un connector est un composant .gjs dont le nom de fichier inclut connectors/<nom de l'outlet> dans son chemin.
Par exemple, si le modèle de Discourse contient :
<PluginOutlet @name="evil-trout" />
Alors tous les fichiers .gjs que vous créez dans le répertoire connectors/evil-trout seront automatiquement ajoutés. Ainsi, si vous créez le fichier :
plugins/hello/assets/javascripts/discourse/connectors/evil-trout/hello.gjs
Avec le contenu suivant :
<template>
<b>Bonjour le monde</b>
</template>
Discourse insérera <b>Bonjour le monde</b> à cet endroit du modèle.
Notez que nous avons nommé le fichier hello.gjs — le nom de fichier (par opposition au nom du répertoire) n’a pas d’importance, mais il doit être unique pour chaque plugin. Il est utile de lui donner un nom descriptif de ce que vous étendez. Cela facilitera le débogage à l’avenir.
Dépannage
- Vérifiez à nouveau le nom du connector et assurez-vous qu’il correspond parfaitement au nom du plugin.
Plus d’informations
Suite de la série
Partie 1 : Bases des plugins
Partie 2 : Ce sujet
Partie 3 : Paramètres du site
Partie 4 : Configuration git
Partie 5 : Interfaces d’administration
Partie 6 : Tests d’acceptation
Partie 7 : Publiez votre plugin
Ce document est sous contrôle de version — proposez des modifications sur GitHub.
