Ability to place custom fields in post header?

제품 지원
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
image1711×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

3

이 설명을 감사합니다. 저도 찾고 있던 내용이었거든요. 다만 이 설명에서 빠진 부분은 자바스크립트 스니펫을 어떻게 삽입하고, 어디서 해야 하는지입니다. 이를 위해 별도의 플러그인을 만들어야 하나요?

4

위에서 공유한 게시물 속성을 반환하는 console.log 문이 포함된 코드는 테마 또는 테마 컴포넌트에 삽입하도록 의도된 것입니다. 디스코urs 테마 개발에 대한 일반적인 개요는 디스코urs 테마 개발자 가이드를 참고하세요. 플러그인 대신 테마에서 플러그인 API 메서드를 사용하는 방법에 대한 자세한 내용은 https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281을 참고하세요.

5

테마를 통해 어떻게 해야 하는지 아는 분 계신가요?

제가 찾는 것이 바로 이것입니다.

LinkedIn처럼 직책(Job title)이 표시되도록 하고 싶습니다:

image

여기서 이 대화처럼요:

6

안녕하세요 여러분! 저는 Discourse를 처음 사용하게 되었는데, 제가 하려는 것과 정확히 일치하는 것 같은 이 스레드를 찾았습니다. 게시글에서 사용자의 전체 이름 바로 뒤에 표시되도록 하고 싶은 사용자 정의 필드가 하나 있습니다.

저는 과거에 사용했던 다른 웹 앱에 플러그인을 만들어 본 경험이 조금은 있어서, 충분히 인내심을 갖고 시행착오를 거치면 Theme Component나 비슷한 것을 어떻게 작동시킬지 알아낼 수 있을 것 같습니다. 지금은 Theme Development 튜토리얼을 살펴보고 있습니다.

“공개 사용자 사용자 정의 필드” 설정에 추가할 필드 이름을 알아낸 것 같습니다 (ID가 2인 것 같아서 user_field_2로 설정했습니다).

제 Discourse 사이트에 로그인하여 새로운 Theme Component를 만들었습니다. 설치된 모든 테마에서 활성화했습니다. 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를 표시하려는 실제 필드와 일치시켜야 한다는 점을 기억하세요.

모든 public user custom fields를 표시하도록 이 코드를 수정하는 것은 다른 분들에게 맡기겠습니다. :wink: