Cursor实战:个人博客网站


点击上方?公众号?关注我✅


你好啊,我是雨飞,见字如面感谢阅读,期待我们下一次的相遇。

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工具大全与变现指南

推荐阅读

「雨飞同行」这是雨飞的介绍(第8版,交个朋友,限时送福利)

请使用浏览器的分享功能分享到微信等