جعل حالة المستخدم المخصصة أكثر بروزًا

[jenmck (jen)]

لقد قمت بتنفيذ نسخة من هذا، ولكن لعرض حقول مستخدم مخصصة تحت اسم الناشر. لقد أنشأت مكون سمة (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 لعرض حالة المستخدم بدلاً من الحقول المخصصة التي لدي.