بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية إضافة مجموعة من القطع / ويدجات في تبويبات
المعلومات
اسم الشرح: كيفية إضافة القطع في تبويبات
توافق الشرح: xf2.0/xf2.1/xf2.2
مقدم الشرح: أحمد بكر @MesterPerfect
تمت التجربة: نعم
معلومات
القطع أو الويدجات "widget" هي أحدى الإشياء الجميلة التي تستخدمها جميع السكربتات لتنسيق وتنظيم المحتوى الخاص بها وإضافته إلى الشريط الجانبي "Sidebar" أو إلى أي مكان
وبالتأكيد XenForo استفاد من هذه القطع واستخدمها في عمل الشريط الجانبي المميز للسكربت وأتاح أمكانية إنشائها وإدراجها بأكثر من شكل وطريقة مختلفة
واليوم سوف نتعرف على كيفية جمع أكثر من قطعة في طريقة عرض واحدة عن طريق ما يعرف بالتبويبات tabs
لتقليل المساحة المستخدمة وإدراج أكثر من قطعة في مكان واحد
وسيتضح الأمر أكثر بعد الشرح
الشرح
ندخل إلى لوحة التحكم ==> المظهر ==> القطع
نضغط على إضافة قطعة
نقوم بإنشاء ثلاث قطع بالمعلومات التالية دون إضافة أي شيء
يعني المفتاح وفقط
طبعا يمكنكم كتابة أي مفتاح تريدوه ولكن لا تنسوه لأننا سنحتاجه
الآن بعد أن أنشأنا القطع يأتي دور جمعها في تبويبات
ومن أجل ذلك نقوم بإنشاء قطعة رابعة وتكون html
نعطيها أي مفتاح ثم نختر مكان العرض وليكن قائمة المنتديات: الشريط الجانبي
ثم نضع فيها هذا الكود مع تعديل ما سيتم التحدث عنه بالأسفل
اتفقنا بالأعلى أن لكل قطعة مفتاح مميز لها
ولقد إنشأنا ثلاث قطع بثلاث مفاتيح على الشكل التالي
وسنجد المفاتيح تلك مكررة في ثلاث مواضع من الكود
مثال على قطعة المشاركات الجديدة
مفتاحها مكرر في الكود
هنا
وهو الكود المسؤول عن إظهار القطعة
وهنا
وهو الكود المسؤول عن الكلاس الخاص بتخصيص شكل القطعة
وهنا
وهو الكود الخاص باستدعاء القطعة داخل التبويبة عن طريق مفتاحها المميز الذي أعطيناه لها
طبعا نقوم بتعديل المفاتيح الموجودة في الكود بالمفاتيح التي وضعناها عند إنشاء كل قطعة
ونقوم بتغيير الإسم العربي الذي ستظهر به القطعة حسب ما نريد
ثم نضغط حفظ
النتيجة النهائية تكون هاكذا
ملحوظة
هناك كود رابع داخل الكود الرئيسي أحب أن ألفت الأنظار إليه وهو هذا الكود
يتم تعديل هذا الكود في حال استدعيناَ قطعة لها صفحة مثل المشاركات الجديدة أو مشاركات الحائط أو المواضيع الجديدة
بالمتغير الذي يشير إلى رابط تلك الصفحة
وإليكم بعضها
وطبعا يتم جلب المتغير من رابط الصفحة كي لا تظنو الأمر صعبا
مثال على خلاصة الأخبار الخاصة بك
المهم
علينا تغيير تلك المتغيرات إذا جلبنا صفحات مختلفة عن الموجودة بالأعلى
أما لو استخدمنا قطع ليس لها صفحة معينة كالإحصائيات أو مشاركة أو غير ذلك فيمكن الإستغناء عن الكود أصلا
ختاما
طبعا درس طويل على شيء بسيط أنا أعرف ذلك
ولكن من يتمعن في الأمر فسيجد أن الأمر يستحق وأنا أحببت تفصيله لأبعد الحدود كي يستطيع كل شخص عمل ما يريده هو وليس استخدام ما طرحته انا
وطبعا في حال واجهتكم أي مشكلة في التطبيق فأنا متواجد للمساعدة بإذن الله
وبهذا ينتهي شرحنا لهذا اليوم
ونلقاكم قريبا إن شاء الله
والسَلام عليكم ورحمة الله وبركاته
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية إضافة مجموعة من القطع / ويدجات في تبويبات
المعلومات
اسم الشرح: كيفية إضافة القطع في تبويبات
توافق الشرح: xf2.0/xf2.1/xf2.2
مقدم الشرح: أحمد بكر @MesterPerfect
تمت التجربة: نعم
معلومات
القطع أو الويدجات "widget" هي أحدى الإشياء الجميلة التي تستخدمها جميع السكربتات لتنسيق وتنظيم المحتوى الخاص بها وإضافته إلى الشريط الجانبي "Sidebar" أو إلى أي مكان
وبالتأكيد XenForo استفاد من هذه القطع واستخدمها في عمل الشريط الجانبي المميز للسكربت وأتاح أمكانية إنشائها وإدراجها بأكثر من شكل وطريقة مختلفة
واليوم سوف نتعرف على كيفية جمع أكثر من قطعة في طريقة عرض واحدة عن طريق ما يعرف بالتبويبات tabs
لتقليل المساحة المستخدمة وإدراج أكثر من قطعة في مكان واحد
وسيتضح الأمر أكثر بعد الشرح
الشرح
ندخل إلى لوحة التحكم ==> المظهر ==> القطع
نضغط على إضافة قطعة
نقوم بإنشاء ثلاث قطع بالمعلومات التالية دون إضافة أي شيء
يعني المفتاح وفقط
| القطعة | المفتاح |
|---|---|
| المشاركات الجديدة | lastest_threads |
| المواضيع الجديدة | lastest_post |
| مشاركات الحائط | lastest_profile_post |
الآن بعد أن أنشأنا القطع يأتي دور جمعها في تبويبات
ومن أجل ذلك نقوم بإنشاء قطعة رابعة وتكون html
نعطيها أي مفتاح ثم نختر مكان العرض وليكن قائمة المنتديات: الشريط الجانبي
ثم نضع فيها هذا الكود مع تعديل ما سيتم التحدث عنه بالأسفل
كود:
<div class="block">
<div class="b-container">
<h2 class="widget-tabs b-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 .b-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المهم
علينا تغيير تلك المتغيرات إذا جلبنا صفحات مختلفة عن الموجودة بالأعلى
أما لو استخدمنا قطع ليس لها صفحة معينة كالإحصائيات أو مشاركة أو غير ذلك فيمكن الإستغناء عن الكود أصلا
ختاما
طبعا درس طويل على شيء بسيط أنا أعرف ذلك
ولكن من يتمعن في الأمر فسيجد أن الأمر يستحق وأنا أحببت تفصيله لأبعد الحدود كي يستطيع كل شخص عمل ما يريده هو وليس استخدام ما طرحته انا
وطبعا في حال واجهتكم أي مشكلة في التطبيق فأنا متواجد للمساعدة بإذن الله
وبهذا ينتهي شرحنا لهذا اليوم
ونلقاكم قريبا إن شاء الله
والسَلام عليكم ورحمة الله وبركاته