Posted by:
XinYe
4 months, 3 weeks ago
(0 comments)
在当今数字内容创建和管理的浪潮中，Notion以其强大的功能和简洁的界面深受用户的喜爱。今天我们就跟随创作者的脚步，探索如何使用Next.js搭建一个模仿Notion功能的网站——Notion Clone。
1.项目功能演示
- 登录与进入：本网站支持使用GitHub登录。登录后，您可以进入主界面，其中将直接显示预先创建的笔记。例如，演示者有一个之前创建的注释。
- 创建和编辑笔记：创建新笔记的操作非常方便，触发新笔记创建的方式也有很多。创建新笔记后，您可以轻松修改笔记的名称。在编辑过程中，按斜杠会弹出不同的命令。例如，您可以选择预设的文本样式，例如“你好小字”。同时支持文本加粗和斜体，还可以设置颜色，比如将文本设置为红色。此外，还提供插入图片、添加图标作为封面等功能。编辑完成后，点击“发布”即可发布，并将生成的URL分享给其他人，以便他们可以访问创建的内容。
- 多级笔记及操作：支持创建多级笔记，实现无限嵌套，满足复杂的内容层次需求。对于不再需要的笔记，可以将其删除并提供撤消功能。如果你想彻底删除它们，还有一个“永久删除”选项。
- 快捷键操作及模式切换：搜索功能有快捷键，Windows系统下为“CTRL+K”，Mac系统下为“Command+K”。侧边栏可以折叠和展开，方便用户灵活调整界面布局。同时具有夜间模式和白天模式切换功能，满足不同场景下的视觉需求。
- 移动端适配：本项目也针对移动端进行了适配。从演示中可以看出，在移动设备上，界面布局合理，所有功能都可以正常使用，为用户提供了便捷的跨设备体验。
2. 项目学习和教程来源
该项目的教程来自Bilibili视频。创作者每天花费一小时，总共近八小时才完成该项目。值得一提的是，本教程最初是从 YouTube 移植的。
3.技术栈分析
- 框架：使用Next.js版本14进行开发。虽然当时的教程使用的是 Next.js 13，但根据创建者的反馈，两者并没有太大区别。 Next.js强大的功能为项目开发提供了强有力的支持。
- UI库：选择某个UI库（原文中“棚的CN正常管理”表述不正确，推测可能是某个特定UI库的名称，但由于不清楚信息，目前无法准确指出），为您的项目构建一个美观且易于使用的用户界面。
- 认证登录：采用SUST认证登录方式。具体来说，GitHub登录功能是基于CLARK数据库实现的。 CLARK数据库是云数据库，实时性良好，可以有效保证登录等操作的流畅性。
- 图像存储：图像存储采用Edge Store，为图像存储和管理提供了可靠的解决方案。
- 部署：项目最终部署在VERSAL平台上（“resoudian app”表述错误，推测是与VERSAL平台相关的URL，但信息不清楚），整体情况运行稳定。不过创建者提到，CLARK数据库的使用仍处于开发模式，建议后续部署时切换到生产模式，以保证更好的性能和安全性。
在项目实践过程中，主创也提醒大家，富文本编辑器部分可能与原视频教程有所不同。如果遇到此类问题，可以参考代码或者查看视频下方评论区获取相关解决方案。
希望通过这次分享，能给对Next.js开发感兴趣的朋友提供一些启发和帮助。如果你在练习过程中有什么感悟或者疑问，欢迎在评论区留言分享，让我们一起交流、共同进步！
Share on Facebook
Indie123
Comments
There are currently no comments