type
Post
status
Published
date
Mar 29, 2026
slug
love-web
summary
一款复刻Brave主题的情侣网站，利用维基云多维表格做数据库，无需服务器，全免费方案部署。
tags
热门文章
推荐
AI应用
category
折腾日记
icon
password
年底了终于比较不忙了，在空闲时间（摸鱼）借助Trae CN花了几天时间完成了一个情侣主题站的开发，效果复刻自 Typecho 的 Brave 主题。
为什么要开发这样一个网站呢，有两个原因，一个是学习一下AI编程，另一个是因为此前我折腾过这个Brave主题，我觉得非常棒，但有一个不足是必须要有一个服务器，要钱，虽然有免费的服务器但很难保证不跑路也会有很多限制。我想利用Vercel/EdgeOne Pages 等静态文件服务器部署，这样免费速度又快。
功能特色
- 恋爱计时器
- 纪念日倒计时
- 随机情话
- 留言墙
- 点点滴滴
- 时光轴
- 关于我们
- 恋爱清单
- 相册
- 多种可控特效
- 通过维基云表格设置
- 等等等......
食用教程
方案一，免费静态服务器部署（推荐）
一，准备
本项目支持Vercel、EdgeOnePages、Netlify等。部署前有以下几个工作要准备：
- 注册维格云：
vika.cn
vika.cn
- 注册Github：
GitHubGitHub · Change is constant. GitHub keeps you ahead.
GitHub · Change is constant. GitHub keeps you ahead.
Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.
GitHub
- 注册EdgOnePages：
注册 - 腾讯云
注册 - 腾讯云
腾讯云为数百万的企业和开发者提供安全、稳定的云服务器、云主机、CDN、对象存储、域名注册、云存储、云数据库等云服务，帮助用户解决游戏、视频、移动、微信、互联网+等行业的架构难题，是全球领先的云计算服务商。
二，获取API和新建模板
打开记事本，后面需要记录几个重要环境变量
点击下方我制作的维格云模板链接将其另存到自己的维格云空间站，然后打开“设置”表格再点击右上角的“API”
然后分别获取复制 表格的，Datasheets ID、View ID、API，记在小本本上
三，Fork项目
打开本项目仓库地址，点击右上角的 Fork 克隆代码。
四，部署
这里演示 EdgeOne Pages 其它平台差不太多。打开![]()
console.cloud.tencent.com![console.cloud.tencent.com]()
![]()
console.cloud.tencent.com
选择刚刚 Fork 的仓库（如果没有提前绑定Github账号会提示你绑定）
按要求填写项目名称，选择加速工域，这里要注意一点是如果有备案的域名的话建议选择“全球可用区（含中国大陆）”，如果想用没备案域名或免费二级域名则不能选择含中国大陆。
在“环境变量”中新增3项变量，分别把
第2步获取的信息按下表所示填写，此为必须。变量名 | 说明 |
VITE_WIKI_CLOUD_API_KEY | 维格云API密钥 |
VITE_WIKI_CLOUD_DATASHEET_ID | 配置表格ID |
VITE_WIKI_CLOUD_VIEW_ID | 配置视图ID |
如果一开始忘记填写变量，则可以在部署后的项目设置中打开填写，然后在“构建部署”中重新部署即可。到此部署就完成了，可以往下看网站配置教程。
方案二，构建静态文件部署
打开本项目仓库地址，下载源码
解压后在
public文件夹里新建一个config.json文件，复制下方代码，把方案一第2步获取的信息填入对应位置保存即可。（这部非常重要）然后在根文件夹下运行
cmd输入npm run build等待构建完成，会生成一个dist文件夹，把里面的所有文件上传到服务器即可（这里就暂不演示了）设置教程
复制我的模板后vika.cn
vika.cn
打开是有六个表格，分别是设置、点滴、相册、幸福路、爱情清单、留言板。所有表格最上面一行都不能改动，否则会出错。
一、设置表格
此表格为网站的所有可设置项。其中需要注意的是，点滴、相册、幸福路、爱情清单这四个页面设置项表格需要把对应的API等信息填入此表格，如下图：
表格中设置项效果如下图对应：
剩下的不一一解释了，表格中都有对应的说明。
二、点滴表格
只需按模板写即可，下图为显示效果，其中图片非必填项
三、相册表格
分类信息按自己需求增删，一张表格可对应多个分类，描述信息会在鼠标移动到照片上时显示。
四、幸福路表格
图片是非必填，如果有图片点击卡片展开后显示，建议是横向图片，后续会做图片适配。
五、爱情清单
六、留言板表格
此表格用于存储别人对网站的留言（祝福），isApproved字段可以选择是或者否，“是”表示留言会在网站展示，“否”则不显示这条留言。
到此，可以发给对象,给她一个惊喜吧！
- 作者:水常
- 链接:https://blog.shuichanga.cn/article/love-web
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
