كود عرض المواضيع التفاعلي على احلى منتدى

[Admin]

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

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

في المنتديات التقليدية، يحتاج العضو للدخول إلى القسم ثم العودة للخلف للتنقل بين الأقسام. هذه الإضافة تختصر التجربة وتمنح المستخدم تصفحاً سريعاً وسلساً يشبه المنتديات المتقدمة مثل XenForo وDiscourse.​

فكرة عمل الإضافة​

تعتمد الإضافة على تقنية RSS الرسمية المتاحة في أحلى منتدى، حيث يتم:​

• جلب آخر المواضيع لكل قسم عبر RSS​
• تحويل البيانات إلى صيغة قابلة للعرض​
• تحميل المحتوى ديناميكياً باستخدام JavaScript​
• عرض المواضيع بشكل فوري داخل نفس الصفحة​

كل ذلك بدون الحاجة إلى: قاعدة بيانات او سيرفر خارجي او تعديلات معقدة في القوالب​

مميزات الإضافة​

✔ عرض الأقسام بشكل طولي أنيق في الجانب الأيمن
✔ عرض المواضيع مباشرة في الجانب الأيسر
✔ لكل قسم لون مميز يعبر عنه
✔ أيقونات احترافية باستخدام Font Awesome
✔ تحميل المواضيع بدون إعادة تحميل الصفحة
✔ متوافقة مع جميع استايلات أحلى منتدى
✔ لا تؤثر على سرعة المنتدى أو نظامه
✔ سهلة التركيب والتعديل​

معاينة الاضافة​

​

تركيب الاضافة​

يمكن تركيب الاضافة في صفحة خارجية Html بنسخ الكود كله واضافته لها، ويمكن اضافتها داخليًا بأي صفحة بالمنتدى.​

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="forum-wrapper">
    <div class="sections-column" id="sections"></div>
    <div class="topics-column" id="topics">
        اختر قسم لعرض المواضيع
    </div>
</div>

<style>
.forum-wrapper{
    display:flex;
    gap:20px;
    font-family:Tahoma;
}

.sections-column{
    width:30%;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.section-item{
    padding:12px;
    color:white;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:10px;
    transition:0.3s;
}

.section-item:hover{
    opacity:0.8;
}

.topics-column{
    width:70%;
    background:#f5f5f5;
    padding:15px;
    border-radius:6px;
    min-height:300px;
}

.topic{
    padding:10px;
    border-bottom:1px solid #ddd;
}

.topic a{
    text-decoration:none;
    font-weight:bold;
    color:#333;
}

.topic-meta{
    font-size:12px;
    color:#777;
}
</style>

<script>
const forumUrl = "https://ahla-t.yoo7.com";

const sections = [
    {
        name:"الإعلانات التجارية",
        id:19,
        color:"#e74c3c",
        icon:"fa-bullhorn"
    },
    {
        name:"المنتدى العام",
        id:14,
        color:"#3498db",
        icon:"fa-comments"
    },
    {
        name:"القسم الأدبي",
        id:68,
        color:"#9b59b6",
        icon:"fa-feather"
    },
    {
        name:"الأخبار المحلية والعالمية",
        id:3,
        color:"#27ae60",
        icon:"fa-newspaper"
    },
    {
        name:"تطوير المواقع",
        id:40,
        color:"#f39c12",
        icon:"fa-code"
    }
];

const sectionsContainer = document.getElementById("sections");
const topicsContainer = document.getElementById("topics");

sections.forEach(section=>{
    const div = document.createElement("div");
    div.className="section-item";
    div.style.background = section.color;
    div.innerHTML = `<i class="fas ${section.icon}"></i> ${section.name}`;
    div.onclick = ()=>loadTopics(section.id, section.name, section.color);
    sectionsContainer.appendChild(div);
});

async function loadTopics(id, name, color){
    topicsContainer.innerHTML = "جاري التحميل...";

    const rssUrl = `https://api.rss2json.com/v1/api.json?rss_url=${forumUrl}/rss?f=${id}`;

    try{
        const res = await fetch(rssUrl);
        const data = await res.json();

        let html = `<h3 style="color:${color}; margin-bottom:15px;">${name}</h3>`;

        data.items.slice(0,10).forEach(item=>{
            const date = new Date(item.pubDate).toLocaleDateString("ar");

            html += `
                <div class="topic">
                    <a href="${item.link}" target="_blank">${item.title}</a>
                    <div class="topic-meta">
                        بواسطة ${item.author || "عضو"} - ${date}
                    </div>
                </div>
            `;
        });

        topicsContainer.innerHTML = html || "لا توجد مواضيع";
    }
    catch(e){
        topicsContainer.innerHTML = "حدث خطأ في تحميل المواضيع";
    }
}
</script>

تعديل الكود​

لتعديل الكود بما يتناسب مع منتداك على منصة أحلى منتدى، يكفي التركيز على جزئين أساسيين داخل السكربت. أولاً: مصفوفة الأقسام sections، حيث يمكنك تغيير اسم القسم (name) ليظهر كما تريد في القائمة الجانبية، وتعديل رقم القسم (id) ليتطابق مع رقم القسم الحقيقي في رابط منتداك (مثال: الرابط ‎f19-montada‎ يعني أن الـ id هو 19). كذلك يمكنك تغيير اللون عبر خاصية color ووضع أيقونة مختلفة من Font Awesome عبر خاصية icon. بهذه الطريقة تتحكم بالكامل في شكل وترتيب الأقسام وألوانها والأيقونات المعبرة عنها.

ثانياً: يمكنك تعديل عدد المواضيع المعروضة وشكلها من داخل الدالة loadTopics. السطر الذي يحتوي على ‎slice(0,5)‎ يعني عرض 5 مواضيع فقط، ويمكنك تغييره إلى أي رقم تريده. كما يمكنك تعديل تنسيق عرض العناوين أو إضافة معلومات أخرى مثل عدد الردود أو تخصيص لون العناوين عبر تعديل جزء الـ HTML الذي يتم بناؤه داخل المتغير html. بهذه التعديلات البسيطة تستطيع تخصيص الإضافة بالكامل دون الحاجة لتغيير بنية الكود الأساسية أو المساس بنظام المنتدى نفسه.​

 

[دمعه السعودية]

شكرا على الكود الرائع
احسنت المميز​