​ 年底了终于比较不忙了，在空闲时间（摸鱼）借助Trae CN花了几天时间完成了一个情侣主题站的开发，效果复刻自 Typecho 的 Brave 主题。

​ 为什么要开发这样一个网站呢，有两个原因，一个是学习一下AI编程，另一个是因为此前我折腾过这个Brave主题，我觉得非常棒，但有一个不足是必须要有一个服务器，要钱，虽然有免费的服务器但很难保证不跑路也会有很多限制。我想利用Vercel/EdgeOne Pages/cloudflare pages 等静态文件服务器部署，这样免费速度又快。

功能特色

• 恋爱计时器
• 纪念日倒计时
• 随机情话
• 留言墙
• 点点滴滴
• 时光轴
• 关于我们
• 恋爱清单
• 相册
• 多种可控特效
• 通过维基云表格设置
• 等等等……

食用教程

方案一，免费静态服务器部署（推荐）

1.准备

本项目支持Vercel、EdgeOnePages、Netlify、cloudflare pages等。部署前有以下几个工作要准备：

2.获取API和新建模板

打开记事本，后面需要记录几个重要环境变量

点击我制作的维格云模板链接维格云模板，将其另存到自己的维格云空间站，然后打开“设置”表格再点击右上角的“API”

然后分别获取复制 表格的，Datasheets ID、View ID、API，记在小本本上

3.Fork项目

打开本项目仓库地址点我点击右上角的 Fork 克隆代码。

4.部署

这里演示 EdgeOne Pages 其它平台差不太多。打开平台链接点击>创建项目>导入Git仓库

选择刚刚 Fork 的仓库（如果没有提前绑定Github账号会提示你绑定）

按要求填写项目名称，选择加速区域，这里要注意一点是如果有备案的域名的话建议选择“全球可用区（含中国大陆）”，如果想用没备案域名或免费二级域名则不能选择含中国大陆。

在“环境变量”中新增四项变量，分别把第2步获取的信息按下表所示填写，此为**必须**。

如果一开始忘记填写变量，则可以在部署后的项目设置中打开填写（VITE_TWIKOO_LINK已不需要，留言功能已集成），然后在“构建部署”中重新部署即可。到此部署就完成了，可以往下看网站配置教程。

方案二，构建静态文件部署

打开本项目仓库地址点我下载源码

解压后在 public文件夹里新建一个config.json文件，复制下方代码，把方案一第2步获取的信息填入对应位置保存即可。（这部非常重要）

1
2
3
4
5

{  
  "wikiCloudApiKey": "维格云API密钥",
  "wikiCloudDatasheetId": "配置表格ID",
  "wikiCloudViewId": "配置视图ID"
}

然后在根文件夹下运行cmd输入

1

npm run build

等待构建完成，会生成一个dist文件夹，把里面的所有文件上传到服务器即可（这里就暂不演示了）。

设置教程

复制我的模板后维格云模板打开是有六个表格，分别是设置、点滴、相册、幸福路、爱情清单、留言板。所有表格最上面一行都不能改动，否则会出错。

一、设置表格

此表格为网站的所有可设置项。其中需要注意的是，点滴、相册、幸福路、爱情清单、留言板这五个页面设置项表格需要把对应的API等信息填入此表格，如下图：

（新增留言板表格
表格中设置项效果如下图对应：

剩下的不一一解释了，表格中都有对应的说明。

二、点滴表格

只需按模板写即可，下图为显示效果，其中图片非必填项

三、相册表格

分类信息按自己需求增删，一张表格可对应多个分类，描述信息会在鼠标移动到照片上时显示。

四、幸福路表格

图片是非必填，如果有图片点击卡片展开后显示，建议是横向图片，后续会做图片适配。

五、爱情清单表格

六、留言板表格

此表格用于存储别人对网站的留言（祝福），isApproved字段可以选择是或者否，“是”表示留言会在网站展示，“否”则不显示这条留言。

到此，可以发给对象,给她一个惊喜吧！