テンプレートとJS APIのためのインラインscriptタグの近代化

開発
1

テーマで \u003cscript type='text/discourse-plugin\u003e または \u003cscript type='text/x-handlebars'\u003e を使用することは非推奨になりました。テーマ内のこれらのタグの使用は、以下の指示に従って更新する必要があります。

通常の \u003cscript\u003e および \u003cscript type='text/javascript'\u003e はこの変更の影響を受けません。

タイムライン

これらは概算であり、変更される可能性があります

  • 2025年5月 - コンソールでの非推奨メッセージが有効化されます

  • 2025年7月 - 管理者警告バナーが有効化されます

  • 2025年9月下旬 2026年3月 - 機能の削除

\u003cscript type='text/x-handlebars'\u003e の変換

この方法で導入されたテンプレートは、専用の .hbs ファイルに移動するか、gjs ファイルにリファクタリングする必要があります。

HBS のままにするには、コネクタテンプレートを次の場所に配置できます。

{theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs

および、コンポーネントテンプレートは次の場所に配置できます。

{theme}/javascripts/discourse/components/{component-name}.hbs

:warning: 2026年3月以降、.hbs ファイルも非推奨になります。この変換を行った後、Deprecating .hbs file extension in themes and plugins にある指示に進んでください。

最新の .gjs 形式でコネクタとコンポーネントをビルドするには、テーマ開発者チュートリアルのこの章を参照してください。

\u003cscript type='text/discourse-plugin'\u003e の変換

これらのタグ内のコードは、専用の JavaScript ファイルに移行できます。

管理パネルインターフェース経由でテーマを開発している場合は、\u003cscript\u003e からコードをコピーし、JS タブ（// your code here と表示されている場所）に移動します。

ローカルでテーマを開発している場合は、次の場所に新しいファイルを作成します。

{theme}/javascripts/discourse/api-initializers/init-theme.js

次に、このラッパーを追加し、コードを指定された場所に配置します。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
});

スクリプトタグ内では、他の JS モジュールをインポートする唯一の方法は require() 構文を使用することでした。これは .js ファイルでも引き続き機能しますが、間もなく非推奨になるため、これを最新の ES6 インポートに変換する良い機会です。たとえば：

- const I18n = require("discourse-i18n").default;
+ import I18n from "discourse-i18n";

- const { h } = require("virtual-dom");
+ import { h } from "virtual-dom";

JS 初期化子に関する詳細情報：

「いいね！」 19
2

もしかしたら非常に愚かな質問かもしれませんが、管理コンソールに直接 \u003chead\u003e の下に配置した非常に非常にシンプルなテーマコンポーネントがあります。

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/whos-online-below-site-header">
{{whos-online}}
</script>

この投稿を正しく理解している場合、プラグインのアウトレットに追加するだけの簡単なことのために、別のテーマコンポーネントフォルダーを作成し、GitHubでホストし、コンポーネントを追加する必要があるということでしょうか？

そうではないことを願っています。そうすると、私のシンプルなテーマコンポーネントのほとんどが壊れてしまいます :grimacing:

3

JSタブができたので、おそらくapi.renderInOutletを使えると思います。

「いいね！」 1
4

コネクタ/コンポーネントでもこれが可能であることに気づきませんでした。リンクされた記事でこれを見つけました。

思ったより簡単かもしれません、ありがとうございます！

「いいね！」 2
5

この投稿ありがとうございます！
おそらく非常に基本的な質問だと思いますが：
サンドボックスがないため、進む前に確認する必要があります。
影響を受けたテーマを更新する必要があるのですが、以下に示すように、「head」タブの「Script」に関連するすべてのコードを JS タブに移動する必要があると言っても正しいでしょうか？

Screenshot 2025-07-14 at 1.15.15 pm
Screenshot 2025-07-14 at 1.15.15 pm1334×1077 121 KB

6

もう少しですが、まだ完全ではありません。スクリプトタグを削除し、インポートを次のように変更する必要があります。

import { ajax } from "discourse/lib/ajax";

次に、これらすべてをJSタブに、次の中に貼り付けます。

7

