修复:章节列表动态加载data/chapters.json,禁用缓存

alacarte-novel-website/chapters.html

@@ -46,7 +46,7 @@
                 </div>
                 <div class="chapters-title">
                     <h1>阿拉德：剑之回响</h1>
-                    <p>共 39 章 · 连载中</p>
+                    <p>共 <span id="totalChapters">39</span> 章 · 连载中</p>
                 </div>
             </div>
             <div class="reading-progress">
@@ -119,14 +119,32 @@
         </div>
     </footer>
 
-    <script src="js/app.js?v=2"></script>
+    <script src="js/app.js?v=3"></script>
     <script>
+        // 动态加载章节数据（禁用缓存）
+        async function loadChaptersData() {
+            try {
+                const response = await fetch('data/chapters.json?t=' + Date.now());
+                const data = await response.json();
+                window.chaptersData = data.chapters;
+                document.getElementById('totalChapters').textContent = data.total;
+                renderChaptersList();
+                setupFilters();
+                setupSearch();
+                updateReadingProgress();
+            } catch (error) {
+                console.error('加载章节数据失败:', error);
+                // 降级使用硬编码数据
+                renderChaptersList();
+                setupFilters();
+                setupSearch();
+                updateReadingProgress();
+            }
+        }
+        
         // 章节页面特定逻辑
         document.addEventListener('DOMContentLoaded', function() {
-            renderChaptersList();
+            loadChaptersData();
-            setupFilters();
-            setupSearch();
-            updateReadingProgress();
         });
     </script>
 </body>

alacarte-novel-website/js/app.js

@@ -180,7 +180,10 @@ function renderChaptersList() {
     const container = document.getElementById('chaptersList');
     if (!container) return;
     
-    container.innerHTML = chaptersData.map(chapter => `
+    // 优先使用从JSON动态加载的数据
+    const data = window.chaptersData || chaptersData;
+    
+    container.innerHTML = data.map(chapter => `
         <div class="timeline-item" data-chapter="${chapter.id}">
             <div class="timeline-marker"></div>
             <a href="reader.html?id=${chapter.id}" class="timeline-content">
@@ -211,12 +214,13 @@ function setupFilters() {
 
 function filterChapters(filter) {
     const items = document.querySelectorAll('.timeline-item');
+    const data = window.chaptersData || chaptersData;
     
     items.forEach((item, index) => {
         let show = true;
         
         if (filter === 'latest') {
-            show = index >= items.length - 5;
+            show = index >= data.length - 5;
         } else if (filter === 'unread') {
             const chapterId = parseInt(item.dataset.chapter);
             const readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
@@ -259,7 +263,8 @@ function setupSearch() {
 
 function updateReadingProgress() {
     const readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-    const progress = Math.round((readChapters.length / chaptersData.length) * 100);
+    const data = window.chaptersData || chaptersData;
+    const progress = Math.round((readChapters.length / data.length) * 100);
     
     const progressFill = document.getElementById('progressFill');
     const progressText = document.getElementById('progressText');