En una instancia de Discourse que mantengo, tengo un componente (heredado del mantenedor anterior de la instancia) para mostrar los logotipos de los patrocinadores de esa instancia en el pie de página. El componente solía funcionar bien hasta hace poco, pero ahora se renderiza incorrectamente, mostrando las directivas de control de la plantilla literalmente (y poniendo los marcadores de posición de los valores de la plantilla literalmente en el HTML, por lo que las rutas a las imágenes no se resuelven):
El componente no se mantiene en un repositorio git, sino que se configura directamente en “Administrador” → “Apariencia” → “Temas y componentes” → pestaña “Componentes”:
Código personalizado
Secciones personalizadas:
- Común: CSS, Pie de página, JS
Cargas
- $geoaargau: geoaargau.jpg
- $asseco_berit: asseco_berit.jpg
Archivos adicionales
Exportar tema para ver estos archivos.
- javascripts/discourse/api-initializers/theme-initializer.gjs
contenido de esas “secciones”
Tal como se ve al hacer clic en “Editar código”; ruta a los archivos correspondientes en la exportación indicada entre paréntesis
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;
}
}
Pie de página (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);
}
});
}
});
});
La exportación además contiene:
about.json (466 Bytes)
que supongo que se genera sobre la marcha al exportar, por lo que no creo que sea relevante.
La parte relevante del DOM efectivo con este fallo es:
<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>
así que podemos ver que la directiva de control {{#if ...}}...{{/if}} y los marcadores de posición {{theme-setting "..."}} se usaron como HTML literal en lugar de ejecutarse / evaluarse / interpolarse.
¿Cómo y por qué cambió eso y cómo debería arreglarlo?
¿Quizás esté relacionado con Upcoming Header Changes - Preparing Themes and Plugins? (Aunque no veo cambios en la sintaxis de plantillas mencionados allí).