更新的自定义头部图标：通过URL传送帖子数据

开发
4

好的，重定向到一个包含用户名的外部 URL。

以下是如何使用新 API 的基本示例：

import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = `
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>`;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});
  • calculator 是一个唯一的名称
  • iconComponent 指的是一个内联的 Glimmer template，正如你在这里看到的，但它也可以指向你在 components 目录中创建的 Glimmer 类组件。
  • 你可以使用 before 或 after 加上 header icon 的唯一名称来选择将图标放置在哪里。

NVIDIA_Share_rvsjetCtUy

请随意调整！

注意：

  • Glimmer template 语法在 UI 中将无法工作。

    你需要创建一个带有单独文件的 theme component。要快速生成 TC，你可以使用 Discourse CLI 并使用你的代码编辑器轻松进行开发。我强烈推荐它。

    你也可以使用 Github 上的模板：https://github.com/discourse/discourse-theme-skeleton。

    • 要使用 Glimmer 组件，文件扩展名必须是 .gjs。

如果你需要进一步的帮助，请告诉我！

3 个赞