بطاقات التحويم للمواضيع

:information_source: الملخص يعرض بطاقات مواضيع قابلة للتخصيص بشكل كبير كإشارات تلميح عند تمرير الماوس فوق روابط المواضيع
:eyeglasses: معاينة Github Readme
:hammer_and_wrench: المستودع https://github.com/denvergeeks/discourse-topic-hover-cards
:question: دليل التثبيت كيفية تثبيت سمة أو مكون سمة
:open_book: جديد في سمات Discourse؟ دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

بطاقات معاينة غنية عند التمرير فوق روابط المواضيع الداخلية عبر المواضيع، الردود، قوائم المواضيع، الصفحة الرئيسية للفئات، فئات الوثائق، لوحات كانبان، والمواضيع المقترحة.

عندما يمرر المستخدم الماوس فوق رابط موضوع (أو يلمسه على الهاتف المحمول)، تظهر بطاقة تحتوي على صورة مصغرة للموضوع، والعنوان، والمقتطف، والفئة، والوسوم، والإحصائيات الرئيسية.

الميزات

  • بطاقات تلميح لروابط المواضيع الداخلية في:
    • جسم الموضوع (المنشور الأصلي)
    • الردود
    • قوائم المواضيع القياسية (/latest، /top، /tags، قوائم مواضيع الفئات، إلخ)
    • قوائم مواضيع الصفحة الرئيسية للفئات (الفئات + الأحدث، الفئات فقط، وتخطيطات ذات صلة)
    • عروض فئات الوثائق
    • عروض لوحات بأسلوب كانبان
    • المواضيع المقترحة
  • تخطيط متجاوب:
    • بطاقة سطح مكتب بكثافة قابلة للتكوين ووضع الصورة المصغرة
    • معاينة من الأسفل على الهاتف المحمول مع فتح عند اللمس
  • محتوى قابل للتكوين:
    • الصورة المصغرة
    • شارة الفئة
    • الوسوم
    • العنوان
    • المقتطف (نظيف من الصور/الصناديق الخفيفة)
    • الناشر الأصلي
    • تاريخ النشر
    • المشاهدات، الردود، الإعجابات، آخر نشاط
  • خيار إلغاء الاشتراك لكل مستخدم باستخدام حقل مستخدم مخصص
  • وضع تصحيح أخطاء خاص بالإدارة فقط لاستكشاف الأخطاء وإصلاحها بأمان
الإعدادات

التخطيط & التوقيت

  • card_width
    أي قيمة عرض CSS (لسطح المكتب)، مثل 32rem، 420px، 40vw، clamp(20rem, 40vw, 36rem).

  • card_max_height
    أي قيمة أقصى ارتفاع CSS، مثل 10rem، 480px، 50vh، min(60vh, 32rem).

  • card_delay_ms
    التأخير قبل إظهار بطاقة التلميح، بالميلي ثانية (الافتراضي: 300).

  • enable_on_mobile
    عند التفعيل، يظهر اللمس على رابط موضوع داخلي مدعوم ورقة معاينة للهاتف المحمول.

  • mobile_width_percent
    عرض ورقة المعاينة السفلية للهاتف المحمول كنسبة مئوية من عرض عرض الشاشة (الافتراضي: 100).

  • mobile_thumbnail_height
    ارتفاع الصورة المصغرة بالبكسل لمعاينة الهاتف المحمول.

الكثافة

  • density
    كثافة سطح المكتب: default، cozy، أو compact.

  • density_mobile
    كثافة الهاتف المحمول: default، cozy، أو compact.

هذه موازية لأنماط “الكثافة” في Discourse وتضبط فقط الحشو وارتفاعات الأسطر.

الصورة المصغرة & الوضع

  • show_thumbnail / show_thumbnail_mobile
    إظهار/إخفاء صورة الموضوع (إن وجدت) على سطح المكتب والهاتف المحمول.

  • thumbnail_placement
    كيفية وضع الصورة المصغرة على سطح المكتب:

    • top
    • left
    • right
    • bottom
      على الهاتف المحمول، يتم عرض الصورة المصغرة دائمًا في أعلى البطاقة.
  • image_size_percent
    لتخطيطات سطح المكتب left و right، يتحكم في عرض الصورة المصغرة كنسبة مئوية من عرض بطاقة التلميح.

الحقول لكل عرض شاشة

لكل كتلة أدناه، لديك مفاتيح تشغيل/إيقاف لكل من سطح المكتب والهاتف المحمول:

  • show_category / show_category_mobile

  • show_tags / show_tags_mobile

  • show_title / show_title_mobile

  • show_excerpt / show_excerpt_mobile

  • excerpt_length / excerpt_length_mobile
    عدد الأسطر للمقتطف (CSS line-clamp).

  • show_op / show_op_mobile
    يعرض صورة رمزية واسم المستخدم للناشر الأصلي.

  • show_publish_date / show_publish_date_mobile

  • show_views / show_views_mobile

  • show_reply_count / show_reply_count_mobile

  • show_likes / show_likes_mobile

  • show_activity / show_activity_mobile

