لا يمكن إضافة فئة جديدة إلى عناصر صفحة الموضوع باستخدام jQuery؟

أنا أجد صعوبة في تعلم المزيد حول كيفية عمل discourse وما زلت مرتبكًا بعد قراءة هذا. أحاول إضافة عنوان ديناميكي لاسم المستخدم الخاص بالمسؤول في صفحة المنشور باستخدام jQuery لكن الأمر لا يعمل.

لكن إذا استهدفت، على سبيل المثال، وسم body وأضفت فئة (class)، فإنه يعمل.
إذًا هل يمكن لأحد أن يشرح لي لماذا لا يعمل؟
الكود مُدرج في تبويب الرأس (header) على أي حال.

<script>
  $(".names span.admin a").attr('title', 'Community Admin');
</script>

هل أحتاج إلى حقن هذا في منفذ إضافة (plugin outlet) أم شيء من هذا القبيل؟

على الأرجح لأن jQuery في هذه الحالة لا يتفاعل بشكل جيد مع خط أنابيب عرض Ember و Widget.

كما ترون في هذا السكربت، لا تملك أي تحكم في وقت حدوث هذا الحدث أو في علاقته بمكان وصول تطبيق JavaScript أثناء رسم الشاشة.

ومع ذلك، توجد طريقة في واجهة برمجة التطبيقات (API) الخاصة بـ JavaScript للتعامل مع هذا الأمر، راجع المزيد هنا:

decorateWidget()

وهذا الـ Widget المحدد:

ومع ذلك، قبل أن تغوص في هذا العمق، دعنا نرجع خطوة للوراء: هل تريد فقط عرض عنوان؟

على سبيل المثال، في منشورات Jeff:

لديه عنوان: “مؤسس مشارك”

ما عليك سوى إنشاء مجموعة جديدة، وإضافة المدراء، ثم الانتقال إلى إدارة => العضوية وتعديل العنوان الافتراضي.

الآن يمكنهم اختيار هذا العنوان في إعدادات حسابهم ضمن التفضيلات (أو يمكنك فعل ذلك نيابةً عنهم).

يمكنك أيضًا استخدام هذه الميزة لعرض تمييز (Flair) خاص للصورة الرمزية (كما هو موضح في لقطة الشاشة أعلاه).

من الواضح أنه إذا لم ترغب في أن يكون هذا الأمر “ثابتًا” بهذه الطريقة، فستضطر إلى النظر في خيار البرمجة، لكنني متأكد من أنك توافقني على أن هذا الخيار يتطلب جهدًا أقل بكثير.

5 إعجابات

شكرًا لمساعدتك. هذا ليس عنوان المنتدى الفعلي الذي أبحث عنه، بل لعرض عنوان عند تمرير الماوس فوق أيقونة التاج الصغيرة التي صنعتها (مرئية فقط للمسؤولين):

بالمناسبة، كود CSS الخاص بهذا هو:

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

رائع.

يبدو أنك قد ترغب في التفكير في مسار الودجت.

كما يمكنك النظر في طريقة واجهة برمجة التطبيقات هذه:

