1つのページにのみHTMLをインジェクト

開発
1

テーマの JS タブに以下のようなコードがあります：

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


export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              html stuff
            </div>
        </template>
     );
});

これをコピー＆ペーストしましたが、動作します（例です）。

これをホームページのみ、またはカテゴリーページのみでレンダリングするにはどうすればよいでしょうか。

質問が不適切であれば申し訳ありません。

2

それは良い質問です。心配しないでください！これで動作します：

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        html stuff
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

これにより、router サービスと defaultHomepage ユーティリティを使用してホームページにいるかどうかをチェックする新しいコンポーネントが作成されます。その後、そのコンポーネントがアウトレットにレンダリングされます。

さらに詳細な情報は、こちらを参照してください：Add custom content that only appears on your homepage

3

Krisさん、ありがとうございます。完璧に動作しました。リンクもありがとうございます。勉強中です。

4

続きの質問があります

注入した小さな HTML チャンクがホームページに素敵なバナーを表示し、正常に読み込まれて動作しています。テーマの <head> タブに以下を配置しました：

document.addEventListener('DOMContentLoaded', loadMyWidget);

動作はしますが、他のページに移動してからホームページに戻ると、ウィジェットが再度読み込まれません。以下を追加してみましたが：

window.addEventListener('focus', loadMyWidget);

改善されませんでした。誰か助けてください。この質問のために新しいトピックを立てるべきでしょうか？

追記：

自分で解決策を見つけました。

export default apiInitializer((api) => { に以下を追加しました：

api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

これで、ホームページに戻ったときにウィジェットが再読み込みされます。