Cursor实战:个人博客网站

6,974 阅读2分钟

今天尝试教大家一个使用Cursor去完成一个简单的个人博客网站的功能。先看成品图。

实现的功能有,

  • 主页面风格
  • 添加文章到本地文件中
  • 在主页面右侧会展示文章
  • 点击主页面右侧文章的阅读全文,会跳转到对应的文章页

个人博客网站制作

首先,我们找一个博客的风格作为参考,随便一个你喜欢的风格样式都可以,然后截图。

提示词:请按照图片所示内容,帮我制作一个博客的网页。左边是个人信息和目录,右边展示具体的文章信息。

正常情况下,Cursor会根据图片内容,给我们做出一个类似的html网页,点击这个网页打开看下效果。

新增文章功能

提示词:请在本地添加一个文件夹,保存我的博客文章。并且在左侧添加一个新增文章的功能

这个功能实现的有问题,继续和Cursor对话让他修改。这个时候,它给我们提供了使用Node.js API的方法去实现保存在本地,因此需要安装Node.js。

如果,没有安装过NodeJS的可以看我最后的教程,去完成安装。我们现在先假定大家已经完成安装了NodeJS。

增加文章详情页功能

提示词:请增加一个文章展示页面,在点击主页面右侧文章的阅读全文按钮之后跳转到文章展示页面,并展示对应的文章。

按命令启动node的服务器,然后打开主页的网站,看下效果即可。 启动命令:node server.js

Node.js 安装教程

直接在这个页面去下载NodeJS就可以 nodejs.org/zh-cn

下载后直接安装

选项都勾选上

选择一个地址,也可以用默认地址。

初学者,直接点下一步。

这个地方不需要勾选,选上会下载一些包,降低我们安装速度。

安装完之后,打开命令行,输入 node -v ,显示如下,则安装成功。

NodeJS有一个官方教程,可以看:nodejs.cn/en/learn

如果对你有帮助,欢迎点赞收藏转发一键三连,也欢迎加我微信「1060687688」一起交流。