مرحباً بالجميع،
يستخدم منتدانا ميزة حالة المستخدم المخصصة بكثافة، وظهرت فكرة لجعل تلك المعلومات أكثر بروزاً ووضوحاً - بجعلها تظهر دائماً تحت اسم المستخدم في المشاركة بدلاً من الظهور فقط عند تمرير مؤشر الماوس فوق الأيقونة المرتبطة بها.
لقد كنت أبحث وأبحث لمعرفة ما إذا كانت هناك أي طريقة سهلة نسبياً لتحقيق ذلك، وحتى الآن، لم أجد أي إجابات.
هل يعرف أحد ما إذا كان هذا ممكناً على الإطلاق؟
شكراً مقدماً، وسنة جديدة سعيدة للجميع!
حسنًا… أنا ألقي نظرة على كيفية عرض حالة المستخدم ولا أرى منفذ إضافة (plugin outlet) يمكنك استخدامه لعرض وصف الحالة.
ولكن أعتقد أنه يمكنك الحصول على حالة المستخدم عبر this.user.status، لذا لست متأكدًا مما إذا كنت بحاجة حقًا إلى ذلك المنفذ أو ما إذا كان بإمكانك العثور على منفذ آخر قريب منه.
لقد قمت بتنفيذ نسخة من هذا، ولكن لعرض حقول مستخدم مخصصة تحت اسم الناشر. لقد أنشأت مكون سمة (theme component) واستخدمت هذا لـ JS:
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // ما زلنا بحاجة إلى هذا
// هنا، أضف معرف الحقل المخصص، مسبوقًا بـ "user_field_"
// للحصول على معرف الحقل المخصص:
// 1. اذهب إلى admin/config/user-fields
// 2. انقر على اسم حقل المستخدم
// 3. يتم عرض معرف حقل المستخدم في عنوان URL بعد admin/config/user-fields/
const FIELDS_TO_SHOW = [
{ fieldKey: "user_field_2", display: "inline" },
{ fieldKey: "user_field_1", display: "block" }
];
// ----------------------------------------
function addCustomFields(api) {
FIELDS_TO_SHOW.forEach(config => {
api.renderAfterWrapperOutlet(
"post-meta-data-poster-name",
class extends Component {
// مُحصِّل (getter) لتمرير المفتاح إلى القالب
get currentFieldKey() {
return config.fieldKey;
}
// مُحصِّل (getter) لتمرير نوع العرض إلى القالب
get currentDisplayType() {
return config.display;
}
static shouldRender(args) {
// استخدم config.fieldKey للعثور على البيانات
const value = get(args.post.user.custom_fields, config.fieldKey);
return !!value;
}
<template>
<div class="
poster-custom-field
poster-custom-field-{{this.currentDisplayType}}
field-{{this.currentFieldKey}}
">
{{get @post.user.custom_fields this.currentFieldKey}}
</div>
</template>
}
);
});
}
export default {
name: "show-poster-custom-fields",
initialize() {
withPluginApi("1.0.0", (api) => {
addCustomFields(api);
});
}
};
ثم استخدمت هذا لـ CSS:
.topic-meta-data .names {
flex-wrap: wrap;
align-items: baseline;
}
// الأنماط الأساسية لجميع عروض الحقول المخصصة
.poster-custom-field {
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
flex-shrink: 0;
}
// نمط للعرض المضمن (inline)
.poster-custom-field-inline {
display: inline-block;
margin-left: 8px;
order: 5;
}
.topic-meta-data .names .user-title {
order: 10;
flex-basis: 100%;
width: 100%;
display: block;
margin-left: 0;
margin-top: 2px;
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
}
// نمط للعرض تحت الاسم
.poster-custom-field-block {
flex-basis: 100%;
margin-top: 4px;
order: 20;
}
هذا ما يبدو عليه في الواقع - “more stuff” و “some information” هو المحتوى في الحقلين المخصصين.
كما قال @NateDhaliwal، أعتقد أنه يمكنك استخدام this.user.status لعرض حالة المستخدم بدلاً من الحقول المخصصة التي لدي.
أحد الأمور المتعلقة بذلك هو أنه سيتعين عليك استبداله أيضًا في التواجدات الأخرى، مثل صفحة الملف الشخصي، وبطاقة المستخدم، ورسائل الدردشة.
