投稿ヘッダーにカスタムフィールドを配置する機能はありますか？

サポート
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

このコードが現在非推奨であることはごもっともです。ウィジェットシステムを置き換えたためです。昨年からの情報はこちらで確認できます：Upcoming post stream changes - How to prepare themes and plugins 。

これを機能させることはまだ可能ですが、Glimmerコンポーネントを使用する必要があります。次のような形になるでしょう。

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