Discourse est une application monopage. Le problème que vous rencontrez survient parce que le script que vous utilisez n’en est pas conscient. Lorsque vous visitez la page d’accueil ou n’importe quelle autre page dans Discourse, vous obtenez quelque chose comme ceci.
<html>
<head>
contenu de l'en-tête incluant votre script
</head>
<body>
<section id="main">
contenu de la page
</section>
</body>
</html>
Lorsque vous naviguez vers une autre page, la seule chose qui est rechargée est le contenu à l’intérieur
<section id="main">
Ainsi, le DOM a changé et votre script personnalisé ne se déclenche pas à nouveau. Si vous essayez de visiter directement la page du sujet, vous verrez qu’elle se charge correctement.
.
La question est donc maintenant de savoir comment le faire fonctionner avec Discourse.
Le plugin-api dispose d’une méthode que vous pouvez utiliser pour « décorer » les messages.
Vous pouvez l’utiliser pour déclencher des scripts tiers lorsqu’un message est rendu.
Voici le code dont vous auriez besoin. Ajoutez ceci à l’onglet common > header de votre thème.
<script type="text/discourse-plugin" version="0.8">
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";
const loadScript = require("discourse/lib/load-script").default;
const { iconHTML } = require("discourse-common/lib/icon-library");
const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
class: "woxo-preview-icon"
});
const previewMarkup = () => {
const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;
return markup;
};
// créer un décorateur de message
api.decorateCookedElement(
post => {
const woxoWidgets = post.querySelectorAll("div[data-mc-src]");
if (woxoWidgets.length) {
woxoWidgets.forEach(woxoWidget => {
if (post.classList.contains("d-editor-preview")) {
woxoWidget.innerHTML = previewMarkup();
return;
}
loadScript(WOXO_SCRIPT_SRC).then(() => {
const script = document.head.querySelector(
`script[src*="cdn2.woxo.tech"]`
);
script.dataset.usrc = "";
window.MC.Loader.init();
});
});
}
},
{ id: "render-woxo-widgets" }
);
</script>
Vous devrez ensuite ajouter quelques domaines pour CSP. Ajoutez ceci à votre
content_security_policy_script_src
paramètre du site
https://*.woxo.tech/
https://us-central1-core-period-259421.cloudfunctions.net/availableComponentTracks
enfin, vous devrez ajouter un peu de CSS pour l’aperçu statique du compositeur
Cela va dans l’onglet common > CSS de votre thème.
.woxo-preview {
height: 400px;
width: 100%;
background: var(--primary-low);
display: flex;
align-items: center;
justify-content: center;
.woxo-preview-icon {
font-size: var(--font-up-4);
color: var(--primary-high);
}
}
Ensuite, vous pouvez simplement ajouter
<div data-mc-src="f4b43a8f-c188-4f80-8206-36d9f7529f13#instagram"></div>
à n’importe quel message, et les widgets seront rendus et pleinement fonctionnels.
Si vous examinez le JavaScript, vous remarquerez qu’il possède deux options tout en haut.
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";
Modifiez WOXO_SCRIPT_SRC pour mettre la source que Woxo vous fournit. Elle devrait être la même pour tous les intégrations que vous créez.
Modifiez PREVIEW_ICON pour mettre le nom de l’icône que vous souhaitez utiliser dans l’aperçu du compositeur. L’exécution de ce code dans le compositeur est un peu coûteuse, c’est pourquoi le compositeur propose un aperçu statique qui ressemble à ceci.
L’icône que vous choisissez s’affichera au centre.
Voici une version commentée du code si vous souhaitez suivre ce qui se passe
code commenté
<script type="text/discourse-plugin" version="0.8">
// options
const WOXO_SCRIPT_SRC = "https://cdn2.woxo.tech/a.js#616348fb53c1e8001686c619";
const PREVIEW_ICON = "heart";
// nous utilisons la bibliothèque de chargement de scripts de Discourse pour garantir que les scripts sont chargés
// correctement. Ne vous inquiétez pas, elle est assez intelligente pour ne pas dupliquer le script
// s'il est déjà chargé
const loadScript = require("discourse/lib/load-script").default;
// nous chargeons la fonction HTML d'icône de Discourse pour obtenir le SVG de l'icône
// que nous voulons utiliser dans l'aperçu statique du compositeur
const { iconHTML } = require("discourse-common/lib/icon-library");
// configuration de l'icône d'aperçu du compositeur
const composerPreviewIcon = iconHTML(PREVIEW_ICON, {
class: "woxo-preview-icon"
});
// création d'une fonction utilitaire pour le markup de l'aperçu du compositeur
const previewMarkup = () => {
const markup = `<div class="woxo-preview">${composerPreviewIcon}</div>`;
return markup;
};
// création d'un décorateur de message
api.decorateCookedElement(
post => {
// ce message contient-il des widgets Woxo ?
const woxoWidgets = post.querySelectorAll("div[data-mc-src]");
// Oui, alors faisons quelques travaux.
if (woxoWidgets.length) {
// pour chaque widget Woxo
woxoWidgets.forEach(woxoWidget => {
// s'il s'agit d'un widget du compositeur, remplacez-le par un aperçu statique et
// quittez immédiatement
if (post.classList.contains("d-editor-preview")) {
woxoWidget.innerHTML = previewMarkup();
return;
}
// s'il n'est pas dans le compositeur, chargez le script Woxo.
loadScript(WOXO_SCRIPT_SRC).then(() => {
// Le script Woxo est très étrange. Il ne fonctionnera pas à moins que la balise
// script ait un attribut data-usrc vide. Ajoutons-le donc
const script = document.head.querySelector(
`script[src*="cdn2.woxo.tech"]`
);
script.dataset.usrc = "";
// tout est prêt, appelons la méthode init dans le script Woxo
window.MC.Loader.init();
});
});
}
},
// ajoutez un ID au décorateur pour éviter les fuites de mémoire
{ id: "render-woxo-widgets" }
);
</script>