[ XF 2.2 ] كيفية إضافة القطع في تبويبات متعددة

[MesterPerfect]

بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية إضافة مجموعة من القطع / ويدجات في تبويبات
المعلومات
اسم الشرح: كيفية إضافة القطع في تبويبات
توافق الشرح: xf2.0/xf2.1/xf2.2
مقدم الشرح: أحمد بكر @MesterPerfect
تمت التجربة: نعم

معلومات
القطع أو الويدجات "widget" هي أحدى الإشياء الجميلة التي تستخدمها جميع السكربتات لتنسيق وتنظيم المحتوى الخاص بها وإضافته إلى الشريط الجانبي "Sidebar" أو إلى أي مكان
وبالتأكيد XenForo استفاد من هذه القطع واستخدمها في عمل الشريط الجانبي المميز للسكربت وأتاح أمكانية إنشائها وإدراجها بأكثر من شكل وطريقة مختلفة
واليوم سوف نتعرف على كيفية جمع أكثر من قطعة في طريقة عرض واحدة عن طريق ما يعرف بالتبويبات tabs
لتقليل المساحة المستخدمة وإدراج أكثر من قطعة في مكان واحد
وسيتضح الأمر أكثر بعد الشرح

الشرح

ندخل إلى لوحة التحكم ==> المظهر ==> القطع
نضغط على إضافة قطعة

نقوم بإنشاء ثلاث قطع بالمعلومات التالية دون إضافة أي شيء
يعني المفتاح وفقط

القطعة	المفتاح
المشاركات الجديدة	lastest_threads
المواضيع الجديدة	lastest_post
مشاركات الحائط	lastest_profile_post

طبعا يمكنكم كتابة أي مفتاح تريدوه ولكن لا تنسوه لأننا سنحتاجه
الآن بعد أن أنشأنا القطع يأتي دور جمعها في تبويبات
ومن أجل ذلك نقوم بإنشاء قطعة رابعة وتكون html
نعطيها أي مفتاح ثم نختر مكان العرض وليكن قائمة المنتديات: الشريط الجانبي
ثم نضع فيها هذا الكود مع تعديل ما سيتم التحدث عنه بالأسفل

<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="lastest_threads">المواضيع</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="lastest_post"
                        role="tab">المشاركات</a>
                 <a href="{{ link('whats-new/profile-posts/') }}?skip=1"
                        class="tabs-tab"
                        id="lastest_profile_post"
                        role="tab">الحائط</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="lastest_threads">
                 <xf:widget key="lastest_threads" />
             </li>  
             <li role="tabpanel" aria-labelledby="lastest_post">
                 <xf:widget key="lastest_post" />
             </li>
             <li role="tabpanel" aria-labelledby="lastest_profile_post">
                 <xf:widget key="lastest_profile_post" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

اتفقنا بالأعلى أن لكل قطعة مفتاح مميز لها
ولقد إنشأنا ثلاث قطع بثلاث مفاتيح على الشكل التالي

القطعة	المفتاح
المشاركات الجديدة	lastest_threads
المواضيع الجديدة	lastest_post
مشاركات الحائط	lastest_profile_post

وسنجد المفاتيح تلك مكررة في ثلاث مواضع من الكود
مثال على قطعة المشاركات الجديدة
مفتاحها مكرر في الكود
هنا

aria-controls="lastest_threads">المواضيع</a>

وهو الكود المسؤول عن إظهار القطعة
وهنا

<li class="is-active" role="tabpanel" id="lastest_threads">

وهو الكود المسؤول عن الكلاس الخاص بتخصيص شكل القطعة
وهنا

<xf:widget key="lastest_threads" />

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

ملحوظة
هناك كود رابع داخل الكود الرئيسي أحب أن ألفت الأنظار إليه وهو هذا الكود

"{{ link('whats-new/profile-posts/') }}?skip=1"

يتم تعديل هذا الكود في حال استدعيناَ قطعة لها صفحة مثل المشاركات الجديدة أو مشاركات الحائط أو المواضيع الجديدة
بالمتغير الذي يشير إلى رابط تلك الصفحة
وإليكم بعضها

القطعة	المفتاح
خلاصة الأخبار الخاصة بك	whats-new/news-feed
آخر النشاطات	whats-new/latest-activity
منتجات جديدة	whats-new/resources/

وطبعا يتم جلب المتغير من رابط الصفحة كي لا تظنو الأمر صعبا
مثال على خلاصة الأخبار الخاصة بك
https://xenarabia.com/whats-new/news-feed
المهم
علينا تغيير تلك المتغيرات إذا جلبنا صفحات مختلفة عن الموجودة بالأعلى
أما لو استخدمنا قطع ليس لها صفحة معينة كالإحصائيات أو مشاركة أو غير ذلك فيمكن الإستغناء عن الكود أصلا

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

 

[أبو غَيْث]

ما شاء الله عليك أخي أحمد
درس في غاية الروعة و الشرح مبسط لابعد الحدود
و الطريقة جد جد رائعة
سلمت اناملك و دوما تاتي بالجديد فالله لا يحرمنا منك ومن جديدك

 

[sky55]

مجهود رائع وشرح مميز ومفصل
تحيتي لك

 

[Alrajabane]

موضوع رائع وشرح وافي ..
ماقصرت اخوي احمد .
بارك الله فيك وفي مجهودك يالغالي ..

 

[MesterPerfect]

ما شاء الله عليك أخي أحمد
درس في غاية الروعة و الشرح مبسط لابعد الحدود
و الطريقة جد جد رائعة
سلمت اناملك و دوما تاتي بالجديد فالله لا يحرمنا منك ومن جديدك

سلمك الله أخي الحبيب محمد
نرجو أن نكون دائما عند حُسن ظن أخوتنا الكرام
تحياتي لك يالغالي

 

[MesterPerfect]

مجهود رائع وشرح مميز ومفصل
تحيتي لك

الأروع مرورك أخي الكريم
حياك الله

 

[النوميدي]

موضوع رائع وشرح مميز ..
بارك الله فيك وفي مجهودك ياطيب ..،​

 

[MesterPerfect]

موضوع رائع وشرح وافي ..
ماقصرت اخوي احمد .
بارك الله فيك وفي مجهودك يالغالي ..

الأروع مرورك أخي الحبيب بشير
وفيك الله بارك يالغالي
أسعدني مرورك

 

[MesterPerfect]

موضوع رائع وشرح مميز ..
بارك الله فيك وفي مجهودك ياطيب ..،​

الأروع مرورك أخي الحبيب النوميدي
وفيك الله بارك يالغالي
أسعدني مرورك