🌌 Project Nebula | Nebula Blog System#
“協議已啓動。正在建立安全連接…”
一個致敬《明日方舟：終末地》工業機能美學的現代化博客系統。無需數據庫，基於 Git 的全棧內容管理。
🏗️ 1. 項目介紹 (Introduction)#
Nebula 是一個高度定制化的個人博客系統，旨在還原極致的「終末地」UI 風格。它不僅僅是一個靜態頁面，更是一個擁有完整後台管理、3D 可視化交互、終端模擬系統的全棧應用。
👥 作者與維護#
🛠️ 技術棧 (Tech Stack)#
- 核心框架: Next.js 14/15 (App Router) ↗ - 混合渲染 (SSG + SSR)。
- 樣式庫: Tailwind CSS ↗ - 極速構建工業風佈局。
- 動畫引擎: Framer Motion ↗ - 負責所有 UI 轉場、進入動畫、蟲洞穿越效果。
- 3D 引擎: React Three Fiber (Three.js) ↗ - 構建星雲（Nebula）與核心（Core）場景。
- 數據層: Git-based CMS - 使用 GitHub API 直接讀寫倉庫中的 JSON 和 Markdown 文件，無需傳統數據庫。
- 鑑權: Jose (JWT) + Middleware - 基於 Edge Runtime 的安全驗證。
✨ 2. 特色功能與實現原理 (Features)#
🖥️ 沉浸式 UI (Immersive UI)#
- 工業機能風: 大量使用細邊框、直角、警示色（#FCEE21）、數據裝飾、毛玻璃效果。
- 全屏加載: 實現了類似「系統冷啓動」的 CRT 關機/開機動畫，以及「蟲洞穿越」的頁面跳轉特效。
- 實現: 透過 Framer Motion 的
AnimatePresence和全局狀態管理實現無縫轉場。
🌌 3D 星雲可視化 (Nebula Visualization)#
- 功能: 將文章和友鏈具象化為宇宙中的「節點」，圍繞核心旋轉。支持鼠標拖拽查看。
- 終端交互: 在星雲頁面底部集成了一個可拖拽的 CLI 終端。支持
/ls,/cd,/sudo等指令，甚至可以透過命令行跳轉頁面或登錄後台。 - 實現: 使用 R3F 的
Canvas渲染場景，節點分佈採用斐波那契球算法。
⚡ Git-based CMS (無數據庫後台)#
- 功能: 擁有完整的後台管理界面 (/admin)。
- 文章管理: 增刪改查 Markdown 文章。
- 配置管理: 在線修改網站標題、Logo、備案號等，實時生效。
- 友鏈管理: 自動抓取對方網站 Icon (多級 fallback 機制：iowen -> uomg -> favicon.im)。
- 實現: 利用
Octokit調用 GitHub API，將修改後的數據直接 Commit 到倉庫，觸發 Vercel 自動重新構建。
💬 評論與互動#
- Giscus 集成: 利用 GitHub Discussions 存儲評論，無縫融入深色主題。
⭐ Stargazers over time#
⚠️ 免責聲明#
本項目設計靈感來源於《明日方舟：終末地》，僅供學習交流使用。美術素材版權歸鷹角網絡 (Hypergryph) 所有。
Endfield.SYS // CONNECTION_TERMINATED.