في مثيل Discourse الذي أديره، لدي مكوّن (موروث من القائم السابق على صيانة المثيل) لعرض شعارات الجهات الراعية لهذا المثيل في التذييل. كان المكوّن يعمل بشكل جيد حتى وقت قريب، ولكنه الآن يُعرض بشكل خاطئ، حيث يعرض توجيهات قالب التحكم حرفيًا (ويضع عناصر نائبة لقيم القالب حرفيًا في HTML، بحيث لا يتم حل المسارات المؤدية إلى الصور):
لا تتم صيانة المكوّن في مستودع git، بل يتم تكوينه مباشرةً ضمن “Admin” → “Appearance” → “Themes & components” → علامة التبويب “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
محتوى تلك “الأقسام”
كما يظهر عند النقر على “Edit Code”؛ المسار إلى الملفات المقابلة في التصدير معطى بين قوسين
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);
}
});
}
});
});
يحتوي التصدير بالإضافة إلى ذلك على:
about.json (466 Bytes)
والذي أفترض أنه يتم إنشاؤه عند التصدير، لذا لا أعتقد أنه ذو صلة.
الجزء ذو الصلة من شجرة DOM الفعالة مع هذا الخلل هو:
<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>
لذا يمكننا أن نرى أن توجيه التحكم {{#if ...}}...{{/if}} والعناصر النائبة {{theme-setting "..."}} قد تم استخدامها كـ HTML حرفي بدلاً من تنفيذها / تقييمها / استيفائها.
كيف ولماذا تغير ذلك وكيف يجب أن أصلحه؟
هل قد يكون مرتبطًا بـ Upcoming Header Changes - Preparing Themes and Plugins (على الرغم من أنني لا أرى تغييرات في بناء جملة القالب مذكورة هناك.)
غالبًا، إذا تم إهمال شيء ما، فستعرض وحدة التحكم بعض المعلومات المفيدة
