Dans une instance Discourse que j’administre, j’ai un composant (hérité de l’ancien mainteneur de l’instance) pour afficher les logos des sponsors de cette instance dans le pied de page. Le composant fonctionnait bien jusqu’à récemment, mais il est maintenant rendu de manière incorrecte, affichant littéralement les directives de contrôle du modèle (et insérant littéralement les espaces réservés aux valeurs du modèle dans le HTML, de sorte que les chemins vers les images ne sont pas résolus) :
Le composant n’est pas maintenu dans un dépôt git, il est configuré directement sous « Admin » → « Appearance » → « Themes & components » → onglet « Components » :
Custom Code
Custom sections:
- Common: CSS, Footer, JS
Uploads
- $geoaargau: geoaargau.jpg
- $asseco_berit: asseco_berit.jpg
Extra files
Export theme to view these files.
- javascripts/discourse/api-initializers/theme-initializer.gjs
contenu de ces « sections »
tel que vu en cliquant sur « Edit Code » ; chemin vers les fichiers correspondants dans l’exportation indiqué entre parenthèses
CSS (common/common.scss)
.sponsors {
.inner {
display: flex;
align-items: center;
justify-content: space-around;
margin-bottom: 10px;
}
.heading {
font-size: 1.75em;
}
.sponsor-image {
max-height: 55px;
}
.geoaargau {
max-height: 45px;
}
}
Footer (common/footer.html)
{{#if displaySponsors}}
<div class="sponsors-wrapper wrap">
<div class="inner">
<h3 class="heading">Sponsoren</h3>
<a href="http://www.asseco-berit.ch/"><img src="{{theme-setting "theme_uploads.asseco_berit"}}" alt="Asseco Berit" class="sponsor-image asseco-berit"></a>
<a href="http://www.geoaargau.ch/"><img src="{{theme-setting "theme_uploads.geoaargau"}}" alt="GEOAargau" class="sponsor-image geoaargau"></a>
</div>
</div>
{{/if}}
JS (javascripts/discourse/api-initializers/theme-initializer.gjs)
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
// This is the plugin outlet, followed by a custom name for the component
api.registerConnectorClass("above-footer", "sponsors", {
setupComponent(args, component) {
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
var homeRoute = topMenuRoutes[0];
api.onPageChange((url) => {
if (url === "/" || url === homeRoute ){
document.querySelector("html").classList.add("sponsors");
component.set("displaySponsors", true);
} else {
document.querySelector("html").classList.remove("sponsors");
component.set("displaySponsors", false);
}
});
}
});
});
L’exportation contient en plus :
about.json (466 Bytes)
ce que je suppose être généré à la volée lors de l’exportation, donc je ne pense pas que ce soit pertinent.
La partie pertinente du DOM effectif avec cette rupture est :
<div class="custom-footer-content">
{{#if displaySponsors}}
<div class="sponsors-wrapper wrap">
<div class="inner">
<h3 class="heading">Sponsoren</h3>
<a href="http://www.asseco-berit.ch/"><img src="{{theme-setting " theme_uploads.asseco_berit"}}" alt="Asseco Berit" class="sponsor-image asseco-berit"></a>
<a href="http://www.geoaargau.ch/"><img src="{{theme-setting " theme_uploads.geoaargau"}}" alt="GEOAargau" class="sponsor-image geoaargau"></a>
</div>
</div>
{{/if}}
</div>
nous pouvons donc voir que la directive de contrôle {{#if ...}}...{{/if}} et les espaces réservés {{theme-setting "..."}} ont été utilisés comme HTML littéral plutôt que d’être exécutés / évalués / interpolés.
Comment et pourquoi cela a-t-il changé et comment dois-je le corriger ?
Est-ce peut-être lié à Upcoming Header Changes - Preparing Themes and Plugins? (Bien que je ne voie pas de changements dans la syntaxe de templating mentionnés là-dedans.)
Souvent, si quelque chose est obsolète, la console affiche des informations utiles.
