In einer Discourse-Instanz, die ich betreue, habe ich eine Komponente (von meinem Vorgänger übernommen), um die Logos der Sponsoren dieser Instanz in der Fußzeile anzuzeigen. Die Komponente funktionierte bis vor kurzem einwandfrei, wird aber jetzt falsch dargestellt, da sie die Template-Steuerungsdirektiven wörtlich anzeigt (und die Platzhalter für die Template-Werte wörtlich in den HTML-Code einfügt, sodass die Pfade zu den Bildern nicht aufgelöst werden):
Die Komponente wird nicht in einem Git-Repository gepflegt, sondern direkt unter „Admin“ → „Appearance“ → „Themes & components“ → Reiter „Components“ konfiguriert:
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
Inhalt dieser „Abschnitte“
wie beim Klicken auf „Code bearbeiten“ zu sehen; Pfad zu den entsprechenden Dateien im Export in Klammern angegeben
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);
}
});
}
});
});
Der Export enthält zusätzlich:
about.json (466 Bytes)
was ich vermute, bei jedem Export on-the-fly generiert wird, daher nehme ich an, dass es nicht relevant ist.
Der relevante Teil des effektiven DOMs mit dieser Beschädigung ist:
<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>
sodass man sehen kann, dass die Steuerungsdirektive {{#if ...}}...{{/if}} und die Platzhalter {{theme-setting "..."}} als literales HTML verwendet wurden, anstatt ausgeführt/ausgewertet/interpoliert zu werden.
Wie und warum hat sich das geändert und wie sollte ich das beheben?
Hängt das möglicherweise mit Upcoming Header Changes - Preparing Themes and Plugins zusammen? (Obwohl dort keine Änderungen an der Template-Syntax erwähnt werden.)
Oft gibt die Konsole nützliche Informationen aus, wenn etwas veraltet ist.
