テンプレートとJS APIのためのインラインスクリプトタグのモダナイゼーション

開発
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月下旬 - 機能の削除

\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

最新の .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
});

スクリプトタグでは、require() 構文を使用して他の JS モジュールをインポートすることしかできませんでした。これは .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