شرح اضافة كم عدد المشاهدين الذين يُشاهدون القسم - الزين فورو

[codeNET]

طريقة عرض عدد الزوار والمشاهدين لكل قسم في XenForo (هاك يشاهد الآن)

---

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

ملاحظة تقنية هامة: في هذا الشرح، اعتمدنا على جلب البيانات من "كاش الأقسام" (Node Cache) الذي يوفره XenForo افتراضياً، ولم نقم بإنشاء استعلامات PHP مباشرة لقاعدة البيانات.
السبب: الاستعلام المباشر (Direct Query) في كل مرة يتم فيها تحميل الصفحة الرئيسية سيجعل السيرفر يقوم بعمليات فحص لجدول الجلسات (Sessions) لكل قسم على حدة، مما يؤدي إلى استهلاك كبير لموارد السيرفر (CPU & RAM) وربما بطء في تصفح المنتدى إذا كان عدد الزوار كبيراً. أما طريقة الكاش فهي تجلب أرقاماً جاهزة ومخزنة مسبقاً، مما يحافظ على سرعة الموقع بنسبة 100%.

خطوات التطبيق عبر تعديلات القوالب (Template Modifications):
أولاً: تعديل القالب الأساسي
1. توجه إلى لوحة تحكم المنتدى > المظهر > تعديلات القوالب.
2. اضغط على إضافة تعديل قالب واملأ البيانات التالية:

• القالب: node_list_forum
  
• مفتاح التعديل: codenet_watching_now
  
• نوع البحث: Regular expression
  

خانة البحث:

/(<h3 class="node-title">.*?</h3>)/s

خانة الاستبدال:

$1
<xf:if is="{$node.Data.cache.visitor_count} > 0">
<span class="watching-now-badge" title="يشاهدون هذا القسم الآن">
<i class="fas fa-eye"></i> {{ {$node.Data.cache.visitor_count}|number }} يشاهد الآن
</span>
</xf:if>

ثانياً: تنسيق المظهر (CSS)
لإعطاء الإضافة شكلاً احترافياً وعصرياً، توجه إلى قالب extra.less وأضف الكود التالي:

/* هاك يشاهد الآن - كود نت */
.watching-now-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
background: rgba(39, 174, 96, 0.15);
color: #27ae60;
padding: 2px 10px;
border-radius: 20px;
margin-right: 8px;
font-weight: 600;
border: 1px solid rgba(39, 174, 96, 0.2);
vertical-align: middle;
}
.watching-now-badge i {
margin-left: 5px;
animation: watchingPulse 2s infinite ease-in-out;
}
@keyframes watchingPulse {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
100% { transform: scale(1); opacity: 1; }
}

---

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