繁中
English繁中

由Nuxt 4和Directus打造的個人博客平台

作者: /

支持評論、點讚、收藏夾、用戶在線或離線狀態、更新提示、實時訂閱等功能。這很酷

項目 ericdit.com-refactor 是開發者 超級基地（埃里克·迪特） 正在重組的個人網站項目的核心目標是創建一個現代化的、內容驅動的博客平台，具有以下特徵：

🔧技術架構：

  1. Nuxt 4(Vue 3 + Vite）
    • 提供前端頁面渲染、路由、靜態生成（SSG）等功能。
    • 使用 頁/ 目錄自動生成路線。
    • app.vue 和 布局/ 提供頁面布局功能。
  2. Directus CMS
    • 一個無代碼內容管理系統，充當網站的內容後台。
    • 存儲文章、用戶、評論、點讚和收藏夾等數據。
    • 為前端訪問提供GraphQL / REST API。
  3. 順風CSS + UnoCSS
    • 提供靈活的CSS工具系統來快速構建響應式界面。
  4. Pinia + Nuxt狀態
    • 管理狀態（例如用戶登錄、評論緩存、實時更新等）。
  5. Socket實時通信（可與Directus的WebSocket集成或自建）
    • 用於在線用戶狀態、評論通知、訂閱更新等

💡核心功能模塊：

功能描述
品系統使用Directus管理文章發布、草稿、標籤分類等
評論系統支持用戶評論、回復、點讚、收藏夾等，其可能具有嵌套結構
用戶系統登錄、註冊、狀態顯示、個人頁面（作者文件）
實時通知訂閱系統提醒用戶新文章或評論
🌐SEARCH和PWA支持Nuxt具有自然的SEO優化和漸進式應用程式（PWA）功能

項目目錄結構（簡化版）：

/components //可重用組件，例如CommentBox、PostCard
/pages //頁面瀏覽量，例如/index、/blog/slug][
/layout//頁面布局
/composables //組合函數，例如useUser、useDirectus
/plugins //Nuxt插件，例如Directus API客戶端
/assets //圖片、樣式等。

使用場景：

該項目適合：

  • 博主或創作者構建內容平台
  • 需要完整前端邏輯的博客系統開發和學習
  • 了解Directus等Nuxt 4 + Headless CMS的組合使用方法

學習建議：

如果您想深入研究這個項目，可以從以下幾個方面開始：

  1. 運行第一個項目（需要配置Directus後台）
  2. 閱讀 插件/directus.ts 了解前端如何與CMS通信的文檔;
  3. 關注 組件/ 如何在其中構建評論和點讚組件;
  4. 看看 使用用戶 和 使用授權 如何通過組合功能管理登錄狀態，例如：
  5. 如何關注該頁面 useAsyncData（） 獲取內容並渲染它。

Github：https://github.com/supebase/ericdit.com-refactor

輸油管：

返回頂端