avatar

個人網站總覽規劃

個人網站專案規劃

網站簡介

這是一個結合了個人作品集、技術部落格與電子書庫的複合式個人網站。網站旨在展示我的技術能力，分享我的專業知識，並提供一個個人專屬的電子書閱讀空間。網站採用 Next.js 作為前端框架，並以 Express.js 構建強大的後端服務。

技術架構

前端

  • 框架: Next.js
  • 語言: JavaScript / TypeScript
  • 用途: 負責所有使用者介面，包括網站首頁、部落格文章、關於我、聯絡我等靜態頁面，以及後台管理系統的動態頁面。

後端

  • 框架: Express.js
  • 用途: 處理所有的後台邏輯，包括使用者驗證、資料庫互動、文章管理、權限控制以及電子書庫的資料處理。

主要功能模組

1. 前台網站 (訪客頁面)

  • 首頁: 網站的門面，簡要介紹網站內容，提供清晰的導航。
  • 部落格 (Blog): 展示我發布的所有技術文章與心得分享，提供文章列表與詳細閱讀頁面。
  • 關於我 (About Me): 介紹我的個人經歷、技術專長與聯絡方式。
  • 聯絡我 (Contact Me): 提供一個表單，讓訪客可以透過表單與我聯繫。

2. 後台管理系統

使用者需登入後才能進入此系統，並根據其權限等級看到不同的管理功能。

  • 使用者登入: 提供安全的使用者認證機制。

  • 電子書庫 (e-Book Library)

    • 核心功能: 整合 Foliate.js 實現電子書的線上閱讀。
    • 進度紀錄: 能夠自動紀錄閱讀進度，方便下次繼續閱讀。
    • 書本瀏覽: 提供一個介面讓我可以瀏覽書庫中的所有書籍。

    image

  • 文章管理 (Article Management)

    • CRUD 操作: 提供完整的 新增 (Create)、修改 (Update)、刪除 (Delete)、發布 (Publish) 文章功能。
    • 發布與草稿: 支援文章狀態管理，可以將文章儲存為草稿或直接發布至前台部落格。

  • 權限管理 (RBAC - Role-Based Access Control)

    • 架構: 採用基於角色的存取控制架構，有效管理系統使用者的權限。
    • 權限設定: 可以透過後台管理介面，調整不同角色的使用者可以存取哪些管理頁面與功能。