How do I customise the styling of "solved topics" in the main list?

ملخص سريع

سيضيف هذا كلاس topic-solution إلى المنشورات التي تم تحديدها كإجابة.

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

تُحدَّد الكلاسات التي يمتلكها المنشور هنا.

الخطاف (hook) الذي تريده موجود بالفعل في نهاية ذلك… على النحو التالي.

توفر واجهة البرنامج المساعد (plugin-api) طريقة تتيح لك إضافة كلاسات إلى منشور بناءً على شرط معين.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L819-L829

ما تفعله هذه الطريقة هو تطبيق استدعاء (callback) معين وإعادة كلاس ليتم إضافته إذا تم استيفاء الشرط.

عند تشغيل الاستدعاء، يقوم Discourse بتمرير سمات المنشور إليه. لذا، يمكنك على سبيل المثال فعل شيء مثل هذا.

api.addPostClassesCallback((attrs) => {
  console.log(attrs);
});

إذا فتحت وحدة التحكم (console)، فستلاحظ أنه يعرض سمات كل منشور.

هذه مجرد أمثلة؛ فهناك المزيد من البيانات هناك.

لحظتك سعيدة، عندما يتم تحديد منشور كحل، يحتفظ Discourse بتتبع ذلك، ويتم إضافته إلى سمات المنشور. يُسمى الخاصية accepted_answer.

لذا، كل ما تحتاجه هو التحقق مما إذا كانت هذه القيمة صحيحة، وإضافة الكلاس المخصص الخاص بك إذا كانت كذلك. على النحو التالي:

api.addPostClassesCallback((attrs) => {
  if (attrs.accepted_answer) return ["topic-solution"];
});

هذا يجب أن يكون كافياً لتبديل الكلاس حتى لو غيّر صاحب الموضوع (OP) رأيه واختار حلاً مختلفاً. سيتم إزالة الكلاس من الإجابة القديمة وإضافته إلى الإجابة الجديدة.