什么是常青内容？为什么它在 2026 年仍然至关重要？

@theme { –color-evergreen: #10b981; –color-buzz: #f43f5e; –animate-fade-in: fadeIn 0.5s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .glass-effect { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); } .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #4f46e5; cursor: pointer; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3); } /** * DONNÉES COMPARATIVES (Source Interne) * Structurées comme une réponse API JSON pour faciliter la maintenance future. */ const comparisonData = [ { criteria: “Durée de vie”, evergreen: “Années (Long terme)”, news: “Jours (Court terme)”, icon: “” }, { criteria: “Effort de maintenance”, evergreen: “Faible et ponctuel”, news: “Continu et intense”, icon: “” }, { criteria: “ROI (Rentabilité)”, evergreen: “Croissant (Compounding)”, news: “Immédiat puis nul”, icon: “” }, { criteria: “Source de trafic”, evergreen: “Recherche organique (SEO)”, news: “Réseaux sociaux &amp; Discover”, icon: “” } ]; // — GESTION DE L’INTERFACE — const views = { visual: document.getElementById(‘view-visual’), data: document.getElementById(‘view-data’) }; const buttons = { visual: document.getElementById(‘btn-visual’), data: document.getElementById(‘btn-data’) }; // Fonction de bascule entre les vues function switchView(viewName) { // Masquer tout Object.values(views).forEach(el => el.classList.add(‘hidden’)); // Afficher la sélection views[viewName].classList.remove(‘hidden’); // Reset boutons styles buttons.visual.className = “px-5 py-2 rounded-full text-sm font-semibold transition-all duration-300 bg-transparent text-slate-300 border border-slate-600 hover:bg-slate-700 hover:text-white”; buttons.data.className = “px-5 py-2 rounded-full text-sm font-semibold transition-all duration-300 bg-transparent text-slate-300 border border-slate-600 hover:bg-slate-700 hover:text-white”; // Appliquer style actif const activeClass = “px-5 py-2 rounded-full text-sm font-semibold transition-all duration-300 bg-white text-slate-900 shadow-lg hover:scale-105 ring-2 ring-white”; buttons[viewName].className = activeClass; } // — GÉNÉRATION DU TABLEAU — function renderTable() { const tbody = document.getElementById(‘table-body’); tbody.innerHTML = ”; // Clean comparisonData.forEach(row => { const tr = document.createElement(‘tr’); tr.className = “hover:bg-slate-50 transition-colors”; tr.innerHTML = ` ${row.icon} ${row.criteria} ${row.evergreen} ${row.news} `; tbody.appendChild(tr); }); } // — LOGIQUE DU SIMULATEUR — const slider = document.getElementById(‘time-slider’); const monthDisplay = document.getElementById(‘month-display’); const barEvergreen = document.getElementById(‘bar-evergreen’); const barNews = document.getElementById(‘bar-news’); const valEvergreen = document.getElementById(‘val-evergreen’); const valNews = document.getElementById(‘val-news’); const insightBox = document.getElementById(‘insight-box’); const insightText = document.getElementById(‘insight-text’); function updateSimulation() { const month = parseInt(slider.value); monthDisplay.innerText = `Mois ${month}`; // Algorithme de simulation // News: Commence très haut (1000) puis chute drastiquement (décroissance exponentielle) let newsTraffic = 1000 * Math.pow(0.6, month – 1); if (newsTraffic < 10) newsTraffic = 10; // Plancher // Evergreen: Commence bas (50) mais grandit chaque mois (croissance linéaire composée) // Mois 1 = 50, Mois 12 = 600, Mois 24 = 1200 let evergreenTraffic = 50 + (month * 50); // Normalisation pour l'affichage CSS (Max height 100%) const maxVal = 1500; // Echelle max arbitraire const hEvergreen = Math.min((evergreenTraffic / maxVal) * 100, 100); const hNews = Math.min((newsTraffic / maxVal) * 100, 100); // Mise à jour DOM barEvergreen.style.height = `${hEvergreen}%`; barNews.style.height = `${hNews}%`; valEvergreen.innerText = `~${Math.round(evergreenTraffic)} visites`; valNews.innerText = `~${Math.round(newsTraffic)} visites`; // Insights contextuels insightBox.classList.remove('hidden'); if (month === 1) { insightText.innerHTML = "Le Buzz : Explosion immédiate du trafic, mais c’est éphémère.”; insightBox.className = “mt-4 p-4 rounded-lg border flex gap-3 items-start bg-rose-50 text-rose-800 border-rose-200”; } else if (month > 1 && month < 6) { insightText.innerHTML = "La Chute : L’actualité ne tire plus de trafic, il faut recréer du contenu.”; insightBox.className = “mt-4 p-4 rounded-lg border flex gap-3 items-start bg-yellow-50 text-yellow-800 border-yellow-200”; } else if (month >= 6) { insightText.innerHTML = “La Victoire Evergreen : Le contenu continue d’attirer du monde sans effort supplémentaire. ROI maximal.”; insightBox.className = “mt-4 p-4 rounded-lg border flex gap-3 items-start bg-emerald-50 text-emerald-800 border-emerald-200”; } } // — UTILITAIRE EXPORT — // Petite fonction bonus pour “télécharger” les données (Simulation API/Data handling) function exportToCSV() { let csvContent = “data:text/csv;charset=utf-8,Critere,Evergreen,Actualiten”; comparisonData.forEach(row => { csvContent += `${row.criteria},”${row.evergreen}”,”${row.news}”n`; }); const encodedUri = encodeURI(csvContent); const link = document.createElement(“a”); link.setAttribute(“href”, encodedUri); link.setAttribute(“download”, “comparatif_evergreen_2026.csv”); document.body.appendChild(link); link.click(); document.body.removeChild(link); } // Initialisation document.addEventListener(‘DOMContentLoaded’, () => { renderTable(); slider.addEventListener(‘input’, updateSimulation); // Lancer une première simulation updateSimulation(); });