أين تظهر بطاقات التلميح

  • enable_on_topics
    روابط المواضيع في المنشور الأصلي.

  • enable_on_replies
    روابط المواضيع في الردود.

  • enable_on_topic_lists
    روابط المواضيع في قوائم المواضيع القياسية، مثل /latest، /top، قوائم مواضيع الفئات.

  • enable_on_category_homepage_topic_lists
    روابط المواضيع في قوائم “المواضيع الأحدث” أو ما يعادلها على الصفحة الرئيسية للفئات:

    • الفئات + المواضيع الأحدث
    • الفئات فقط
    • المتغيرات ذات الصلة المعروضة في / أو /categories، اعتمادًا على كيفية تكوين صفحتك الرئيسية.
  • enable_on_doc_categories
    روابط المواضيع في عروض فئات الوثائق (عند الاقتضاء).

  • enable_on_kanban_boards
    روابط المواضيع المعروضة في تخطيطات لوحات بأسلوب كانبان (عند الاقتضاء).

  • enable_on_suggested_topic_links
    الروابط في قسم “المواضيع المقترحة”.


خيار إلغاء الاشتراك لكل مستخدم

يمكنك السماح للمستخدمين الأفراد بتعطيل بطاقات التلميح باستخدام حقل مستخدم مخصص. يستخدم هذه الميزة آلية إعدادات السمات القياسية ووصول بيانات المستخدم الحالي الموصوفة في أدلة المطورين.

  • user_preference_field_name
    المفتاح المستخدم للكشف عن خيار إلغاء الاشتراك لدى المستخدم الحالي. يمكن أن يكون:
    • مفتاح حقل مخصص مباشر، مثل disable_topic_hover_cards
    • رقم معرف، مثل 1
    • مفتاح user_field_X، مثل user_field_1

كيف يعمل التطابق

  1. يتحقق المكون أولاً من custom_fields و user_fields للمستخدم الحالي بحثًا عن:
    • user_preference_field_name المconfigured
    • نفس القيمة المحولة بين 1 و user_field_1 عند الاقتضاء
  2. إذا لم يتم العثور على تطابق وكان المستخدم الحالي من الموظفين (مدير/مراقب) وتم تفعيل resolve_user_field_id_for_admins، يقوم المكون بالاستدعاء على:
    • /admin/config/user-fields.json
      لربط القيمة المconfigured (اسم الحقل أو user_field_X) بمعرفه الرقمي.
  3. باستخدام المعرف الرقمي، يتحقق من:
    • user_fields[id]
    • user_fields['user_field_' + id]
    • custom_fields[id]
    • custom_fields['user_field_' + id]

أي قيمة صحيحة في هذه المواضع (مثل 1، true، yes، on، checked) تعطل بطاقات التلميح لذلك المستخدم.

الإعدادات لهذا السلوك

  • resolve_user_field_id_for_admins
    عند التفعيل (موصى به)، يمكن للمديرين تكوين الحقل إما بالاسم أو user_field_X، وسيقوم المكون بحل المطابقة مع المعرف الرقمي تلقائيًا.

  • debug_mode
    عند التفعيل، يسجل معلومات كشف مفصلة في وحدة تحكم المتصفح للموظفين، بما في ذلك:

    • المفاتيح التي تم فحصها
    • أين تم العثور على تطابق (المستخدم الحالي مقابل سجل المستخدم الكامل)
    • معرف حقل المستخدم الرقمي المحلول، إن وجد

تصحيح الأخطاء

إذا لم تظهر بطاقات التلميح حيث تتوقع، استخدم وضع تصحيح الأخطاء المدمج:

  1. فعّل debug_mode في إعدادات هذا المكون.
  2. افتح وحدة تحكم مطور المتصفح.
  3. مرر أو المس رابط موضوع ذي صلة.

سترى رسائل مشابهة لـ:

  • Hover cards initialized – يؤكد التهيئة والمواقع المفعلة.
  • Resolved admin user-field mapping – يؤكد ربط اسم/مفتاح حقل المستخدم المconfigured بمعرفه الرقمي (للموظفين).
  • No disable field match found anywhere – يؤكد أن بطاقات التلميح لا يتم كبتها للمستخدم الحالي.

لتصحيح الأخطاء أين يجب أن تظهر البطاقة، تأكد من:

  • أن رابطك المستهدف هو رابط موضوع داخلي (/t/...) يمكن لـ topicIdFromHref() تحليله
  • أن علم الموقع ذي الصلة مفعّل:
    • enable_on_topics
    • enable_on_replies
    • enable_on_topic_lists
    • enable_on_category_homepage_topic_lists
    • enable_on_doc_categories
    • enable_on_kanban_boards
    • enable_on_suggested_topic_links
إعجاب واحد (1)

هل يمكنك إضافة رابط معاينة يعمل أو بعض لقطات الشاشة لإظهار مظهر هذا؟

7 إعجابات