diff --git a/templates/compare.html b/templates/compare.html
index 709914b..d0cefb0 100644
--- a/templates/compare.html
+++ b/templates/compare.html
@@ -230,6 +230,7 @@ let compareType = 'model';
         }
 
         // 初始化
+        loadNav();
         setCompareType('model');
     </script>
 </body>
diff --git a/templates/cpus.html b/templates/cpus.html
index 394cb09..8b617c7 100644
--- a/templates/cpus.html
+++ b/templates/cpus.html
@@ -208,6 +208,8 @@ async function loadCpus() {
             if (e.target === this) closeModal();
         });
 
+        // 初始化
+        loadNav();
         loadCpus();
     </script>
 </body>
diff --git a/templates/gpus.html b/templates/gpus.html
index 488ff8d..960cd21 100644
--- a/templates/gpus.html
+++ b/templates/gpus.html
@@ -215,6 +215,8 @@ async function loadGpus() {
             if (e.target === this) closeModal();
         });
 
+        // 初始化
+        loadNav();
         loadGpus();
     </script>
 </body>
diff --git a/templates/knowledge.html b/templates/knowledge.html
index e5c8a7a..71b00ae 100644
--- a/templates/knowledge.html
+++ b/templates/knowledge.html
@@ -177,5 +177,43 @@
             </table>
         </div>
     </main>
+
+    <script>
+        let categories = [];
+
+        // 加载导航栏
+        async function loadNav() {
+            const res = await fetch('/api/categories');
+            categories = await res.json();
+
+            const builtinPages = [
+                {name: '首页', href: '/'},
+                {name: '工具', href: '/tools'},
+                {name: '对比', href: '/compare'},
+                {name: '知识库', href: '/knowledge'}
+            ];
+
+            const categoryPages = {
+                'ai-models': '/models',
+                'gpus': '/gpus',
+                'cpus': '/cpus'
+            };
+
+            let navHtml = '';
+            builtinPages.forEach(p => {
+                const isActive = window.location.pathname === p.href;
+                navHtml += `<a href="${p.href}" class="${isActive ? 'text-indigo-600 font-medium' : 'text-gray-600 hover:text-indigo-600'}">${p.name}</a>`;
+            });
+
+            categories.forEach(cat => {
+                const href = categoryPages[cat.id] || `/category/${cat.id}`;
+                navHtml += `<a href="${href}" class="text-gray-600 hover:text-indigo-600">${cat.name}</a>`;
+            });
+
+            document.getElementById('topNav').innerHTML = navHtml;
+        }
+
+        loadNav();
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/tools.html b/templates/tools.html
index e3e70b8..a7b7245 100644
--- a/templates/tools.html
+++ b/templates/tools.html
@@ -197,6 +197,9 @@ async function calculateVram() {
             
             document.getElementById('vramResult').classList.remove('hidden');
         }
+
+        // 初始化
+        loadNav();
     </script>
 </body>
 </html>
\ No newline at end of file