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:
not sure the best way to go about this?
very new to discourse and all its wonders
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.
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>
9 إعجابات
شكرًا لك على هذا الشرح، فهو شيء كنت أبحث عنه أيضًا. أود القول إن ما ينقص هذا الشرح هو كيفية إدراج مقتطف جافا سكريبت وأين يتم ذلك. هل تحتاج إلى إنشاء مكون إضافي منفصل لهذا الغرض؟
إعجاب واحد (1)
الكود الذي نشرته أعلاه مع عبارة console.log التي ترجع سمات المنشور، مُقصد به أن يُوضع في سمة أو مكون سمة. للحصول على نظرة عامة عامة حول تطوير سمات Discourse، راجع دليل المطور لسمات Discourse. وللتفاصيل حول استخدام طرق Plugin API في سمة بدلاً من إضافة، راجع https://meta.discourse.org/t/using-the-pluginapi-in-site-customizations/41281.
3 إعجابات
هل يعرف أحد كيف يتم ذلك عبر السمات؟
هذا بالضبط ما أبحث عنه.
أريد أن أتمكن من رؤيته تمامًا كما يفعل LinkedIn (يظهر المسمى الوظيفي):
تمامًا كما في هذه المحادثة هنا:
مرحباً بالجميع! أنا جديد على Discourse ووجدت هذا الموضوع الذي يبدو أنه بالضبط ما أحاول القيام به. لدي حقل مخصص أود عرضه مباشرة بعد الاسم الكامل للمستخدم في منشور.
أنا لست عديم الخبرة تمامًا في إنشاء إضافات لتطبيقات الويب الأخرى التي استخدمتها في الماضي، لذلك أعتقد أنه مع ما يكفي من الصبر والتجربة والخطأ يمكنني معرفة كيفية جعل مكون سمة أو شيئًا مشابهًا يعمل. أنا في طور المرور عبر برنامج تعليمي لتطوير السمات الآن.
أعتقد أنني اكتشفت اسم الحقل لإضافته إلى إعداد “الحقول المخصصة للمستخدم العام” (أعتقد أن المعرف هو 2، لذلك قمت بتعيينه إلى user_field_2).
لقد سجلت الدخول إلى موقع Discourse الخاص بي، وأنشأت مكون سمة جديدًا. قمت بتمكينه لجميع السمات التي قمت بتثبيتها. ذهبت إلى JS ونسخت الكود من الأعلى (تغيير user_field_4 إلى user_field_2). لم يبدو أنه يفعل أي شيء، لذلك أنا متأكد من أنني فعلت شيئًا خاطئًا. هل هناك مكان آخر احتجت فيه إلى لصق هذا؟ أم أنني بعيد كل البعد عن الهدف؟
أعلم أن هذا المنشور قديم إلى حد ما، لذا قد يكون الكود قديمًا. هل هناك أي احتمال أن يتمكن أي شخص من مساعدتي؟ سأبذل قصارى جهدي للإجابة على أي أسئلة أو تقديم أي تفاصيل مطلوبة. شكراً جزيلاً!
أنت على حق في أن هذا الرمز أصبح قديمًا الآن لأننا استبدلنا نظام الأدوات المصغرة (widget). إليك بعض المعلومات حول ذلك من العام الماضي: 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 في هذا الرمز مع الحقل الفعلي الذي تريد عرضه.
سأترك للآخرين تعديل هذا بحيث يمكنه عرض جميع حقول المستخدم المخصصة العامة. 
إعجاب واحد (1)