我为作家打造了‘Fourth Clover’：极简 Next.js 博客平台 🍀

Source: Dev.to

⚠️ Collection Error: Content refinement error: Error: Connection error.

现代网络的噪声

我们生活在一个嘈杂的数字世界。无论走到哪里，都有弹窗、杂乱的侧边栏、付费墙以及算法驱动的干扰不断抢夺你的注意力。作为一名开发者和写作者，我怀念那段网络仅仅是内容的日子。我想要一个稀有、特别的空间，就像在三叶草田里找到四叶草一样。因此，我构建了 The Fourth Clover。

什么是 The Fourth Clover？

The Fourth Clover 是一个现代、极简主义的博客平台，专为重视清晰胜于杂乱的写作者和思考者而设计。它不仅仅是另一个 CMS；它是一个精心打造的体验，侧重于：

• 排版 – 优美的衬线字体（Charter 与 Playfair Display）让阅读更像在看纸质书，而不是屏幕。
• 专注 – 一个无干扰的环境，界面会淡出，只剩下你和你的文字。
• 美学 – 独特的“圆形”单色设计系统，呈现出高端且宁静的氛围。

最棒的是？它完全 开源。

技术栈

• Next.js App Router – 服务端渲染与最佳 SEO；几乎所有可以服务端渲染的内容，都由服务器渲染。
• Tailwind CSS – 负责布局和自定义设计系统。
• shadcn/ui（基于 Radix UI）– 提供可访问、功能完善的交互组件，如对话框和下拉菜单。
• Supabase – 为后端提供动力：
  • 用于结构化、关系型数据（作者、文章、评论）的 Postgres 数据库。
  • 通过 Supabase Auth 实现的 Google OAuth。
  • 用于图片上传与管理的存储。
• React Hook Form + Zod – 用于复杂的文章编辑器；确保每篇文章在写入数据库前都经过验证。

编辑器功能（皇冠上的宝石）

• 自动保存 – 永不丢失作品；编辑器在检测到更改后每隔几秒就会将内容保存为本地草稿。
• 实时统计 – 在你输入时实时更新字数和阅读时间。
• 定时发布 – 现在写作，稍后自动上线。
• 简洁界面 – 标签、摘要等设置会被隐藏，只有在需要时才会出现。

社交功能（第二阶段）

• 嵌套评论 – 类似 Reddit 的分层评论系统。
• 点赞与回应 – 对你的文章进行实时反馈。
• 个人统计 – 查看你的文章表现如何。

性能

站点在 Core Web Vitals 上得分很高。图片经过优化，字体加载高效，数据库查询通过适当的索引进行调优。

社区与贡献

• 给仓库加星 – 有助于提升可见度，吸引更多开发者。
  https://github.com/aryan-dani/The-Fourth-Clover
• 报告 Bug – 发现问题？打开 Issue！
• 贡献代码 – Fork 仓库，挑选一个 “good first issue”，提交 PR。我会审阅所有 PR！

最后感想

构建 The Fourth Clover 让我再次体会到为何热爱网页开发。这是工程与艺术的完美交汇。技术应当帮助我们表达自我，而不是成为障碍。

如果你在寻找一个可供学习的新项目、一个写作平台，或是一个可以贡献代码的代码库，欢迎加入我们。

祝编码愉快！ 🍀

• GitHub: https://github.com/aryan-dani/The-Fourth-Clover
• Live Demo: https://fourthclover.bio