مرحباً، أحاول القيام بشيء ما. أريد عرض نقاط المستخدم من إضافة Discourse Gamification في أعلى الموقع. على سبيل المثال، إذا كان لدى مستخدم اسمه آدم 700 نقطة، فكيف يمكنني عرض ذلك في قسم الرأس؟ أين يجب أن أضع الكود؟
أعني، ما أريده حقًا هو أن يرى المستخدم نقاطه الخاصة.
مع خالص التقدير!
هذا الطلب ممتاز للغاية؛ أنا أيضًا حريص على معرفة الإجابة.
أعتقد أنه إذا تمكن كل مستخدم من رؤية نقاط مساهمته تحت بطاقة اسمه، فسيعزز ذلك بشكل كبير تفاعل المجتمع.
على الأقل أعطني مثال HTML لتقييمات المستخدمين
ربما هذا؟
“أريد نقل نقاط التشجيع من بطاقات المستخدمين إلى أعلى الصفحة الرئيسية. يجب أن يتمكن المستخدم من رؤية نقاطه. هذه النقاط مأخوذة من لوحة المتصدرين.”
هذا يدعم أسفل الرأس مباشرةً ومسار الموضوع أيضًا
ولكن قد تحتاج إلى بناء المكون بنفسك.
أريد نقل نقاط التشجيع (Cheer Points) من بطاقات المستخدمين إلى أعلى الصفحة الرئيسية. يجب أن يتمكن المستخدم من رؤية نتيجته. هذه النتائج مأخوذة من لوحة الصدارة.
هل سيكون وضع عنصر اللافتة/الرأس هذا شهريًا أم ربع سنويًا أم يوميًا أم أسبوعيًا أم سنويًا أم على الإطلاق؟
إليك واجهة برمجة تطبيقات الرأس الحالية:
ولكن ربما تريد فقط إرفاق مكون بمنفذ
before-header-panel يبدو خيارًا جيدًا.
لا يا سيدي. يجب أن يرى المستخدم درجاته فقط في الرأس. أحتاج إلى إضافة القسم الذي تم إضافته إلى بطاقة الملف الشخصي إلى الرأس. يتم الحصول على هذه النتيجة من لوحة المتصدرين، والتي تعكس النقاط المكتسبة من المهمة
سيستند إلى إجمالي النقاط المكتسبة على مر الزمن.
يجب أن يرى كل مستخدم نتيجته في قسم الرأس في الصفحة الرئيسية. إذا كان هناك رمز أو طريقة للقيام بذلك ، فيرجى إخباري. لقد كنت أكافح لمدة 14 ساعة ، وأنا أقاتل قطتي! 
هناك الكثير من الأمثلة للمكونات. انظر إلى قواعد الشيفرة الخاصة بـ Theme component للاطلاع على أمثلة لمكونات Glimmer .gjs ولاحظ كيف يتم إرفاقها بمنافذ الإضافات (Plugin Outlets).
كان @merefield يشير إلى كيفية بناء هذه المكونة. المسألة هي أن هذه ليست ميزة، لذلك سيتعين إنشاؤها كمكون سمة (Theme Component).
أنا آسف. اعتقدت أنك لم تفهمني لأن لغتي الإنجليزية كانت سيئة. شعرت بالسوء
تم الانتهاء من المهمة
هل تمانع في مشاركة كيف حققت ذلك؟
لقد أنشأت مكونًا جديدًا. استخدمت واجهة برمجة التطبيقات (API) للنقاط. لقد نقلت قسم المستخدم إلى الصفحة الرئيسية.
إنها طريقة مؤقتة ولكنها مفيدة. ربما يريدون تحسينها، أترك الكود هنا
موقع الاختبار: https://trgala.com
Js
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("0.8", (api) => {
api.onPageChange(() => {
const currentUser = api.getCurrentUser();
if (!currentUser) {
console.warn("المستخدم غير مسجل الدخول");
return;
}
fetch(`/u/${currentUser.username}.json`)
.then(response => response.json())
.then(data => {
console.log("بيانات الألعاب:", data);
let score = data?.user?.gamification_score ?? 0;
// إذا كان صندوق النقاط موجودًا بالفعل، فلا تضفه مرة أخرى
if (document.querySelector("#gamification-score")) return;
// ابحث عن حاوية .contents في الرأس
let headerContents = document.querySelector(".d-header>.wrap .contents");
if (headerContents) {
// أنشئ حاوية النقاط
let scoreContainer = document.createElement("a");
scoreContainer.id = "gamification-score";
scoreContainer.classList.add("gamification-box");
scoreContainer.href = "website";
scoreContainer.target = "_blank"; // افتح في علامة تبويب جديدة
// أيقونة ذهبية
let icon = document.createElement("span");
icon.innerText = "T";
icon.classList.add("gold-icon");
// نص النقاط
let scoreText = document.createElement("span");
scoreText.innerText = `${score}`;
scoreText.classList.add("gold-text");
// أضف الأيقونة والنص إلى الصندوق
scoreContainer.appendChild(icon);
scoreContainer.appendChild(scoreText);
// أضف الصندوق إلى الرأس
headerContents.appendChild(scoreContainer);
}
})
.catch(error => console.error("خطأ في جلب نقاط الألعاب:", error));
});
});
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.