一个部署在 Cloudflare Pages + Functions + D1 上的个人数字基地。
它不是单纯的静态主页，而是一个可以长期维护的个人内容平台：动态墙、项目展示、视频入口、资源站、导航收藏、留言板、CMS 后台都可以通过网页后台管理。
- 项目介绍
- 功能预览
- 使用前必须准备
- Cloudflare 账号与信用卡验证说明
- 本地项目准备
- GitHub 仓库准备
- Cloudflare Pages 部署
- 创建 D1 数据库
- 绑定 D1 数据库
- 初始化数据库表
- 登录后台 CMS
- 后台内容管理说明
- 视频入口封面规则
- 全站背景图设置
- 留言板审核与显示
- 常用测试地址
- 常见问题与解决方法
- 更新项目的推荐流程
- 项目结构说明
- 联系方式
Digital Base V3 是一个偏游戏控制台风格的个人网站，适合用来展示自己的项目、GitHub 仓库、喜欢的视频、常用网站导航、资源站、个人动态和留言内容。
它的核心结构是：
前台展示页面 + 后台 CMS + Cloudflare Functions API + Cloudflare D1 数据库也就是说，你不需要每次改内容都去改代码。只要登录后台，就可以新增、编辑、隐藏、删除大部分内容。
| 模块 | 说明 |
|---|---|
| 首页 Hero | 展示个人网站主视觉、标题、简介、按钮 |
| 视频传送门 | 支持视频入口卡片，YouTube 自动封面，悬停/手机可静音预览 |
| 动态墙 | 发布文字、图片、视频类动态 |
| STATUS PANEL | 自动统计动态、项目、资源、导航、留言数量 |
| Recent Log | 最近动态轮播展示 |
| 项目控制台 | 展示 GitHub 项目或个人作品 |
| 资源站 | 放 Cloudflare、GitHub、ChatGPT 等资源入口 |
| 我的导航 | 放常用网站、工具、游戏、素材站 |
| 留言板 | 访客留言，后台可审核、隐藏、删除 |
| 全站背景 | 支持后台配置大背景图 |
| 后台菜单 | 用途 |
|---|---|
| 首页设置 | 改首页标题、描述、按钮、状态文案、全站背景图 |
| 轮播管理 | 管理首页 Hero 轮播图 |
| 动态管理 | 新增/编辑/隐藏/删除动态 |
| 留言管理 | 审核、隐藏、删除留言 |
| 视频入口 | 管理视频传送门内容 |
| 项目管理 | 管理项目展示 |
| 资源站 | 管理资源入口 |
| 我的导航 | 管理常用入口和书签 |
| 朋友空间 | 预留功能，可后续扩展 |
| 返回前台 | 回到网站首页 |
| 退出登录 | 退出 CMS 后台 |
在开始之前，一定先准备好这些东西，避免中途白忙活。
| 项目 | 是否必须 | 用途 |
|---|---|---|
| GitHub 账号 | 必须 | 存放项目代码 |
| Cloudflare 账号 | 必须 | 部署网站、创建 D1 数据库 |
| 邮箱 | 必须 | 注册、验证账号 |
| 可用网络环境 | 推荐 | Cloudflare、GitHub 访问可能受网络影响 |
| 信用卡 / 可验证支付方式 | 可能需要 | Cloudflare 账号风控或部分服务验证 |
建议电脑安装：
| 工具 | 用途 |
|---|---|
| Git | 提交和上传项目 |
| Node.js | 运行检查命令、脚本 |
| VS Code / Trae / Cursor | 修改代码 |
| 浏览器 | 测试网站和后台 |
检查 Git：
git --version检查 Node.js：
node -v这个项目使用了 Cloudflare 的：
Cloudflare Pages
Cloudflare Functions
Cloudflare D1大多数情况下免费额度够用。但是新账号、风控账号、部分地区账号，Cloudflare 可能会要求你进行支付方式验证。
你可能在 Cloudflare 使用过程中遇到：
- 创建服务时提示验证身份
- 绑定某些资源时要求添加付款方式
- D1 / R2 / Workers 相关服务要求验证
- 账号安全风控要求信用卡验证
不一定。有些账号可以直接创建 Pages 和 D1，有些账号会被要求验证信用卡或付款方式。
Cloudflare 验证信用卡通常是为了确认账号真实性，不等于一定会收费。但你仍然要自己看清 Cloudflare 页面提示，确认是否有付费计划、是否开启了额外收费服务。
在继续部署前，先确认：
Cloudflare 账号能正常登录
Pages 能创建项目
D1 能创建数据库
账号没有验证拦截如果卡在验证页面，先完成验证再继续。否则后面代码推上去了，也可能因为资源没有创建成功导致网站功能不完整。
git clone https://github.com/Nu-Exception/digital-base.git
cd digital-base如果你是下载 ZIP，解压后进入项目目录。
index.html
script.js
styles.css
README.md
schema.sql
admin/
functions/
data/如果没有这些文件，说明你进错文件夹了。
git status正常会显示：
On branch main如果显示：
fatal: not a git repository说明当前文件夹不是 Git 仓库。你需要进入真正的项目目录，例如：
cd digital-base-v3或者重新初始化：
git init
git branch -M main进入 GitHub：
GitHub → New repository建议仓库名：
digital-base选择：
Public创建后复制仓库地址，例如：
https://github.com/Nu-Exception/digital-base.gitgit remote add origin https://github.com/Nu-Exception/digital-base.git如果已经绑定过，但地址不对：
git remote set-url origin https://github.com/Nu-Exception/digital-base.git查看远程地址：
git remote -vgit add .
git commit -m "init digital base"
git push -u origin main打开 Cloudflare 后：
Workers & Pages → Create application → Pages → Connect to Git选择你的仓库：
digital-base因为这个项目是原生 HTML/CSS/JS，不需要构建命令。
推荐设置：
| 项目 | 填写 |
|---|---|
| Framework preset | None |
| Build command | 留空 |
| Build output directory | / 或留空 |
| Root directory | / |
如果 Cloudflare 要求输出目录，可以填：
/点击：
Save and Deploy等待部署完成，成功后会得到类似：
https://digital-base.pages.dev后台动态、项目、留言等内容需要 D1 数据库保存。
Cloudflare Dashboard：
Storage & databases → D1 SQL Database → Create数据库名建议：
digital-base-db创建完成后记住数据库名称。
进入你的 Pages 项目：
Workers & Pages → digital-base → Settings → Bindings添加 D1 绑定：
| 类型 | 变量名 | 数据库 |
|---|---|---|
| D1 database | DB |
digital-base-db |
注意变量名必须是：
DB如果写成别的，Functions API 会读不到数据库。
保存后重新部署一次。
项目根目录有：
schema.sql这个文件用于创建表。
进入：
D1 → digital-base-db → Console复制 schema.sql 内容进去执行。
如果你安装了 Wrangler：
npx wrangler d1 execute digital-base-db --file=./schema.sql执行成功后，数据库会创建这些表：
posts
projects
resources
bookmarks
messages
video_links
hero_slides
site_settings
friends不同版本可能略有差异，以 schema.sql 为准。
部署成功后，后台地址一般是：
https://你的域名/admin/例如：
https://digital-base.pages.dev/admin/项目里后台验证通常会用一个 token。你需要检查：
functions/_lib/cms.js
admin/admin.js或项目文档中定义的 admin token。
如果后台提示未授权，说明：
- token 不对
- API 没部署成功
- Functions 没生效
- D1 没绑定
路径：
后台 → 首页设置可修改：
| 字段 | 作用 |
|---|---|
| Hero Kicker | 首页小标题 |
| Hero 标题 | 首页大标题 |
| Hero 描述 | 首页介绍文字 |
| 主按钮文字 | 第一个按钮文案 |
| 主按钮链接 | 第一个按钮跳转 |
| 副按钮文字 | 第二个按钮文案 |
| 副按钮链接 | 第二个按钮跳转 |
| 状态标题 | 状态卡标题 |
| 状态说明 | 状态卡说明 |
| 背景图链接 | 全站底层背景图 |
注意：背景图链接控制的是整个网站底层背景，不是 Hero 轮播图。
路径：
后台 → 动态管理可以发布文字、图片、视频类动态。图片链接一行一个。
路径：
后台 → 视频入口字段说明：
| 字段 | 说明 |
|---|---|
| 标题 | 视频卡片标题 |
| 说明 | 视频简介 |
| 封面图 | 可填图片直链，也可填视频链接 |
| 跳转链接 | 点击打开跳转的链接 |
| 标签 | 逗号分隔 |
| 排序 | 数字越小越靠前 |
| 显示 | 是否在前台显示 |
路径：
后台 → 项目管理适合填写 GitHub 项目、自己做的网站、工具软件、学习项目、视频剪辑展示项目。
路径：
后台 → 资源站适合放 Cloudflare、GitHub、ChatGPT、文档站、开发工具、图片素材站。
路径：
后台 → 我的导航这里的数据会影响首页：
FAST LINKS / 常用入口也会影响：
我的导航页 / 书签收藏区路径：
后台 → 留言管理访客留言后，后台可以显示、隐藏、删除。如果前台没有显示留言，先看后台是否处于隐藏或待审核状态。
视频入口的「封面图」字段支持两种写法。
可以填：
https://example.com/image.jpg
https://example.com/image.png
https://example.com/image.webp前台会直接显示图片。
YouTube 链接会自动识别并生成封面：
https://www.youtube.com/watch?v=xxxx
https://youtu.be/xxxx
https://youtube.com/shorts/xxxx系统会自动转换成 YouTube 缩略图。
B站、抖音、小红书等链接不一定能直接拿到封面，因为平台可能有跨域、反爬或权限限制。
这种情况下：
- 不会报错
- 会显示统一视频占位封面
- 点击打开仍然跳转原链接
进入：
后台 → 首页设置 → 背景图链接填入图片直链，例如：
https://example.com/background.jpg建议图片为横向大图、暗色、赛博风、游戏桌面、深夜工作台、复古电脑、雨夜城市。
不建议使用太亮的图，否则文字会看不清。
正确：
https://example.com/bg.jpg错误：
Pinterest 页面链接
B站页面链接
网页文章链接留言板逻辑可能根据版本不同有两种模式。
访客发布留言后，前台立即显示。
访客发布留言后，后台可见，但前台不显示。你需要进入：
后台 → 留言管理点击：
显示如果 /api/messages 返回空，但后台有留言，检查 is_public 或后台显示状态。
部署后，可以用这些地址检查接口是否正常。
https://你的域名/api/posts
https://你的域名/api/projects
https://你的域名/api/resources
https://你的域名/api/bookmarks
https://你的域名/api/messages
https://你的域名/api/messages?debug=1正常接口会返回类似：
{
"posts": []
}或者：
{
"messages": []
}如果 debug 有数据，但正常接口空，说明过滤逻辑或显示状态有问题。
报错：
fatal: not a git repository原因：当前目录不是 Git 仓库。
解决：
cd 你的项目目录
git status如果还是不行：
git init
git branch -M main先打开：
/api/posts
/api/projects
/api/messages如果都返回空，检查：
- D1 是否创建
- Pages 是否绑定了 D1
- 绑定变量名是否是
DB - 是否重新部署
- 数据库表是否初始化
- 后台内容是否勾选显示
检查：
是否点了显示
is_public 是否为 1
前台是否缓存
是否 Ctrl + F5 强制刷新
/api 对应接口是否返回数据打开：
/api/messages?debug=1如果 debug 里 all_rows 有数据，但 /api/messages 空，说明 messages 接口过滤逻辑有问题。
解决方向：
让 /api/messages 直接返回最近 50 条 messages 表数据如果显示的是 UTC 时间，不是中国时间，需要统一使用：
Asia/Shanghai前端格式化应使用：
new Date(dateString).toLocaleString("zh-CN", {
timeZone: "Asia/Shanghai"
});数据库可以继续存 UTC，显示层转换即可。
检查封面图字段。
正确图片直链：
https://xxx.com/xxx.jpgYouTube 视频链接：
https://www.youtube.com/watch?v=xxxx如果是 B站、抖音、小红书，可能无法自动拿封面，会显示占位图，这是正常现象。
检查是否存在：
scrollIntoView
autofocus
focus()
location.hash
window.scrollTo首次打开网站时，如果没有 hash，应该保持顶部：
window.scrollTo(0, 0);可能是部署还没完成、浏览器缓存、Cloudflare 缓存、推送的不是 main 分支。
解决：
Cloudflare Pages → Deployments确认最新 commit 变绿。然后浏览器：
Ctrl + F5如果脚本读取 GitHub 项目时报：
API rate limit exceeded解决：
- 等一小时
- 或使用 GitHub Token
- 或手动在后台项目管理添加项目
当前版本主要使用：
D1 + 外链图片如果你没有做站内图片上传，R2 不是必须。图片可以先用外部图床、GitHub 图片、Cloudinary、Postimages 等方式。
以后如果要做真正的后台上传图片，再接入 R2。
每次修改项目后，建议使用命令行提交。
git status
git add .
git commit -m "update site"
git pushCloudflare Pages 会自动部署。
部署后进入：
Cloudflare Pages → Deployments确认最新提交变成绿色。
以后让 AI 或 Codex 修改项目时，建议每次都加上：
同步更新 README.md，说明本次改动内容、使用方法和注意事项。这样 README 不会落后于项目功能。
digital-base/
├── index.html
├── script.js
├── styles.css
├── README.md
├── schema.sql
├── data/
│ └── site.json
├── admin/
│ ├── index.html
│ ├── admin.js
│ └── admin.css
└── functions/
├── _lib/
│ ├── cms.js
│ └── resource.js
└── api/
├── posts.js
├── projects.js
├── resources.js
├── bookmarks.js
├── messages.js
├── video-links.js
├── hero-slides.js
└── site-settings.js| 文件 | 作用 |
|---|---|
index.html |
前台页面结构 |
script.js |
前台动态渲染和交互逻辑 |
styles.css |
前台样式 |
admin/index.html |
后台页面结构 |
admin/admin.js |
后台管理逻辑 |
admin/admin.css |
后台样式 |
functions/api/*.js |
Cloudflare Functions API |
schema.sql |
D1 数据库表结构 |
README.md |
项目说明文档 |
以后可以继续加：
- 图片上传到 R2
- Markdown 文章系统
- 留言回复
- 评论系统
- 访客统计
- Steam 状态展示
- GitHub 提交记录
- 视频分类页
- 搜索功能
- 标签归档
- 手机端专属优化
- 登录权限系统
- 主题切换
- 音乐播放器
作者：CS
GitHub：
https://github.com/Nu-Exception项目地址：
https://github.com/Nu-Exception/digital-base邮箱：
gameforum.clubtime@gmail.com个人网站：
https://digital-base.pages.dev这个项目不是一次性写完就结束的模板，而是一个可以不断扩展的个人数字基地。
你可以把它当成：
个人主页
项目展示台
游戏内容入口
学习记录站
工具导航页
数字生活档案馆先让它跑起来，再慢慢填内容、改样式、加功能。
真正重要的是：
先部署成功
再接好数据库
再确认 API 有数据
最后再慢慢美化不要一开始就追求完美。能跑起来，才有继续优化的价值。