الصفحة الافتراضية /about لموقع Discourse التي تعرض معلومات للمشرفين والمسؤولين فقط تعرض اسم المستخدم والاسم واللقب لكل مستخدم. كيف يمكنني تخصيص صفحة “حول” لعرض محتويات قسم “نبذة عني” في ملف كل مستخدم أيضًا؟
أتفهم الفكرة العامة الموضحة هنا:
- تعريف مكون
- تعريف قالب
- إنشاء ملف موصل للاستفادة من مخرج موجود
ومع ذلك، لا يوجد مخرج يناسب حالة الاستخدام الخاصة بي بشكل أفضل، على حد علمي. علاوة على ذلك، يبدو أن تجاوز القالب لـ /about أو استخدام وظيفة modifyClass في واجهة برمجة تطبيقات المكون الإضافي غير مستحسن. لذلك، لست متأكدًا مما يجب فعله. سأكون ممتنًا جدًا لأي توجيه بشأن أفضل الممارسات هنا. شكرًا!
يبدو أن Discourse AI يعتقد أنه يجب علي المضي قدمًا وتجاوز القالب. هل هذا يبدو صحيحًا؟
رد Discourse AI
إضافة "نبذة عني" إلى صفحة Discourse /about AI
aas:
الصفحة الافتراضية /about لموقع Discourse التي تعرض معلومات للمشرفين والمسؤولين فقط تعرض اسم المستخدم والاسم واللقب لكل مستخدم. كيف يمكنني تخصيص صفحة “حول” لعرض محتويات قسم “نبذة عني” في ملف كل مستخدم أيضًا؟
أتفهم الفكرة العامة الموضحة هنا:
Add custom content that only appears on your homepage
- تعريف مكون
- تعريف قالب
- إنشاء ملف موصل للاستفادة من مخرج موجود
ومع ذلك، لا يوجد مخرج يناسب حالة الاستخدام الخاصة بي بشكل أفضل، على حد علمي. علاوة على ذلك، يبدو أن تجاوز القالب لـ /about أو استخدام وظيفة modifyClass في واجهة برمجة تطبيقات المكون الإضافي غير مستحسن. لذلك، لست متأكدًا مما يجب فعله. سأكون ممتنًا جدًا لأي توجيه بشأن أفضل الممارسات هنا. شكرًا!
HelperBot:
حسنًا، يمكنني مساعدتك في البحث عن أفضل الممارسات لتخصيص صفحة /about لتضمين معلومات ملف تعريف المستخدم مثل قسم “نبذة عني”.
أنت على حق في أن نهج مكون السمات القياسي يتضمن استخدام مخارج المكونات الإضافية، ويبدو أنه لا يوجد مخرج محدد ودقيق داخل قائمة الموظفين في صفحة /about لإدراج هذه البيانات بسهولة.
بناءً على نتائج البحث والممارسات الشائعة، بينما يُفضل استخدام المخارج لتجنب كسر التحديثات المستقبلية، فإن الطريقة الوحيدة الممكنة لتخصيص قوالب أساسية معينة مثل صفحة /about هي تجاوزها مباشرة داخل مكون سمة.
إليك النهج الأفضل على الأرجح باستخدام مكون سمة:
- إنشاء مكون سمة: إذا لم تكن قد فعلت ذلك بالفعل، فأنشئ مكون سمة جديدًا.
- تجاوز القالب:
- تحتاج إلى تجاوز قالب
about.hbs. - في مكون السمة الخاص بك، أنشئ الملف
common/templates/about.hbs. - انسخ محتوى ملف
about.hbsالأصلي إلى ملفك الجديد. يمكنك العثور على الملف الأصلي هنا على GitHub. - قم بتعديل نسختك من
about.hbs. ابحث عن الأقسام التي تتكرر فيها عبرmodel.adminsوmodel.moderators. داخل الحلقة (على الأرجح ضمن كتلة{{#each}})، يمكنك الوصول إلى كائن المستخدم. عادةً ما يكون محتوى “نبذة عني” فيuser.profile.bio_rawأو خاصية مشابهة. أضف هذه الخاصية إلى القالب حيث تريد عرضها لكل مستخدم.
- تحتاج إلى تجاوز قالب
- تمكين المكون: أضف مكون السمة إلى السمة الخاصة بك وقم بتفعيله.
لماذا هذا النهج؟
- تحكم مباشر: يمنحك تحكمًا مباشرًا في بنية HTML لصفحة
/about. - الجدوى: نظرًا لعدم وجود مخرج مخصص داخل قائمة المستخدمين في تلك الصفحة، فهذه هي الطريقة الأكثر مباشرة لإدراج المحتوى لكل مستخدم في هذا الموقع المحدد.
العيوب (كما لاحظت):
- الصيانة: إذا قامت Discourse بتحديث قالب
about.hbsالأساسي بشكل كبير في المستقبل، فلن تحصل نسختك المتجاوزة على هذه التحديثات تلقائيًا. قد تحتاج إلى مقارنة ودمج التغييرات يدويًا لاحقًا. هذا هو المقايضة لتخصيص القوالب الأساسية بدون مخارج محددة.
على الرغم من أن البحث لم يسفر عن مثال دقيق لصفحة /about، إلا أن تعديل القوالب لإضافة معلومات الملف الشخصي هو نمط شائع، كما هو موضح في التخصيصات لبطاقات المستخدمين والملفات الشخصية:
- Normalized Profile Links يضيف حقولًا مخصصة إلى بطاقات/ملفات تعريف المستخدمين عبر تعديل القالب في مكون.
- Quick Profile Links Menu يضيف عناصر إلى صفحات ملفات تعريف المستخدمين.
توضح هذه الأمثلة أن مكونات السمات غالبًا ما تتضمن تخصيص القوالب عندما لا تكون المخارج المحددة متاحة. تجاوز about.hbs يتبع هذا النمط لحالة الاستخدام الخاصة بك.
aas:
يبدو أنه لا يوجد قالب about.hbs في مستودع discourse/discourse. ومع ذلك، يبدو أن قالب about.gjs موجود في app/assets/javascripts/discourse/app/templates/about.gjs.
HelperBot:
أنت على حق تمامًا! شكرًا لك على التصحيح. لقد انتقلت Discourse بالفعل إلى استخدام قوالب .gjs (GlimmerJS) للعديد من المكونات، بما في ذلك صفحة /about.
أعتذر عن الإشارة إلى تنسيق .hbs القديم.
المسار الصحيح للقالب هو بالفعل app/assets/javascripts/discourse/app/templates/about.gjs في الكود الأساسي.
لتجاوز هذا باستخدام مكون سمة، تظل العملية مفهومة كما هي، ولكن يتم تحديث مسار الملف والصيغة:
- إنشاء/استخدام مكون سمة: كما في السابق.
- تجاوز القالب:
- في مكون السمة الخاص بك، أنشئ الملف في المسار المقابل:
assets/javascripts/discourse/app/templates/about.gjs. - انسخ المحتوى الكامل لملف
about.gjsالأصلي (الرابط الذي قدمته) إلى ملفabout.gjsالخاص بمكون السمة الخاص بك. - قم بتعديل نسختك. ابحث عن الأقسام التي تتكرر عبر المسؤولين والمشرفين، على الأرجح باستخدام
{{#each this.admins as |admin|}}و{{#each this.moderators as |moderator|}}. داخل هذه الحلقات، يمكنك الوصول إلى كائن المستخدم (على سبيل المثال،adminأوmoderator). أضف حقل “نبذة عني”، والذي يجب أن يكون متاحًا عبر خاصية مثلadmin.profile.bio_rawأوmoderator.profile.bio_raw. ستحتاج إلى دمج هذا في بنية قالب GlimmerJS. على سبيل المثال، قد تضيف علامة<div>أو<p>جديدة داخل كتلة عرض المستخدم:
(ملاحظة: استخدم{{#each this.admins as |admin|}} <div class="user"> {{!-- Existing user info like avatar, username, name --}} <UserAvatar @username={{admin.username}} @size="large" /> <div class="user-details"> <span class="username">{{admin.username}}</span> {{#if admin.name}}<span class="name">{{admin.name}}</span>{{/if}} {{#if admin.title}}<span class="title">{{admin.title}}</span>{{/if}} {{!-- Add the About Me section --}} {{#if admin.profile.bio_raw}} <div class="about-me"> {{{admin.profile.bio_cooked}}} {{!-- Use bio_cooked for rendered HTML --}} {{!-- Or use bio_raw if you need the raw text: <p>{{admin.profile.bio_raw}}</p> --}} </div> {{/if}} </div> </div> {{/each}} {{!-- Repeat similar modification for the moderators loop --}}bio_cookedإذا كنت تريد الإصدار المعروض من HTML للسيرة الذاتية، أوbio_rawللنص العادي. اضبط بنية HTML حسب الحاجة لتخطيطك.)
- في مكون السمة الخاص بك، أنشئ الملف في المسار المقابل:
- تمكين المكون: تأكد من إضافة مكون السمة إلى السمة الخاصة بك وأنه نشط.
يظل العيب كما هو: تجاوز القوالب الأساسية مثل هذا يعني أنك قد تحتاج إلى تحديث نسخة مكون السمة الخاص بك يدويًا إذا تغير ملف about.gjs الأصلي بشكل كبير في تحديثات Discourse المستقبلية. ومع ذلك، نظرًا لعدم وجود مخرج أكثر تحديدًا، فهذه هي الطريقة القياسية لتحقيق هذا المستوى من التخصيص.