> doeshing.site

Hexo 暗色主題

專案簡介

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

技術棧

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

主要特色

🎯 受 doeshing.site 設計風格啟發

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

✨ 平滑動畫和互動效果

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

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

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

🔧 易於自定義和擴展

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

技術實現

佈局系統

1
2
3
4
5
6
7
8
9
┌─────────────────────────────────────┐
│ 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 結構

項目連結

未來規劃

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