Discourse（Discourse社がホスト）のサイトで、現在以下のエラーバーが表示されています（これがこのスレッドにたどり着いた原因です）。

Screenshot 2025-07-14 at 10.40.31 AM
Screenshot 2025-07-14 at 10.40.31 AM2162×148 26.8 KB

当社の「Light」テーマは、当社自身でカスタマイズしたという認識はありません。管理ページを見ても、システム提供のデフォルト以外に何かを示唆するものは見当たりません（何か見落としている可能性は十分にありますが）。

当社のホストサイトの場合、これは時間とともに自己解決する可能性が高いでしょうか、それとも当社の側で何らかのアクションが必要でしょうか？

よろしくお願いします。
-Brad

8

これを解決するには、対応していただく必要があります。この問題は自然には解決しません。

Chrome DevTools でサイトを簡単に確認したところ、関連するコードは highlightjs に「chapel」言語を追加することに関連しているようです。

SCR-20250714-qmbq
SCR-20250714-qmbq1564×998 122 KB

「Light」テーマにアクセスして「コードの編集」をクリックすると、HTML タブのいずれかで見つけることができるはずです。その後、このトピックの OP の指示に従って、それを「JS」タブに移動できます。

「いいね！」 1
9

@davidさん、ありがとうございます！チャペル（Chapel）のハイライト表示のためにカスタマイズを行ったことを忘れていました。エラーバナーから自分でそこまでたどり着けたかどうかわかりません。協力とポインターに感謝します。

-ブラッド

「いいね！」 1
10

シンプルな.htmlファイルがあります。

<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/oprs-top-container'>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
</script>

この移行を行うためのさまざまな方法について少し混乱しています。何をすべきか説明していただけると幸いです。よろしくお願いします。

11

renderInOutlet をコネクタに追加

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.renderInOutlet("below-site-header", <template>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
  </template>);
});
「いいね！」 2
12

ありがとうございます。試しましたが、うまくいきませんでした :confused:

これが私の構造で、以下がその内容です。

below-site-header.js

export function test() {
    let test2 = document.querySelector('.test');
    console.log('test ', test2);
}

below-siteheader-connectors.hbs

<div class="test"></div>

私はこの分野は初心者なので、どんな助けでも感謝します。このリポジトリは以前の開発者から引き継ぎました。

image
image742×484 34.6 KB

13

こんにちは、GitHubリポジトリへのリンクを共有していただけますか？よろしくお願いします！

14

そのため、私の小さな「アバターを大きくする」スクリプトをJSタブ（Desktop - headより）に貼り付けたところ、簡単に機能しましたが、Desktopでのみ適用されるようにする簡単な方法はありませんか？私のモバイルアバターも大きくなり、すべてがかなりおかしく見えます。

コードは次のとおりです。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.changeWidgetSetting('post-avatar', 'size', '70');
});
15

うーん… CSSで調整しますか？

「いいね！」 3
16

それが完璧にうまくいきました、ありがとう！

「いいね！」 1
17

親愛なるリマインダーです。changeWidgetSetting は、アバター投稿後 非推奨のAPIであり、まもなく削除されます。

コードをこちらに変更した方が良いかもしれません。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  const site = api.container.lookup("service:site");
  if (!site.mobileView) {
    api.modifyClass("component:post/avatar", (SuperClass) => class extends SuperClass {
      get size() { return "70"; }
    });
  }
});
「いいね！」 5
18

これには#officialテーマコンポーネントもあると思いますか？ Avatar Size and Shape

特定のユースケースに適合するかどうかはわかりませんが、適合するはずだと思います（更新が必要な場合に誰かが修正してくれるという追加のボーナスもあります :slight_smile:）

「いいね！」 7
19

quick 'n dirtyから公式サポートまでアップグレードしました。皆さん、ありがとうございます！

「いいね！」 4
20

レガシーコンポーネント（個別のデスクトップ/モバイル処理を使用）を使用しているユーザー向けに、JSタブは共通セクションでのみ利用可能であることに注意してください。これにより、他の誰かの検索の手間が省けることを願っています :slight_smile:

「いいね！」 1