إخفاء وإظهار الأقسام في XenForo بسهولة | شرح

في أنظمة المنتديات المبنية على XenForo، واحدة من أكثر المزايا اللي بتهم أصحاب المواقع هي إخفاء وإظهار الأقسام (Collapsible Categories) في الصفحة الرئيسية. الفكرة بسيطة لكن تأثيرها كبير على تجربة المستخدم وتنظيم المحتوى 👌
بدل ما تزود إضافات خارجية ممكن تبطّأ الموقع، تقدر تعمل الميزة دي يدويًا بسهولة عن طريق تعديل القوالب.

في البوست ده هتتعلم خطوة بخطوة إزاي تعمل Collapsible Categories في XenForo بدون أي Add-ons، وبشكل احترافي وسريع.

​

ما هي ميزة إخفاء وإظهار الأقسام في XenForo؟ 🤔​

ميزة Collapsible Category بتسمح لك إنك:

• تخفي الأقسام في الصفحة الرئيسية
• أو تظهرها عند الضغط فقط
• تحسين تجربة التصفح للمستخدمين
• تقليل الزحمة في الصفحة الرئيسية

الميزة دي مهمة جدًا خصوصًا لو عندك منتدى كبير فيه أقسام كتير.

---

ليه نستخدم تعديل يدوي بدل الإضافات؟ ⚙️​

رغم وجود إضافات كثيرة بتعمل نفس الوظيفة، لكن التعديل اليدوي له مميزات قوية:

• سرعة أفضل للموقع 🚀
• تقليل الضغط على السيرفر
• تحكم كامل في التصميم
• بدون تعارضات مع الإضافات الأخرى

---

تعديل قالب node_list_category 🔧​

علشان تفعل ميزة الإخفاء والإظهار، هتحتاج تعدل قالب: node_list_category
واستبدله بالكامل بالكود التالي:

<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id} collapsible-nodes">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
            <div class="block-header--left">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}">
                    <div class="block-desc">{$node.description|raw}</div>
                </xf:if>
            </div>

            <span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active"
                data-xf-click="toggle"
                data-xf-init="toggle-storage"
                data-target=".block--category{$node.node_id} .block-body"
                data-storage-key="_node-{$node.node_id}">
            </span>

            </h2>

            <div class="block-body block-body--collapsible is-active">
                <xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

---

تعديل تصميم الزر في extra.less 🎨​

بعد تعديل القالب، نحتاج نضيف CSS للتحكم في شكل زر الإخفاء والإظهار.
افتح ملف extra.less وأضف الكود التالي:

.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;

        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }

        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }

    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
    .block-header
    {
        display: flex;
    }

    .block-header--left
    {
        margin-right: auto;
        max-width: 100%;
    }

    .block-body
    {
        transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        overflow-y: hidden;
        height: 0;

        &.is-active
        {
            height: auto;
        }
    }
}

---

كيف تعمل الفكرة تقنيًا؟ 🧠​

الفكرة هنا بسيطة جدًا:

• بنستخدم toggle-storage في XenForo
• لحفظ حالة القسم (مفتوح أو مغلق)
• وبنغير عرض .block-body باستخدام CSS
• مع تأثير انيميشن ناعم عند الفتح والإغلاق

---

مميزات النظام بعد التعديل ⭐​

بعد تطبيق التعديل هتحصل على:

• واجهة أنظف للمنتدى
• تجربة مستخدم أفضل
• تحكم كامل بدون إضافات
• أداء أسرع للصفحة الرئيسية
• دعم كامل لحالة الحفظ (Open/Close State)

---

نصائح لتحسين الأداء 💡​

• لا تستخدم إضافات كثيرة لنفس الوظيفة
• حافظ على CSS بسيط وخفيف
• جرّب التعديل على نسخة احتياطية أولاً
• راقب سرعة الموقع بعد التعديل

---

الخلاصة 📌​

ميزة إخفاء وإظهار الأقسام في XenForo تعتبر من أهم تحسينات تجربة المستخدم في المنتديات الكبيرة.
والأجمل إنك تقدر تطبقها بدون أي إضافات وبأداء أفضل باستخدام تعديل بسيط في القوالب وملف CSS.