今後のヘッダー変更 - テーマとプラグインの準備

いったい何が壊れようとしているのでしょうか? 既存のサポートされているテーマコンポーネントで対応できるかもしれません。

もしそれがメインサイトにリンクする上部のバナーだけならどうでしょうか?

「いいね!」 1

api.changeWidgetSetting("header-notifications", "avatarSize", "large"); の代替方法はありますか?

これは次の deprecation warning を表示します。

The header-notifications widget has been deprecated and changeWidgetSetting is no longer a supported override.

「いいね!」 5

私も同じ状況です。

ロゴURLを適切な方法で変更しようとしていますが、以下のことはもはや実現できません。

api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");

これに代わるAPI呼び出しは何ですか?

「いいね!」 1

この問題に対するクリーンなソリューションを作成していますが、まだ準備ができていません。更新については、このトピックに注目してください。

「いいね!」 2

@david様

6月7日(金)までにクリーンなソリューションを準備できますか?もしそれが無理な場合は、見積もりをいただけますでしょうか?
お急ぎのところ申し訳ありませんが、6月17日にクローズドベータを開始する予定であり、テスト前に実装されるかどうかを知る必要があります。

正確な日付はありませんが、おそらく1〜2週間以内でしょう。明日までには間に合いません。

もし明日までに動作するものが必要な場合は、古いAPIを使用することをお勧めします。これにより、サイトは自動的にレガシーヘッダー実装を使用するように切り替わります。

「いいね!」 2

@kana.tatsuta 新しいAPIがマージされました。

OPに、ロゴURLをカスタマイズする方法の例を示すセクションを追加しました。

「いいね!」 2

互換性のないプラグインまたはテーマを使用しているインスタンスで、新しいデプロイに対して管理者の通知を有効にしました。

「いいね!」 2

コードの更新方法がわかりません。いくつか試しましたが、毎回、コンポーネントに直接アップロードされた画像ではなく、ライトテーマの画像が表示されてしまいます。これをどのようにリファクタリングすればよいか、何か提案はありますか?

<script type="text/discourse-plugin" version="0.8.25">
  api.reopenWidget("home-logo", {
    logoUrl() {
      return (
        settings.Alternative_logo_url || ""
      );
    },

    mobileLogoUrl() {
      return (
        settings.Alternative_mobile_logo_url || ""
      );
    },

    smallLogoUrl() {
      return (
        settings.Alternative_small_logo_url || ""
      );
    }
  });
</script>

@tradmo,

home-logo-contents プラグインのアウトレットでコネクタを使用してみてください。コードは次のように翻訳されます。

// javascripts/discourse/initializers/customize-logo.gjs

import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: `logo-customizations`,
  initialize(container) {
    withPluginApi("1.29.0", (api) => {
      renderHomeLogo(api);
    });
  },
};

function renderHomeLogo(api) {
  const logoSmallUrl = settings.Alternative_small_logo_url || "";
  const logoUrl = settings.Alternative_logo_url || "";
  const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";

  api.renderInOutlet("home-logo-contents", 
    <template>
      <HomeLogoContents
        @logoSmallUrl={{logoSmallUrl}}
        @logoUrl={{logoUrl}}
        @minimized={{@outletArgs.minimized}}
        @mobileLogoUrl={{mobileLogoUrl}}
        @showMobileLogo={{@outletArgs.showMobileLogo}}
        @title={{@outletArgs.title}}
      />
    </template>
  );
}
「いいね!」 3

reopenWidget (sidebar-toggle) について、以下のコードを置き換える方法を教えていただけますか?このガイドには説明が見つかりませんでした。

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle ボタンは「reopenWidget」によって削除されました。applicationController は showSidebar を true に強制します(デスクトップビューの場合)。*/

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },
};

皆さん、こんにちは :wave:

これを変更するにはどうすればよいか、どなたか手伝っていただけますか?

<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});

</script>

api.headerIcons.add(“foo”, FooIcon, { before: “search” }) を使用するように変換する必要があると思いますが、確信が持てません :frowning:

どなたか助けていただけると幸いです :pray:

@angelinekwan

以下をお勧めします。

  1. 既存の javascripts/discourse/api-initializers/desktop-open-sidebar-always.js ファイルを削除します。

  2. 新しいファイル javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js を作成し、以下のコードを追加します。

import { withPluginApi } from "discourse/lib/plugin-api";

const PLUGIN_NAME = "desktop-open-sidebar-always";

export default {
  name: PLUGIN_NAME,

  initialize() {
    withPluginApi("1.34.0", (api) => {
      api.modifyClass("controller:application", {
        pluginId: PLUGIN_NAME,

        calculateShowSidebar() {
          if (this.site.desktopView && this.canDisplaySidebar) {
            return true;
          }

          return this._super(...arguments);
        },
      });
    });
  },
};

common/common.scss に以下を追加します。

html.desktop-view {
  .header-sidebar-toggle {
    display: none;
  }
}
「いいね!」 4

HI @Danny_Dainton

Custom Header Links (icons) のテーマコンポーネントをご覧ください。お探しのものだと思います。

テーマコンポーネントが使用できない場合は、api.headerIcons.add で対応できます。 :smiley:

  • 新しいイニシャライザーファイルを作成します。拡張子は .gjs である必要があります。
  • 次のコードで目的を達成できるはずです。
// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    `
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    `,
    { before: "search" }
  );
});
「いいね!」 4

ありがとうございます!

なるほど、目の前で見ると少し分かりやすくなりました。
ご回答に大変感謝いたします!!:heart:

「いいね!」 1

このコードの移行について、いくつか支援をお願いできますでしょうか。移行方法がわかりません。

api.reopenWidget("user-dropdown", {
  html(attrs) {
    return h(
      "a.icon",
      { title: I18n.t("custom.string.title") },
      [iconNode("bell"), this.attach("header-notifications", attrs)],
    );
  },
});

この変更の当初の目的は、user-dropdown メニューはそのままにして、プロフィール画像をアイコン(ベル)に置き換えることです。

目的の効果を得る最も簡単な方法は、既存の PluginOutlet を使用してアイコンを追加し、ユーザーのアバター画像を CSS で非表示にすることです。

.gjs ファイルで:

// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs

import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";

export default {
  name: "user-dropdown-bell-icon",
  initialize(container) {
    withPluginApi("1.34.0", (api) => {
      api.renderInOutlet("user-dropdown-notifications__before", 
        {{dIcon "bell"}}
      );
    });
  },
};

次の CSS を追加します。

.header-dropdown-toggle.user-menu-panel img {
  display: none;
}

次のようになります。

「いいね!」 2

古いウィジェットコードが削除されました。

「いいね!」 3

「home-logo」の横にテキストを追加するテーマコンポーネントの更新について、どなたか手伝っていただけませんか?よろしくお願いします。