api.reopenWidget("poster-name", {

      html() {
          <<your-code-here-but-consider-using-the-original-as-template>>
      }
}

أنصحك بالنظر في: A tour of how the Widget (Virtual DOM) code in Discourse works

إن تنفيذ هذا النوع من الأمور في Discourse يتطلب جهدًا أكبر بكثير لأنها تطبيق ويب تلقائي السحر، ولكن بمجرد تنفيذها بشكل صحيح، يمكن أن يكون الحل قويًا جدًا.

5 إعجابات

رائع، شكرًا جزيلاً. سأقوم بمراجعة الأمر وسأشارك الحل إذا نجحت. للوهلة الأولى، يبدو Discourse مخيفًا عندما يتعلق الأمر بالتخصيص، وكنت أعتقد أن WordPress صعب :smile:. لكن، بالتأكيد بمجرد أن أعتاد على كل هذه الأمور المتعلقة بالملحقات والقوالب، أعتقد أنها ستصبح أسهل.

في الواقع، بوم، قد يكون هناك حل أسهل حتى:

فكّر في استخدام هذه الطريقة في واجهة برمجة التطبيقات (API) لاستبدال درع المشرف العادي:

 api.replaceIcon('shield-alt', 'crown');

ثم غيّر نص تلميح الأداة هنا:

عندها قد يصبح تنسيق CSS الأصلي لديك غير ضروري (مع إمكانية إعادة تلوين الأيقونة).

3 إعجابات

لكن هذا سيؤدي إلى إزالة أيقونة الدرع للمشرفين، أليس كذلك؟ لأنني لا أريد ذلك. أحتاج إلى إضافة أيقونة التاج والنص العائم فقط للمسؤولين، لأنهم لا يملكون أيًا منها على صفحة المنشورات.

إعجاب واحد (1)

آه، نعم، لقد اعتدت على المواقع التي أكون فيها مشرفًا ومديرًا في آن واحد. إذا قمت بفصل هذين الدورين، فلن يعمل ذلك (أي أن المدراء لا يكونون مشرفين أبدًا). ستحتاج إلى منح المدراء حقوق المشرفين.

لذلك، استكشف الخيارات الأخرى.

إعجاب واحد (1)

جرب هذا:

api.reopenWidget("poster-name", {
  posterGlyph(attrs) {
    if (attrs.moderator || attrs.groupModerator) {
      return iconNode("shield-alt", {
        title: I18n.t("user.moderator_tooltip"),
      });
    };
    if (attrs.admin) {
      return iconNode("crown", {
        title: I18n.t("user.admin_tooltip"),
      });
    }
  }
})

و

يعمل لدي:

في هذه الحالة، المستخدم الأول هو مدير ومُعدّل في آن واحد، بينما المستخدم الثاني هو مدير فقط. يمكنك تحسين هذا المنطق؛ اجعل التاج يتقدم عبر تبديل ترتيب عبارات if.

إعجاب واحد (1)

يبدو ذلك كحل، ولكن كما ذكرت، أنا جديد في تخصيص Discourse.. هل يمكنك من فضلك شرح المكان الدقيق الذي يجب أن ألصق فيه الكود الخاص بك، حيث لم أجرب أي طريقة API حتى الآن.

… امنحني لحظة، سأبني هذا بشكل صحيح لك

حسناً، هذا الآن مكون سمة:

(Installing a theme or theme component)

يُعطى دور المشرف الأولوية — افتراضياً، سيظهر تاج للمشرف الذي لديه أيضاً دور المراقب.

يمكنك الآن تكوين الأيقونة حسب نوع الموظف.

تأكد فقط من إضافة أسماء الأيقونات إلى إعداد مجموعة أيقونات SVG (وإلا فلن تظهر):

قم بتخصيص نص العنوان هنا:

وبالمثل بالنسبة للمراقب.

5 إعجابات

رائع :slightly_smiling_face:. شكرًا جزيلاً لمساعدتك!

من دواعي سروري (كان هذا ممتعًا جدًا!)

إعجابَين (2)

لقد قمت بتحديث TC بحيث يقوم الآن بتغيير أيقونات الموظفين على بطاقة المستخدم أيضًا (وربما في أماكن أخرى نظرًا لأنني عدلت الدالة المساعدة).

أصبح من الممكن الآن تخصيص الأيقونات لكل من المسؤول والمُشرف، مع اعتبار التاج هو الافتراضي للمسؤول، بينما الدرع العادي هو الافتراضي للمُشرف.

لقد قمت بإعادة تسمية TC.

من المؤكد أن هناك أماكن لم يتم فيها تحويل الأيقونات، ربما سألتقط المزيد منها في المستقبل.

3 إعجابات

شكراً جزيلاً! لقد ساعدني هذا فيما أردت فعله لمنتدى الخاص بي! أعتقد أنه يجب تثبيت تعليقك للمستخدمين الآخرين الذين يواجهون مشكلات في عرض أيقونة بجوار أسمائهم كمسؤول. لقد استخدمت ميزتك لعرض أيقونة الدرع التي تظهر علنًا في ملف تعريف المشرفين للمسؤولين. الآن، يمكنني الحصول على أيقونة الدرع دون الحصول على أذونات المشرف ولديها تلميح الأداة الصحيح للمسؤول عندما يكون لدي فقط أذونات المسؤول. شكراً جزيلاً على وقتك لإنشاء هذه المكون الرائع لمنتديات الأشخاص!

تعديل: لا تظهر علنًا في ملفهم الشخصي. إنها تعمل حاليًا فقط على المشاركات.

إعجاب واحد (1)

على الرحب والسعة. لا تتردد في النسخ والتوسيع وتقديم طلبات سحب!

إعجابَين (2)