能否在帖子头部放置自定义字段？

支持
1

I have a use case where I would like to add the content from a custom user field next to my username in the post header:

image
image.png1711×342 43.9 KB

not sure the best way to go about this?

very new to discourse and all its wonders

2

You can do a lot with the methods found in plugin-api.js.es6. To add content before or after the poster name widget, use the decorateWidget method. Use 'poster-name:after' as the name/type parameter.

Checking the result of the console.log statement from the following code will tell you what attributes are available:

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        console.log('attrs', helper.attrs);
    });
</script>

What you’ll see is that custom user fields are not available. To get access to them, you need to add the name of the user custom field to the public user custom fields Site Setting. Finding the name of the field can be tricky. One way to find the name is to go to /admin/customize/user_fields.json and look at the JSON for the page. You’ll see something like this:

{
"user_fields": [
{
"id": 1,
"name": "Terms of Service",
"description": "<a href=\"http://localhost:3000/tos\">I have read the tos</a>",
"field_type": "confirm",
"editable": true,
"required": false,
"show_on_profile": false,
"show_on_user_card": false,
"position": 1
},
{
"id": 4,
"name": "city",
"description": "your city",
"field_type": "text",
"editable": true,
"required": true,
"show_on_profile": false,
"show_on_user_card": false,
"position": 3
}
]
}

You can get the name of the field by appending “user_field_” to the field’s ID. So the “city” field on my site has the name “user_field_4”. Add the name to the public user custom fields Site Setting so that it is available in helper.attrs.

37%20PM
37%20PM771×117 8.09 KB

The following code will add the city field after the poster-name widget for users who have set that custom field. The field is wrapped in <span class="poster-user-field"></span> tags, so it can be styled with CSS.

<script type="text/discourse-plugin" version="0.8.27">
    api.decorateWidget('poster-name:after', helper => {
        const attrs = helper.attrs;
        if (attrs.userCustomFields && attrs.userCustomFields.user_field_4) {
            return helper.h('span.poster-user-field', helper.attrs.userCustomFields.user_field_4);
        }
    });
</script>

44%20PM
44%20PM797×173 13.4 KB

9 个赞
3

感谢这个解释，这正是我一直在寻找的内容。我认为这个解释中缺少的部分是如何插入 JavaScript 代码片段以及在哪里插入。您是否需要为此创建一个单独的插件？

1 个赞
4

我上面发布的包含 console.log 语句的代码（用于返回帖子属性），应放置在主题或主题组件中。有关 Discourse 主题开发的概述，请参阅 Discourse 主题开发者指南。有关在主题中（而非插件中）使用 Plugin API 方法的详细信息，请参阅 https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281。

3 个赞
5

有人知道如何通过主题实现吗？

这正是我在寻找的功能。

我希望能够像 LinkedIn 那样显示（展示职位头衔）：

image

就像这里的对话一样：

6

大家好！我是 Discourse 新手，我找到了这个帖子，它看起来正是我想要做的。我有一个自定义字段，希望它能显示在帖子用户全名之后的紧邻位置。

我并非完全没有为过去使用的其他 Web 应用制作插件的经验，所以我认为只要有足够的耐心和反复试验，我就能弄清楚如何制作一个主题组件或类似的东西。我现在正在学习主题开发教程。

我认为我已经弄清楚了要添加到“公共用户自定义字段”设置中的字段名称（我认为 ID 是 2，所以我将其设置为 user_field_2）。

我登录了我的 Discourse 站点，并创建了一个新的主题组件。我为我安装的所有主题启用了它。我进入了 JS 部分，并将上面的代码复制了进去（将 user_field_4 改为了 user_field_2）。它似乎没有起到任何作用，所以我确定我做错了什么。我是否需要在其他地方粘贴这段代码？或者我完全搞错了方向？

我知道这个帖子有点旧了，所以代码可能已经过时。有没有人能帮帮我？我会尽力回答任何问题或提供任何需要的细节。谢谢！

7

您说得对，这段代码现在已经过时了，因为我们替换了 widget 系统。这是我们去年发布的一些相关信息：Upcoming post stream changes - How to prepare themes and plugins 。

仍然有可能让它工作，但您需要使用 Glimmer Component。它可能看起来像这样：

import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";

class UserFieldBadge extends Component {
  static shouldRender(args) {
    return !!args.post?.user_custom_fields?.user_field_4;
  }

  <template>
    <span class="poster-user-field">
      {{@post.user_custom_fields.user_field_4}}
    </span>
  </template>
}

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet("post-meta-data-poster-name", UserFieldBadge);
});

请记住，您需要将此代码中的 user_field_4 与您想要显示的实际字段相匹配。

我将把修改此代码以显示所有“公共用户自定义字段”的任务留给其他人。 :wink:

1 个赞