「コンポーネント」のテンプレートが壊れました。どうすれば直せますか？

das-g · 2026 年 3 月 16 日午後 4:59

私が管理している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 と関係があるのでしょうか？（ただし、そこでテンプレート構文の変更については言及されていないように見えます。）

das-g · 2026 年 3 月 16 日午後 5:02

（「どのように、そしてなぜ」とは、根本的な変更は何で、それに関する通知を見逃したのかという意味です。この動作の変更を引き起こしたものは、有効になっている自動的なDiscourseアップデートでそのインスタンスに適用されたとほぼ確信していますが、根本原因を知りたいです。）

chapoi · 2026 年 3 月 16 日午後 5:02

コンソールにさらなる情報を提供するエラーや警告はありますか？

das-g · 2026 年 3 月 16 日午後 5:07

ブラウザのコンソールでですか？多分…そこに「普通」なのが何で、何が問題を示唆しているのか私にはよくわかりません。その内容をここに貼り付けても大丈夫ですか、それとも機密情報が漏洩する可能性がありますか？

chapoi · 2026 年 3 月 16 日午後 5:07

はい、ブラウザのコンソールで大丈夫です。貼り付けてください多くの場合、非推奨になっている場合は、コンソールに役立つ情報が表示されます。

das-g · 2026 年 3 月 16 日午後 5:09

https://www.geowebforum.ch/c/feedback/2 の読み込みから得られた完全なブラウザコンソールコンテンツ

ℹ️ 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] テストでのエラーを防ぐため、`modifyClass` 呼び出しに `pluginId` キーを追加してください。これにより、変更が一度だけ適用されることが保証されます。 chunk.f47b6dc1cc59c827db42.d41d8cd9.js:209:136918
DEPRECATION NOTICE: connector クラスを registerConnectorClass 経由で定義することは非推奨です。よりモダンなパターンについては https://meta.discourse.org/t/32727 を参照してください。 [deprecation id: discourse.register-connector-class-legacy] chunk.f47b6dc1cc59c827db42.d41d8cd9.js:134:74065
‘-webkit-text-size-adjust’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:800
‘-moz-text-size-adjust’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:827
プロパティ ‘text-size-adjust’ が不明です。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:849
不適切な疑似クラスまたは疑似要素 ‘-moz-focus-inner’ です。不正なセレクタのためルールセットは無視されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:1615
‘none’、URL、またはフィルタ関数が期待されていましたが、’alpha(’ が見つかりました。‘filter’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:622
不正なセレクタのためルールセットは無視されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:36117
‘justify-content’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:181379
‘text-wrap’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:205516
‘image-rendering’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:264428
‘-webkit-text-size-adjust’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268491
‘-moz-text-size-adjust’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268518
プロパティ ‘text-size-adjust’ が不明です。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268540
‘font-size’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:298136
‘none’、URL、またはフィルタ関数が期待されていましたが、’alpha(’ が見つかりました。‘filter’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447258
‘none’、URL、またはフィルタ関数が期待されていましたが、’alpha(’ が見つかりました。‘filter’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447681
‘none’、URL、またはフィルタ関数が期待されていましたが、’alpha(’ が見つかりました。‘filter’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:33799
‘text-wrap’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105390
‘text-wrap’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105471
‘padding’ の値の解析中にエラーが発生しました。宣言は破棄されました。 common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:257744

Using Plugin Outlet Connectors from a Theme or Plugin を確認する必要があると思います。

chapoi · 2026 年 3 月 16 日午後 5:11

さて、registerConnectorClass と setupComponent は非推奨になっていると思われます。エラーログをご覧ください。

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 がまだ許容されているかどうかもわかりません。

したがって、このコンポーネントは最新のパターンにリファクタリングする必要があり、現在管理画面の下にある場所ではなく、適切なコンポーネントに移動することをお勧めします。

他の質問にお答えするために

これは、Discourse の近代化と Glimmer コンポーネントへの新しい最新標準への移行に関する継続的な作業によるものです。

das-g · 2026 年 3 月 16 日午後 5:28

生のHTMLテンプレートでない場合、https://www.geowebforum.ch/admin/customize/themes/3/common/footer/edit の期待されるコンテンツは何ですか？ユーザー提供コンテンツのようなMarkdownですか？

これを実行するためのガイダンスを教えていただけますか？Discourseのドキュメントがメタフォーラム全体に散らばっているようで、少し途方に暮れています。

そのためには、「エクスポート」を展開してGitリポジトリにチェックインするだけでよいですか？

エクスポートに*.gjsファイルがあれば、私のコンポーネントはすでにGlimmerコンポーネントなのではありませんか？それとも、それが実際の問題の一部で、現在のDiscourseが私のコンポーネントをGlimmerコンポーネントと誤認し（したがってそのファイル名でエクスポートし）、コード的にはまだそうではないということでしょうか？

（無知をお許しください。私はWeb開発者ではなく、EmberやGlimmerについてはほとんど何も知りません。）

chapoi · 2026 年 3 月 16 日午後 5:45

私が言いたかったのは、最新バージョンでは生のHTMLが正しく解析されなくなったため、レンダリングされずにHTMLがそのまま表示されているということです。

はい、.gjsファイルは確かにglimmerコンポーネントを示していましたが、その中で使用されているregisterConnectorClassというメソッドは（もはや）機能しません。

これは非常によく理解できます。Using Plugin Outlet Connectors from a Theme or Plugin が言っているのは、registerConnectorClassメソッドを使ってページ上のどこかに情報をレンダリングするには、footer.htmlファイルが行っていた方法ではなく、プラグインアウトレットと呼ばれる特定の要素を使用するようになったということです。フッターの場合、above-footerアウトレットがうまく機能します。

Beginner's guide to using Discourse Themes と Developing Discourse Themes & Theme Components を読んでおくことをお勧めします。

構造を理解するために、シンプルなテーマコンポーネントを見てみるのも役立ちます。例：GitHub - discourse/discourse-minimal-footer · GitHub

そして最後に、Discourseボットがかなりの部分で役立つかもしれません。Discourseのパターンをよく知っているので、現在のコードを渡し、問題点を説明して、リファクタリングを手伝ってもらうように依頼できます。

トピック		返信	表示
(not recommended) Overriding Discourse templates from a Theme or Plugin Developer Guides how-to	11	2549	2024 年 7 月 26 日
Cannot put the template in the desired outlet Dev	13	249	2024 年 11 月 13 日
How to override a template.hbs from a plugin Dev	5	1734	2024 年 7 月 23 日
Theme component update issue Dev	7	245	2024 年 6 月 7 日
Component template resolving pink banner Support	13	249	2025 年 7 月 16 日

「コンポーネント」のテンプレートが壊れました。どうすれば直せますか？

カスタムコード

アップロード

追加ファイル

これらの「セクション」の内容

関連トピック