# 我的“组件”模板坏了。我该如何修复？

**URL:** <https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553>\
**Category:** Development\
**Created:** [2026年三月16日 16:59 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553 "2026-03-16T16:59:41Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![das-g](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/das-g/32/441608_2.png) [@das-g](https://meta.discourse.org/u/das-g)\
**Post date:** [2026年三月16日 16:59 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/1 "2026-03-16T16:59:41Z")

</div>

在我维护的一个 Discourse 实例中，我有一个组件（继承自该实例的前维护者）用于在页脚中显示该实例赞助商的标志。该组件以前运行良好，但最近却被错误地渲染，以字面形式显示模板控制指令（并将模板值占位符以字面形式放入 HTML 中，因此图像路径没有被解析）：

 ![损坏的页脚的屏幕截图](https://global.discourse-cdn.com/meta/original/4X/e/a/c/eac6c5351aabd426e3764d205ffe7c8b1c8949da.png)

该组件未在 git 仓库中维护，而是直接在“管理”→“外观”→“主题和组件”→“组件”选项卡下配置：

> ### 自定义代码
> 
> 自定义部分：
> 
> - 通用：CSS、页脚、JS
> 
> ### 上传
> 
> - $geoaargau: [geoaargau.jpg](https://www.geowebforum.ch/uploads/default/original/1X/1019f404d9e80661ad586580101c96a6c78420b6.jpg)
> - $asseco\_berit: [asseco\_berit.jpg](https://www.geowebforum.ch/uploads/default/original/1X/501829cf10ddf512ad413b6afa3b0a65de1773e6.jpg)
> 
> ### 额外文件
> 
> > **导出主题以查看这些文件。**
> >
> > - javascripts/discourse/api-initializers/theme-initializer.gjs

#### 这些“部分”的内容

点击“编辑代码”时看到的内容；括号中是导出文件中相应文件的路径

> **CSS (common/common.scss)**
>
> ```css
> .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)**
>
> ```hbs
> {{#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)**
>
> ```js
> import { apiInitializer } from "discourse/lib/api";
> 
> export default apiInitializer((api) => {
> // 这是插件插口，后面跟着组件的自定义名称
> 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](https://meta.discourse.org/uploads/short-url/rVnetyanEvOSJZhgmcgXjsZKG5s.json) (466 Bytes)  
我猜它是在导出时动态生成的，所以我不认为它相关。

出现此故障时，有效 DOM 的相关部分是：

```html
<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](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544?u=das-g) 有关？（尽管我没有看到其中提到模板语法的更改。）

---

_[View the full topic](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553)._