# 我的“组件”模板坏了。我该如何修复？
**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:** 16
**Page:** 1
### Author:  [@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")
在我维护的一个 Discourse 实例中，我有一个组件（继承自该实例的前维护者）用于在页脚中显示该实例赞助商的标志。该组件以前运行良好，但最近却被错误地渲染，以字面形式显示模板控制指令（并将模板值占位符以字面形式放入 HTML 中，因此图像路径没有被解析）：
该组件未在 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}}
>
> {{/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
```
因此，我们可以看到控制指令 `{{#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) 有关？（尽管我没有看到其中提到模板语法的更改。）
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月16日 17:02 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/2 "2026-03-16T17:02:05Z")
> [@das-g](#):
>
> 这个变化是如何发生的，原因是什么，我该如何修复它？
（我所说的“如何和为什么”是指：根本性的变化是什么，以及我是否错过了任何关于它的通知？我相当确定导致这种行为变化的原因是通过激活的自动 Discourse 更新降临到该实例上的，但我希望知道根本原因是什么。）
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月16日 17:02 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/3 "2026-03-16T17:02:36Z")
控制台中有任何错误或警告可以提供进一步的信息吗？
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月16日 17:07 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/4 "2026-03-16T17:07:04Z")
在浏览器控制台中？也许——我不确定那里的“正常”是什么，以及什么可能暗示着问题。我可以直接把内容粘贴在这里，还是可能会泄露敏感信息？
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月16日 17:07 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/5 "2026-03-16T17:07:47Z")
是的，浏览器控制台——粘贴进去没关系:) 通常，如果某些东西被弃用，控制台会抛出一些有用的信息。
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月16日 17:09 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/6 "2026-03-16T17:09:13Z")
> **https://www.geowebforum.ch/c/feedback/2 加载时的完整浏览器控制台内容**
>
> ```plaintext
> ℹ️ Discourse v2026.3.0-latest — https://github.com/discourse/discourse/commits/38ad2acd2c — Ember v6.6.0 chunk.f47b6dc1cc59c827db42.d41d8cd9.js:275:35231
> [PLUGIN discourse-weekly-newsletter] To prevent errors in tests, add a `pluginId` key to your `modifyClass` call. This will ensure the modification is only applied once. chunk.f47b6dc1cc59c827db42.d41d8cd9.js:209:136918
> DEPRECATION NOTICE: Defining connector classes via registerConnectorClass is deprecated. See https://meta.discourse.org/t/32727 for more modern patterns. [deprecation id: discourse.register-connector-class-legacy] chunk.f47b6dc1cc59c827db42.d41d8cd9.js:134:74065
> Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:800
> Error in parsing value for ‘-moz-text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:827
> Unknown property ‘text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:849
> Unknown pseudo-class or pseudo-element ‘-moz-focus-inner’. Ruleset ignored due to bad selector. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:1615
> Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:622
> Ruleset ignored due to bad selector. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:36117
> Error in parsing value for ‘justify-content’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:181379
> Error in parsing value for ‘text-wrap’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:205516
> Error in parsing value for ‘image-rendering’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:264428
> Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268491
> Error in parsing value for ‘-moz-text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268518
> Unknown property ‘text-size-adjust’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268540
> Error in parsing value for ‘font-size’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:298136
> Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447258
> Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447681
> Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:33799
> Error in parsing value for ‘text-wrap’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105390
> Error in parsing value for ‘text-wrap’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105471
> Error in parsing value for ‘padding’. Declaration dropped. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:257744
>
> ```
我猜我需要查看 [Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/32727)
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月16日 17:11 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/7 "2026-03-16T17:11:59Z")
所以，我认为带有 `setupComponent` 的 `registerConnectorClass` 已被弃用，请看您的错误日志：
`DEPRECATION NOTICE: Defining connector classes via registerConnectorClass is deprecated. See https://meta.discourse.org/t/32727 for more modern patterns. [deprecation id: discourse.register-connector-class-legacy] chunk.f47b6dc1cc59c827db42.d41d8cd9.js:134:74065`
而且我也不确定我们是否仍然允许使用原始 HTML，就像在您的页脚组件中那样。
因此，这个组件将不得不重构以适应现代模式，我建议将其移动到一个合适的组件中，而不是像现在这样放在“管理”（Admin）下面。
回答您的另一个问题
> [@das-g](#):
>
> 根本性的改变是什么，我是否错过了任何关于它的通知？
这是由于持续的使 Discourse 现代化并采用 Glimmer 组件的新现代标准的工作所致。
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月16日 17:28 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/8 "2026-03-16T17:28:35Z")
> [@chapoi](#):
>
> 而且我也不确定我们是否还允许使用原始 HTML，比如在你的页脚组件中。
如果不是原始 HTML（模板），`https://www.geowebforum.ch/admin/customize/themes/3/common/footer/edit` 处的内容期望是什么？是 Markdown 格式，就像用户提供的内容一样吗？
> [@chapoi](#):
>
> 所以这个组件将不得不重构为现代模式，
您能提供一些关于如何做到的指导吗？我感觉有点迷失，因为 Discourse 的文档似乎分散在整个元论坛中。
> [@chapoi](#):
>
> 而且我建议将其移到一个合适的组件中，而不是它目前在“管理”下存放的位置。
为此，我可以直接解压“导出”文件并将其检入 Git 仓库吗？
> [@chapoi](#):
>
> > [@das-g](#):
> >
> > 根本性的变化是什么，我是否错过了任何关于它的通知？
>
> 这是由于正在进行的使 Discourse 现代化并迁移到使用 Glimmer 组件的新现代标准的工作。
如果我的组件的导出中包含 `*.gjs` 文件，它难道已经是一个 Glimmer 组件了吗？或者说这实际上是问题的一部分——当前的 Discourse 错误地将我的组件识别为一个 Glimmer 组件（因此以该文件名导出它），尽管在代码层面上它还不是一个？
（请原谅我的无知。我不是 Web 开发人员，对 Ember 和 Glimmer 几乎一无所知。）
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月16日 17:45 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/9 "2026-03-16T17:45:13Z")
> [@das-g](#):
>
> 如果不是原始 HTML（模板），预期的内容是什么
我的意思是：最新版本的软件不再正确解析原始 HTML，因此您看到的只是转储的 HTML 而不是渲染后的效果。
是的，`.gjs` 文件确实表明它是一个 glimmer 组件，但其中使用的 `registerConnectorClass` 方法（已经）不再有效了。
> [@das-g](#):
>
> 我对似乎散布在整个元论坛（meta forum）上的 Discourse 文档感到有点迷失。
这完全可以理解。[Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/32727) 基本上说明的是，要通过 `registerConnectorClass` 方法在页面上的某个位置渲染信息，就像您的 `footer.html` 文件所做的那样，我们现在使用一个特定的元素，称为插件插口（plugin outlet）。对于页脚，`above-footer` 插口会很好地工作。
最好阅读一下 [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) 和 [https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648。](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648%E3%80%82)
查看一个简单的 **主题组件** （theme component）也有助于理解结构。例如：[GitHub - discourse/discourse-minimal-footer · GitHub](https://github.com/discourse/discourse-minimal-footer)
最后，Discourse 机器人可以为您提供极大的帮助：它非常了解 Discourse 的模式，所以您可以向它提供您当前的 代码，解释问题，并要求它帮助您重构它。
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月16日 21:06 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/10 "2026-03-16T21:06:01Z")
> [@chapoi](#):
>
> 最后，Discourse 机器人可以在很大程度上帮助你：它很了解 Discourse 的模式，所以你可以给它你目前的 [code] 代码，解释问题，并要求它帮助你重构代码。
您指的是 @discobot 吗？
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2026年三月17日 01:28 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/11 "2026-03-17T01:28:37Z")
不，它是 [ask.discourse.com](http://ask.discourse.com)。
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月17日 15:00 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/12 "2026-03-17T15:00:51Z")
借助这里的提示、对[后续问题的解答](https://meta.discourse.org/t/how-do-i-use-images-from-assets-in-html-of-a-glimmer-based-theme-component/398578?u=das-g)以及[ask.discourse.com 机器人提供的一些帮助](https://ask.discourse.com/discourse-ai/ai-bot/shared-ai-conversations/iRRje4DGSzerXYzMUoqxWQ)，我已成功使其正常工作：
- 这是基于 `discourse_theme` CLI 生成的内容之上的[相关提交](https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors/-/commit/75e73bdaf277389f51037245d1edc350404d3313)。
非常感谢大家，特别是 @chapoi！
（如果有人愿意，欢迎对 [GEOWebforum / Discourse theme component geowebforum-sponsors · GitLab](https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors) 进行审查。🙂）
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月17日 15:20 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/13 "2026-03-17T15:20:35Z")
不客气，很高兴问题解决了。
注意：如果某个回复帮到了你，最好将那个回复标记为解决方案，而不是你自己标记哦 😉
---
### Author:  [@das-g](https://meta.discourse.org/u/das-g)
#### Post date: [2026年三月17日 15:32 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/14 "2026-03-17T15:32:35Z")
> 提示：如果某个回复对您有帮助，最好将其标记为解决方案，而不是您自己的回复 😉
没有一个回复可以单独挑出来作为_那个_解决方案，所以我认为创建一个包含工作结果链接的新回复并将其标记为“那个”解决方案更有用（以供将来参考，以防其他人遇到类似问题并找到此主题）。🙂 我绝无意图因此而否认这里所有帮助我更接近解决方案或为理解问题提供相关背景的回复的功劳。😅
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2026年三月17日 15:35 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/15 "2026-03-17T15:35:44Z")
> [@das-g](#):
>
> 我完全无意于因此不承认这里所有回复的功劳，它们确实让我更接近了解决方案或为理解问题提供了相关的背景信息。😅
我一点也没这么想！我明白你的意思；我只是觉得总的来说那样做更有分寸，而且我努力在这个论坛上应用那种方式。
一切都好 🤗
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2026年四月16日 15:36 UTC](https://meta.discourse.org/t/templating-of-my-component-broke-how-do-i-fix-it/398553/16 "2026-04-16T15:36:22Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
>