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
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

3

Спасибо за это объяснение, я тоже искал именно это. Я бы сказал, что в этом объяснении не хватает информации о том, как вставить фрагмент JavaScript и где это сделать. Нужно ли для этого создавать отдельный плагин?

4

Код, который я привёл выше с оператором console.log, возвращающим атрибуты поста, предназначен для размещения в теме или компоненте темы. Для общего обзора разработки тем Discourse см. Руководство разработчика по темам Discourse. Для подробной информации об использовании методов Plugin API в теме, а не в плагине, см. https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281.

5

Кто-нибудь знает, как это сделать через темы?

Это именно то, что я ищу.

Я хочу видеть это так же, как на LinkedIn (показывает должность):

image

Так же, как в этом обсуждении:

6

Всем привет! Я новичок в Discourse и нашел тему, которая выглядит ИМЕННО так, как мне нужно. У меня есть пользовательское поле, которое я хочу отображать сразу после полного имени пользователя в сообщении.

Я не совсем неопытен в создании плагинов для других веб-приложений, которыми пользовался ранее, поэтому думаю, что при достаточном терпении и методе проб и ошибок смогу разобраться, как заставить работать компонент темы или что-то подобное. Сейчас я прохожу руководство по разработке тем.

Я ДУМАЮ, что понял, как называется поле, которое нужно добавить в настройку «публичные пользовательские поля»: (полагаю, его 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: