In a Discourse instance che gestisco, ho un componente (ereditato dal precedente manutentore dell’istanza) per visualizzare i loghi degli sponsor di quell’istanza nel piè di pagina. Il componente funzionava bene fino a poco tempo fa, ma ora viene renderizzato in modo errato, visualizzando letteralmente le direttive di controllo del template (e inserendo letteralmente i segnaposto di valore del template nell’HTML, in modo che i percorsi delle immagini non vengano risolti):
Il componente non è mantenuto in un repository git, è configurato direttamente sotto “Admin” → “Appearance” → “Themes & components” → scheda “Components”:
Codice personalizzato
Sezioni personalizzate:
- Comune: CSS, Footer, JS
Upload
- $geoaargau: geoaargau.jpg
- $asseco_berit: asseco_berit.jpg
File extra
Esporta tema per visualizzare questi file.
- javascripts/discourse/api-initializers/theme-initializer.gjs
contenuto di queste “sezioni”
come si vede cliccando su “Edit Code”; percorso dei file corrispondenti nell’esportazione tra parentesi
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) => {
// Questo è l'outlet del plugin, seguito da un nome personalizzato per il componente
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’esportazione contiene inoltre:
about.json (466 Bytes)
che presumo venga generato al volo durante l’esportazione, quindi non ritengo sia rilevante.
La parte rilevante del DOM effettivo con questo errore è:
<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>
quindi possiamo vedere che la direttiva di controllo {{#if ...}}...{{/if}} e i segnaposto {{theme-setting "..."}} sono stati usati come HTML letterale anziché eseguiti / valutati / interpolati.
Come e perché è cambiato e come dovrei correggerlo?
Forse è correlato a Upcoming Header Changes - Preparing Themes and Plugins? (Anche se non vedo menzionate modifiche alla sintassi dei template lì.)
Spesso, se qualcosa è deprecato, la console restituirà informazioni utili.
