<style> /* كود تنسيق الفهرس */ #sitemap-container { font-family: 'Tajawal', sans-serif; } .sitemap-tab { display: inline-block; padding: 10px 20px; margin: 0 5px 10px 0; background: var(--bg-hover, #f1f5f9); color: var(--text-secondary, #555); border-radius: 50px; cursor: pointer; font-weight: bold; transition: 0.3s; border: 1px solid var(--border-color, #eee); } .sitemap-tab:hover, .sitemap-tab.active { background: var(--accent-blue, #3b82f6); color: #fff; border-color: var(--accent-blue, #3b82f6); } .sitemap-content { display: none; margin-top: 20px; animation: fadeIn 0.5s; } .sitemap-content.active { display: block; } .sitemap-post { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-color, #eee); } .sitemap-post a { text-decoration: none; color: var(--text-primary, #333); font-weight: 600; flex: 1; transition: 0.2s; } .sitemap-post a:hover { color: var(--accent-blue, #3b82f6); padding-right: 5px; } .sitemap-date { font-size: 12px; color: var(--text-secondary, #999); margin-right: 10px; white-space: nowrap; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } </style> <div id="sitemap-container"> <div id="sitemap-tabs"></div> <div id="sitemap-results">جاري تحميل المقالات...</div> </div> <script> //<![CDATA[ (function() { var container = document.getElementById('sitemap-container'); var tabsContainer = document.getElementById('sitemap-tabs'); var resultsContainer = document.getElementById('sitemap-results'); var posts = []; // جلب المقالات fetch('/feeds/posts/summary?alt=json&max-results=500') .then(res => res.json()) .then(data => { if (data.feed.entry) { posts = data.feed.entry; createSitemap(); } else { resultsContainer.innerHTML = 'لا توجد مقالات.'; } }); function createSitemap() { var categories = {}; // تصنيف المقالات posts.forEach(post => { if (post.category) { post.category.forEach(cat => { if (!categories[cat.term]) categories[cat.term] = []; categories[cat.term].push(post); }); } }); // إنشاء التبويبات var tabsHtml = '<span class="sitemap-tab active" onclick="filterSitemap(\'all\', this)">الكل</span>'; for (var cat in categories) { tabsHtml += '<span class="sitemap-tab" onclick="filterSitemap(\'' + cat + '\', this)">' + cat + '</span>'; } tabsContainer.innerHTML = tabsHtml; // عرض الكل افتراضياً filterSitemap('all', tabsContainer.firstChild); } window.filterSitemap = function(cat, btn) { // تفعيل الزر var tabs = document.querySelectorAll('.sitemap-tab'); tabs.forEach(t => t.classList.remove('active')); btn.classList.add('active'); // فلترة المقالات var filteredPosts = []; if (cat === 'all') { filteredPosts = posts; } else { filteredPosts = posts.filter(p => { return p.category && p.category.some(c => c.term === cat); }); } // عرض النتائج var html = ''; filteredPosts.forEach(p => { var title = p.title.$t; var link = p.link.find(l => l.rel === 'alternate').href; var date = new Date(p.published.$t).toLocaleDateString('ar-EG'); html += '<div class="sitemap-post"><a href="' + link + '" target="_blank">' + title + '</a><span class="sitemap-date">' + date + '</span></div>'; }); resultsContainer.innerHTML = '<div class="sitemap-content active">' + html + '</div>'; }; })(); //]]> </script>