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

pfaffman · 2024 年 4 月 17 日午後 1:07

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

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

awesomerobot · 2024 年 5 月 20 日午後 3:31

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

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

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

gormus · 2024 年 6 月 4 日午前 7:57

私も同じ状況です。

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

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

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

david · 2024 年 6 月 4 日午前 9:38

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

kana.tatsuta · 2024 年 6 月 6 日午前 9:34

@david様

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

david · 2024 年 6 月 6 日午前 11:49

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

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

saquetim · 2024 年 6 月 13 日午後 7:30

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

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

saquetim · 2024 年 6 月 20 日午後 5:59

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

tradmo · 2024 年 6 月 25 日午後 4:19

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

<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>

saquetim · 2024 年 6 月 25 日午後 4:32

@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>
  );
}

angelinekwan · 2024 年 6 月 26 日午後 2:27

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);
  },
};

Danny_Dainton · 2024 年 6 月 27 日午前 9:22

皆さん、こんにちは

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

<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” }) を使用するように変換する必要があると思いますが、確信が持てません

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

saquetim · 2024 年 6 月 27 日午後 10:21

angelinekwan:

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

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */

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);
  },

@angelinekwan 様

以下をお勧めします。

既存の javascripts/discourse/api-initializers/desktop-open-sidebar-always.js ファイルを削除します。
新しいファイル 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;
  }
}

saquetim · 2024 年 6 月 27 日午後 10:35

Danny Dainton:

これを変更するにはどうすればよいか、どなたか手伝っていただけませんか？
<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” }) を使用するように変換する必要があると思いますが、確信が持てません

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

HI @Danny_Dainton、

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

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

新しいイニシャライザーファイルを作成します。拡張子は .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" }
  );
});

Danny_Dainton · 2024 年 6 月 28 日午前 6:17

ありがとうございます！

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

av203 · 2024 年 7 月 2 日午前 11:42

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

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 メニューはそのままにして、プロフィール画像をアイコン（ベル）に置き換えることです。

saquetim · 2024 年 7 月 4 日午後 11:17

目的の効果を得る最も簡単な方法は、既存の 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;
}

次のようになります。

saquetim · 2024 年 9 月 4 日午後 5:53

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

Jonathan5 · 2024 年 9 月 8 日午後 8:21

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

トピック		返信	表示
Help us test the new header code! Feature performance	29	10830	2016 年 5 月 23 日
Upcoming post menu changes - How to prepare themes and plugins Dev dev-news	13	869	2025 年 4 月 1 日
Preparing your community for behind-the-scenes header changes Announcements	6	505	2024 年 10 月 3 日
Need plugin code for customised dicourse header Support	10	1464	2022 年 9 月 11 日
Upcoming topic-list changes - how to prepare themes and plugins Dev dev-news	35	1495	2025 年 4 月 14 日

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

関連トピック