点击上方?公众号?关注我✅
你好啊,我是雨飞,见字如面。感谢阅读,期待我们下一次的相遇。
Cursor的功能十分强大,之前雨飞给大家介绍过如何使用Cursor去完成谷歌插件,爬虫等功能的开发,今天尝试教大家开发一个简单的个人博客网站的功能。先看下成品图。
实现的功能有下面几个,
1、主页面风格化和展示
2、添加文章功能,并保存到本地文件
3、在主页面右侧会展示文章
4、点击主页面右侧文章的阅读全文,会跳转到对应的文章页
首先,我们找一个博客的风格作为参考,随便一个你喜欢的风格样式都可以,然后截图保存下来。这个目的是,让Cursor参考这个博客的风格,去生成类似样式的网站。Cursor有强大的图片理解能力,比我们只通过文字输入提示词要更准确。
提示词:
请按照图片所示内容,帮我制作一个博客的网页。左边是个人信息和目录,右边展示具体的文章信息。
正常情况下,Cursor会根据图片内容,给我们做出一个类似的html网页,点击这个网页打开看下效果。
新增文章功能
提示词:
请在本地添加一个文件夹,保存我的博客文章。并且在左侧添加一个新增文章的功能
这个功能实现的有一些问题,继续和Cursor对话让他修改。这个时候,它给我们提供了使用Node.js API的方法去实现保存在本地,因此需要安装Node.js。如果,没有安装过Nodejs的可以看我文章第二部分的教程,去完成安装。我们现在先假定大家已经完成安装了Nodejs。
增加文章详情页功能
提示词:
请增加一个文章展示页面,在点击主页面右侧文章的阅读全文按钮之后跳转到文章展示页面,并展示对应的文章。
在命令行输入启动命令,启动node的服务器,然后打开主页的网站,看下效果即可。启动命令:node server.js
Node.js 安装
直接在这个页面去下载Node.js,网址:https://nodejs.org/zh-cn
下载后直接安装。
选项都勾选上。
选择一个安装地址,嫌麻烦的可以用默认地址。
初学者,直接点下一步。有经验的,可以按需安装。
这个地方不需要勾选,选上会下载一些包,降低我们安装速度。
安装完之后,打开命令行,输入 node -v ,显示如下,则安装成功。
Nodejs有一个官方教程,可以看:https://nodejs.cn/en/learn
❤️常驻小尾巴❤️
加微 1060687688,备注「公众号」,送你一份「AI工具大全与变现指南」