reopenWidget がエラーをスローします

開発
1

Beginner’s Guide to Developing Discourse Themes の reopenWidget() について理解しようとしていますが、home-logo スニペットの例でテーマコンポーネントを作成しようとすると、Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'offsetHeight') というエラーが発生し、ページレイアウトが壊れてしまいます。reopenWidget() の使い方が変更されたのでしょうか、それとも何か見落としているのでしょうか？

「いいね！」 1
2

問題のあるコードを共有していただけますか？

「いいね！」 2
3

これは次のとおりです。

<script type="text/discourse-plugin" version="0.8.13">
api.reopenWidget("home-logo", {
  logo() {
    const { siteSettings } = this,
      { iconNode } = require("discourse/helpers/fa-icon-node"),
      h = require("virtual-dom").h,
      altLogo = settings.Alternative_logo_url,
      altLogoSmall = settings.Alternative_small_logo_url,
      mobileView = this.site.mobileView,
      mobileLogoUrl = siteSettings.mobile_logo_url || "",
      showMobileLogo = mobileView && mobileLogoUrl.length > 0;
    (logoUrl = altLogo || ""),
    (title = siteSettings.title);
    if (!mobileView && this.attrs.minimized) {
      const logoSmallUrl = altLogoSmall || "";
      if (logoSmallUrl.length) {
        return h("img#site-logo.logo-small", {
          key: "logo-small",
          attributes: { src: logoSmallUrl, width: 33, height: 33, alt: title }
        });
      } else {
        return iconNode("home");
      }
    } else if (showMobileLogo) {
      return h("img#site-logo.logo-big", {
        key: "logo-mobile",
        attributes: { src: mobileLogoUrl, alt: title }
      });
    } else if (logoUrl.length) {
      return h("img#site-logo.logo-big", {
        key: "logo-big",
        attributes: { src: logoUrl, alt: title }
      });
    } else {
      return h("h1#site-text-logo.text-logo", { key: "logo-text" }, title);
    }
  }
});
</script>

これは、Beginner’s Guide の reopenWidget の例から、何も変更せずに新しいテーマコンポーネントにコピーしたものです。（コードをヘッダーに入力したことも確認しました）。

他にいくつかのテーマコンポーネントがインストールされていますが、home-logo に触れるものはありません。基本的なホスティングを使用していますが、関係があるかもしれません。ダークロゴをアップロードしていないことが原因かと思いましたが、ダークロゴをアップロードしても同じことが起こります。

「いいね！」 1
4

残念ながら、ここでは物事は急速に進みます。

基本的な問題は、おそらくガイドのコードをコピーしただけで、指示に従っていないことです。

これは、あなたが共有したコードと現在のソースコードの比較です。

image
image1786×953 145 KB

つまり、非常に異なっています！（したがって、壊れる可能性が高いです！）

あなたがすべきこと（指示通り）は、ソースコードにアクセスし、現在のコードをコピーして、それをあなたのニーズに合わせて変更することです。

言い換えれば、ガイドのコードは最新ではなく、指示はまだ有効ですが、コードは古くなっています。

「いいね！」 2
5

承知いたしました、ありがとうございます！ DiscourseやEmberでの作業は初めてなので、まだ慣れていないところです。他の関数を現在のソースからコピーしてreopenWidgetを試しましたが、うまくいきませんでした。しかし、もう少し試してみます。