私が管理しているDiscourseインスタンスには、そのインスタンスのスポンサーのロゴをフッターに表示するためのコンポーネントがあります（前任者から引き継いだものです）。このコンポーネントは最近まで正常に動作していましたが、現在、テンプレート制御ディレクティブが文字通りに表示され（テンプレート値のプレースホルダもHTMLに文字通り挿入され、画像のパスが解決されない）、誤ったレンダリングになっています。
このコンポーネントはgitリポジトリで管理されておらず、「管理者」→「外観」→「テーマとコンポーネント」→「コンポーネント」タブで直接設定されています。
カスタムコード
カスタムセクション:
- 共通: CSS、フッター、JS
アップロード
- $geoaargau: geoaargau.jpg
- $asseco_berit: asseco_berit.jpg
追加ファイル
テーマをエクスポートしてこれらのファイルを確認します。
- javascripts/discourse/api-initializers/theme-initializer.gjs
これらの「セクション」の内容
「コードの編集」をクリックしたときに表示される内容（エクスポートされたファイル内の対応するファイルのパスを括弧内に記載）
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;
}
}
フッター (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 と関係があるのでしょうか？（ただし、そこでテンプレート構文の変更については言及されていないように見えます。）
多くの場合、非推奨になっている場合は、コンソールに役立つ情報が表示されます。
