Blog

.heycyber-style-blog { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1200px; margin: 0 auto; } /* --- BARRE DE FILTRES --- */ .blog-filters { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 2px solid #f0f4f8; padding-bottom: 20px; margin-bottom: 35px; } .filter-btn { background: #ffffff; border: 1.5px solid #0066ff; padding: 8px 20px; font-size: 0.85rem; font-weight: 600; color: #0066ff; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; } .filter-btn:hover { background: #e6f0ff; color: #0044cc; } .filter-btn.active { background: #0066ff; color: #ffffff; box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3); } /* --- GRILLE D'ARTICLES --- */ .blog-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; } .blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.3s ease; height: 100%; } .blog-card:hover { transform: translateY(-5px); } .blog-card-image { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; background: #f0f4f8; margin-bottom: 15px; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; } .blog-card-content { display: flex; flex-direction: column; flex-grow: 1; /* Permet de pousser le bouton vers le bas */ } .blog-card-category { font-size: 0.7rem; font-weight: 700; color: #0066ff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; } .blog-card-title { font-size: 1.3rem; font-weight: 700; line-height: 1.4; margin: 0 0 12px 0; color: #1a1a1a; } .blog-card-excerpt { font-size: 0.95rem; color: #555; line-height: 1.6; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; /* Remplit l'espace pour aligner les boutons */ } /* --- LE BOUTON LIRE LA SUITE --- */ .blog-card-link { display: inline-block; font-weight: 700; font-size: 0.85rem; color: #0066ff; text-transform: uppercase; margin-top: auto; /* Aligne toujours le bouton en bas de la carte */ } .blog-card-link::after { content: ' →'; transition: margin 0.2s; } .blog-card:hover .blog-card-link::after { margin-left: 5px; } .loading { grid-column: 1 / -1; text-align: center; padding: 50px; color: #0066ff; font-weight: 500; } @media (max-width: 600px) { .blog-grid-container { grid-template-columns: 1fr; } } document.addEventListener('DOMContentLoaded', function() { const filterContainer = document.getElementById('js-blog-filters'); const gridContainer = document.getElementById('js-blog-grid'); const postsPerPage = 9; function loadFilters() { fetch('/wp-json/wp/v2/categories') .then(res => res.json()) .then(categories => { categories.forEach(cat => { const isUncategorized = (cat.name === 'Non classé' || cat.name === 'Uncategorized'); if (!isUncategorized) { const btn = document.createElement('button'); btn.className = 'filter-btn'; btn.textContent = cat.name; btn.setAttribute('data-id', cat.id); filterContainer.appendChild(btn); } }); document.querySelectorAll('.filter-btn').forEach(btn => { btn.addEventListener('click', function() { document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); const catId = this.getAttribute('data-id'); loadPosts(catId); }); }); }); } function loadPosts(categoryId = 'all') { gridContainer.innerHTML = '

Chargement des articles...

'; let url = `/wp-json/wp/v2/posts?per_page=${postsPerPage}&_embed`; if (categoryId !== 'all') { url += `&categories=${categoryId}`; } fetch(url) .then(res => res.json()) .then(posts => { if (posts.length === 0) { gridContainer.innerHTML = '

Aucun article trouvé.

'; return; } let html = ''; posts.forEach(post => { const title = post.title.rendered; const link = post.link; let img = 'https://via.placeholder.com/600x400?text=Pas+d\'image'; if (post._embedded && post._embedded['wp:featuredmedia']) { img = post._embedded['wp:featuredmedia'][0].source_url; } let catName = ''; if (post._embedded && post._embedded['wp:term']) { const cats = post._embedded['wp:term'].find(t => t.taxonomy === 'category'); if (cats) catName = cats[0].name; } const excerpt = post.excerpt.rendered.replace(/]*>?/gm, '').substring(0, 115) + '...'; // AJOUT DU BOUTON "LIRE LA SUITE" DANS LE TEMPLATE html += `

${catName ? `${catName}` : ''}

${title}

${excerpt}

Lire la suite

`; }); gridContainer.innerHTML = html; }) .catch(err => { gridContainer.innerHTML = '

Chargement des articles

'; console.error('Erreur:', err); }); } loadFilters(); loadPosts(); });