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

开发
1

Discourse 最近已弃用 api.decorateWidget，我曾用它来插入自定义的标题图标并通过 URL 发布当前用户的用户名。

我想知道如何使用新的 headerIcons API 通过 HTTP 发布用户的当前用户名。我找不到任何关于如何实现这一点的文档或示例。我也没能通过 Customer Header Link 插件找到方法。

感谢您的帮助！下面是我目前使用 decorateWidget API 发布用户名的代码：

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

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });


</script>
2

嘿，

我会帮你的，但在那之前你能解释一下你想要做什么吗？

你是想显示一个带有表单的菜单吗？

比如：

这张图片似乎是网页的截图，展示了一个名为“聊天侧边栏偏好设置”的聊天功能。(由 AI 标注)
这张图片似乎是网页的截图，展示了一个名为“聊天侧边栏偏好设置”的聊天功能。(由 AI 标注)414×260 9.01 KB

还是只是一个带有用户名的按钮，并且它会重定向到某个 URL？

3

点击标题图标>>将用户的用户名发布到指定的 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 个赞
5

您好 @Arkshine，

非常感谢您提供的详细说明。我尝试将代码注入到 <head> 中，但没有看到图标显示出来。我哪里做错了？

<script type="text/discourse-plugin">
    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);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>
1 个赞
6

@littleviolette 嗨，这里无法在 Admin UI 中运行。

使用 Theme CLI，您可以在计算机上轻松创建主题组件。

然后，您可以使用您选择的文本编辑器（如 vscode）编辑文件，并将代码添加到初始化程序中。您可以在 /javascripts/discourse/api-initializers/my-header-icon.gjs 中创建一个文件，并将代码粘贴进去。您也可以在 about.json 中更改默认值。

image

下一步是在您的生产论坛上安装该组件：

  • 您可以将组件放在 Github 上，然后在 Admin UI 中使用存储库链接进行安装；
  • 或者将计算机上的目录压缩成 zip 文件，然后在 Admin UI 中从设备进行安装。

试试看，如果您遇到任何问题，请告诉我！

3 个赞