Em uma instância do Discourse que mantenho, tenho um componente (herdado do mantenedor anterior da instância) para exibir os logotipos dos patrocinadores dessa instância no rodapé. O componente costumava funcionar bem até recentemente, mas agora está sendo renderizado incorretamente, exibindo as diretivas de controle do template literalmente (e colocando os placeholders de valor do template literalmente no HTML, de modo que os caminhos para as imagens não são resolvidos):
O componente não é mantido em um repositório git, ele é configurado diretamente em “Admin” → “Appearance” → “Themes & components” → aba “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
conteúdo dessas “seções”
conforme visto ao clicar em “Edit Code”; caminho para os arquivos correspondentes na exportação fornecido entre parênteses
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);
}
});
}
});
});
A exportação contém adicionalmente:
about.json (466 Bytes)
que eu suponho ser gerado dinamicamente quando se exporta, então não acho que seja relevante.
A parte relevante do DOM efetivo com essa quebra é:
<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>
para que possamos ver que a diretiva de controle {{#if ...}}...{{/if}} e os placeholders {{theme-setting "..."}} foram usados como HTML literal em vez de executados/avaliados/interpolados.
Como e por que isso mudou e como devo consertar?
Pode estar relacionado com Upcoming Header Changes - Preparing Themes and Plugins? (Embora eu não veja alterações na sintaxe de template mencionadas lá.)
Muitas vezes, se algo estiver obsoleto, o console emitirá algumas informações úteis.
