Hexo 暗色主題

專案簡介

為 Hexo 靜態網站生成器設計的現代暗色主題，受 doeshing.site 設計風格啟發。

技術棧

• 靜態生成器: Hexo
• 模板引擎: EJS
• 樣式: CSS3 + Custom Properties
• 互動: Vanilla JavaScript
• 圖標: Lucide Icons

主要特色

🎯 受 doeshing.site 設計風格啟發

• 保持與個人網站一致的視覺風格
• 現代化的暗色主題設計
• 優雅的排版和間距

✨ 平滑動畫和互動效果

• CSS 動畫和轉場效果
• JavaScript 驅動的互動功能
• 背景追隨游標效果

📝 適合技術部落格的版面設計

• Twitter 風格的時間軸佈局
• 三欄式桌面佈局設計
• 優化的閱讀體驗

🔧 易於自定義和擴展

• 模塊化的 CSS 架構
• 清晰的代碼結構
• 豐富的配置選項

技術實現

佈局系統

┌─────────────────────────────────────┐
│              Header                 │
├───────┬─────────────────┬───────────┤
│ Left  │                 │  Right    │
│ Side  │   Main Content  │  Side     │
│ bar   │                 │  bar      │
├───────┴─────────────────┴───────────┤
│              Footer                 │
└─────────────────────────────────────┘

響應式設計

• 桌面 (≥1024px): 三欄佈局
• 平板 (768px-1023px): 單欄佈局
• 手機 (<768px): 單欄佈局 + 移動選單

主要功能

1. 分類導航: 左側邊欄顯示文章分類
2. 小工具系統: 右側邊欄包含個人資訊、熱門標籤等
3. 互動式文章操作: 類似 Twitter 的按讚、轉發功能
4. 搜尋功能: 即時文章搜尋
5. 移動端適配: 完整的移動端支持

開發亮點

CSS 架構

• 使用 CSS Custom Properties 實現主題系統
• BEM 命名規範保證代碼可維護性
• Flexbox 和 Grid 實現現代佈局

JavaScript 功能

• 原生 JavaScript 實現所有互動功能
• 事件委託優化性能
• 模塊化的代碼組織

可訪問性

• 完整的 ARIA 標籤支持
• 鍵盤導航友好
• 語義化的 HTML 結構

項目連結

• GitHub 倉庫: https://github.com/KoukeNeko/hexo-dark-theme

未來規劃

• 添加深色/淺色主題切換
• 支援更多社交平台分享
• 增加評論系統整合
• 多語言支持
• 自定義首頁佈局選項