即将到来的标题更改 - 准备主题和插件

[pfaffman (Jay Pfaffman)]

到底什么东西要坏了？也许有一个现有的支持的主题组件可以完成这项工作。

如果只是顶部的横幅链接到主站点呢？

[awesomerobot (Kris)]

是否有替代方案：

api.changeWidgetSetting("header-notifications", "avatarSize", "large");

这会给我一个弃用警告，指向这里：

header-notifications 小部件已被弃用，changeWidgetSetting 不再是受支持的覆盖。

[gormus (Osman Görmüş)]

我也遇到了同样的问题。

我正在尝试以正确的方式更改徽标 URL，但以下操作已不再可行：

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

此功能的替代 API 调用是什么？

[david (David Taylor)]

我们正在努力为此创建一个完善的解决方案，但尚未准备就绪。请关注此主题以获取更新。

[kana.tatsuta]

你好 @david - 6 月 7 日星期五之前能准备好一个完善的解决方案吗？如果不能，你能提供一个估算吗？
抱歉如此匆忙，我们将在 6 月 17 日开始封闭 Beta 测试，需要知道这是否会在测试前实施。

[david (David Taylor)]

我没有确切的日期，但很可能在未来 1-2 周内。明天无法完成。

如果您明天需要可用内容，我建议使用旧 API，它将自动将您的网站切换为使用旧版标头实现。

[saquetim (Sérgio Saquetim)]

@kana.tatsuta 新的 API 已合并。

我在 OP 中添加了一个部分，其中包含有关如何自定义徽标 URL 的示例。

[saquetim (Sérgio Saquetim)]

我们已为使用不兼容插件或主题的实例启用新部署的管理员通知。

[tradmo (Adam Moore)]

我不确定如何更新我的代码。我尝试了几种方法，但每次图像都显示为浅色主题，而不是我的深色主题，以及为组件中的这些图像直接上传的内容。有什么关于如何重构的建议吗？

<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 (Sérgio Saquetim)]

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

对于 reopenWidget (sidebar-toggle)，您能否帮助我理解如何替换以下代码？我在本指南中找不到相关说明

// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle 按钮已通过“reopenWidget”移除，applicationController 强制将 showSidebar 设置为 true（适用于 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);
  },
};

[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” })，但我不确定该怎么做

非常感谢任何帮助

[saquetim (Sérgio Saquetim)]

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

这是我们的建议：

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

[saquetim (Sérgio Saquetim)]

@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” })，但我不太确定如何操作

非常感谢任何帮助

你好 @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]

谢谢您，先生！

啊，在我眼前看到之后，我明白了。

我非常感谢您的回复！！

[av203 (Avi N)]

希望您能协助迁移这段我不知道如何迁移的代码：

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

此更改的原始目标是保持用户下拉菜单不变，但用一个图标（铃铛）替换个人资料图片。

[saquetim (Sérgio Saquetim)]

@av203

此更改的最初目标是保持用户下拉菜单不变，但将个人资料图片替换为图标（铃铛）

要获得您想要的效果的最简单方法是使用现有的 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", `<template>
        ${{dIcon "bell"}}
      </template>`);
    });
  },
};

添加以下 CSS：

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

您将获得：

[saquetim (Sérgio Saquetim)]

DEV: Remove the old header widgets code

旧的小部件代码已被移除。

[Jonathan5]

有人能帮我更新一个主题组件吗，它会在“home-logo”旁边添加一些文本？ 提前感谢。

Add Text In Header Beside Logo

Hey Daniel You can use something like this to add text next to the header logo on your site <script type="text/discourse-plugin" version="0.8"> api.decorateWidget("home-logo:after", helper => { const titleVisible = helper.attrs.minimized; const headerText = "Text you want to add"; // <--- change this text if (!titleVisible) { return api.h("span.header-text", headerText); } }); </script> You’d add it in the header section of your theme / component. You can read more about t…