Tutoriel précédent : Developing Discourse Plugins - Part 1 - Create a basic plugin
Démarrage : Modèles Handlebars
L’application cliente de Discourse est écrite en utilisant le framework Javascript Ember.js. Ember utilise Handlebars pour tous les modèles HTML. Il y a une excellente introduction au langage de modélisation à ce lien, alors lisez-le 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 ce faire appelé plugin outlets (points de sortie de plugin) dans les modèles Handlebars.
Si vous parcourez les modèles Handlebars de Discourse, vous verrez souvent le balisage suivant :
<PluginOutlet @name="edit-topic" />
Ceci 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 balisage Handlebars.
Lors de la création de votre plugin, recherchez dans les modèles Handlebars de Discourse (dans les fichiers .hbs) que vous souhaitez modifier un <PluginOutlet />. S’il n’y en a pas, demandez-nous simplement de l’étendre ! Nous serons heureux d’en ajouter si vous avez un bon cas d’utilisation. Si vous souhaitez nous faciliter et accélérer cette tâche, veuillez soumettre une pull request sur github !
Si vous souhaitez voir certains des endroits où les plugin outlets existent, vous pouvez exécuter la commande suivante si vous êtes sur OSX ou Linux :
git grep "<PluginOutlet" -- "*.hbs"
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 n’est en réalité qu’un modèle Handlebars dont le nom de fichier inclut connectors/<nom de l'outlet> dedans.
Par exemple, si le modèle Handlebars de Discourse contient :
<PluginOutlet @name="evil-trout" />
Alors tous les fichiers Handlebars que vous créez dans le répertoire connectors/evil-trout seront automatiquement ajoutés. Donc, si vous avez créé le fichier :
plugins/hello/assets/javascripts/discourse/connectors/evil-trout/hello.hbs
Avec le contenu :
<b>Hello World</b>
Discourse insérerait <b>Hello World</b> à cet endroit dans le modèle.
Notez que nous avons nommé le fichier hello.hbs – La partie finale du nom de fichier n’a pas d’importance, mais elle 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 deux fois le nom du connector et assurez-vous qu’il correspond parfaitement au nom du plugin.
Plus d’informations
Plus dans 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 contrôlé par version - suggérez des modifications sur github.



