Il existe probablement plusieurs façons de résoudre ce problème, mais essayons la méthode « appropriée » en utilisant les bons hooks de personnalisation.
Lorsque vous ajoutez du HTML dans la section pied de page d’un thème, Discourse effectue un traitement spécifique pour éviter que le contenu ne bouge lors des transitions entre les pages ou lorsque de nouveaux éléments sont ajoutés via le défilement infini.
Ce contenu est ajouté sous forme de composant custom-html ici.
Si vous examinez le code du composant, vous verrez qu’il déclenche un événement d’application une fois rendu.
C’est le hook que vous devez utiliser.
Comment l’utiliser ?
Il existe une méthode dans l’API des plugins qui vous permet d’exécuter du code lorsqu’un événement d’application spécifique est déclenché.
Puisque nous connaissons déjà le nom de l’événement, nous pouvons l’utiliser comme suit :
api.onAppEvent("inserted-custom-html:footer", () => {
// effectuez vos actions ici
});
Comme il s’agit d’une méthode de l’API des plugins, vous devez modifier le type de votre balise script en text/discourse-plugin comme ceci :
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
// effectuez vos actions ici
});
</script>
Le fragment ci-dessus sera exécuté à chaque fois que le pied de page est rendu. Vous pouvez donc maintenant faire quelque chose comme ceci :
<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
$(".footer-div #footerNavDiv").click(function () {
console.log("événement de clic capturé");
// effectuez vos actions ici pour l'événement de clic
});
});
</script>
Vous pouvez en savoir plus sur l’API des plugins ici.