由Nuxt4和Directus构建的个人博客平台

https://youtu.be/k_jADDTnYP8

支持评论、点赞、收藏、用户在线或离线状态、更新提示、实时订阅等功能,很酷

项目 ericdit.com-refactor 是开发者 supebase（Eric Dit） 正在重构的个人网站项目，核心目标是创建一个现代化、内容驱动的博客平台，具备如下特点：

🔧 技术架构：

1. Nuxt 4（Vue 3 + Vite）
   • 提供前端页面渲染、路由、静态生成（SSG）等功能。
   • 使用 pages/ 目录自动生成路由。
   • app.vue 和 layouts/ 提供页面布局能力。
2. Directus CMS
   • 无代码内容管理系统，作为网站的内容后端。
   • 存储文章、用户、评论、点赞、收藏等数据。
   • 提供 GraphQL / REST API，供前端访问。
3. Tailwind CSS + UnoCSS
   • 提供灵活的 CSS 工具类系统，快速构建响应式界面。
4. Pinia + Nuxt UseState
   • 管理状态（如用户登录、评论缓存、实时更新等）。
5. Socket 实时通信（可能集成了 Directus 的 WebSocket 或自建）
   • 用于在线用户状态、评论通知、订阅更新等。

💡 核心功能模块：

功能	说明
📚 文章系统	使用 Directus 管理文章发布、草稿、标签分类等
💬 评论系统	支持用户评论、回复、点赞、收藏等，可能有嵌套结构
👥 用户系统	登录、注册、状态显示、个人页（作者档案）
🔔 实时通知	订阅系统，提醒用户新文章或评论
🌐 SEO 与 PWA 支持	Nuxt 有天然的 SEO 优化与渐进式应用（PWA）能力

📁 项目目录结构（简化版）：

/components       // 可复用组件，如 CommentBox、PostCard
/pages            // 页面视图，如 /index、/blog/[slug]
/layouts          // 页面布局
/composables      // 组合式函数，如 useUser、useDirectus
/plugins          // Nuxt 插件，如 Directus API 客户端
/assets           // 图片、样式等

📌 使用场景：

这个项目适合用于：

• 博主或创作者自建内容平台
• 需要完整前后端逻辑的博客系统开发学习
• 学习 Nuxt 4 + Headless CMS（如 Directus）的结合用法

✅ 学习建议：

如果你想深入学习这个项目，可以从以下几个方面入手：

1. 先跑起来项目（需要配置 Directus 后端）
2. 阅读 plugins/directus.ts 文件，理解前端如何与 CMS 通信；
3. 关注 components/ 中如何构建评论、点赞组件；
4. 看下 useUser 和 useAuth 等组合式函数如何管理登录状态；
5. 关注页面如何通过 useAsyncData() 获取内容并渲染。

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

油管：https://youtu.be/k_jADDTnYP8