改造成你的网站

本页提供将本站改造为任意角色生日会站点的完整清单，按必改项、选改项与验证项组织。本项目基于 MIT 协议开源，其它生贺组可直接 fork 后按清单逐项替换。

改造难度总览

难度	内容
★ 改配置就行	三个配置文件、歌单、贡献者、文案
★★ 换素材	图片、音乐、图标
★★ 改 HTML	index.html 的 SEO 标签
★★★ 改代码	导航栏链接、页脚结构、新增板块

---

必改 ①：三个配置文件

src/config/site.config.js —— 站点信息

该文件定义站名、组名、QQ 群号、生日日期与备案号。修改生日日期后倒计时自动生效。每个字段的详细说明见 site.config.js 配置。

// 换成你的信息
siteName: '甘雨生日会',
groupName: '循循守月',
qqGroup: '123456789',
birthday: { month: 12, day: 2, eventName: '甘雨生日' },
icp: { text: '', href: '' }, // 无备案就留空

src/config/content.config.js —— 页面内容

该文件定义首页各板块的文案与图片、核心 / 全部贡献者名单、招募信息、音乐歌单与页脚文字。逐字段说明见 content.config.js 配置。

src/config/theme.config.js —— 视觉主题

修改文件顶部的三个 accent 常量即可更换全站主题色，按钮、链接、渐变、轮播箭头、品牌色均会自动生效：

const accentPurple = '#8a2be2'; // 改成你的主色
const accentPink   = '#da70d6'; // 改成你的辅色
const accentGold   = '#ffd700'; // 改成你的高亮色

深色模式下如需更亮或更暗的变体，可在 colors.dark 中微调。完整字段说明见 theme.config.js 配置。

---

必改 ②：静态资源

图片（public/images/）

文件	用途	建议
hero-title.png	首页大标题图	透明底 PNG，宽 1200px+。换名后同步改 content.config.js 的 hero.titleImage.src
birthday-*.jpg	首屏轮播贺图	比例统一（如 16:9），在 hero.slides 数组里增删
贡献者头像	贡献者卡片	接近正方形。文件名随意，与配置里的 avatar 对应即可
music-cover.jpg	音乐封面	正方形效果最佳

音乐（public/music/）

歌曲文件名需与 playlist 中的 src 一一对应。建议将 mp3 压缩至 10MB 以内：页面不会预加载音乐文件，但需考虑用户播放时产生的流量。

图标（public/）

文件	用途
favicon.png	浏览器标签页图标 + 导航栏 logo
favicon-32x32.png	32×32 专用图标
apple-touch-icon.png	iOS「添加到主屏幕」图标（180×180）
icons.svg	SVG 图标精灵（目前含 B 站图标）

---

必改 ③：index.html 的 SEO 标签

打开 index.html，替换 <head> 中约第 8–20 行的每一项：

<title>刻晴生日会 - 璃月七星玉衡星</title>                        <!-- 浏览器标签标题 -->
<meta name="description" content="2026刻晴生日会筹备中……" />        <!-- 搜索引擎摘要 -->
<meta name="keywords" content="刻晴, 原神, 生日会, 同人, 2026" />     <!-- 关键词 -->
<meta property="og:title" content="2026刻晴生日会 - 璃月七星玉衡星" /><!-- 分享卡片标题 -->
<meta property="og:description" content="2026刻晴生日会筹备中……" />  <!-- 分享卡片描述 -->
<meta property="og:url" content="https://keqing.zone/" />            <!-- 你的域名 -->
<meta property="og:image" content="https://keqing.zone/images/hero-title.png" /> <!-- 分享卡片大图 -->
<meta name="twitter:card" content="summary_large_image" />           <!-- Twitter/X 卡片类型 -->
<meta name="twitter:title" content="..." />                          <!-- Twitter 卡片标题 -->
<meta name="twitter:description" content="..." />                    <!-- Twitter 卡片描述 -->
<meta name="twitter:image" content="..." />                          <!-- Twitter 卡片大图 -->
<link rel="canonical" href="https://keqing.zone/" />                 <!-- 规范链接（防重复收录） -->
<link rel="preload" as="image" href="/images/hero-title.png" />      <!-- 首屏图预加载 -->

标签	不改会怎样
<title>	标签页和搜索结果显示别人的站名
description	搜索结果的摘要文字是别人的
og:* / twitter:*	微信 / QQ / Discord 分享链接时显示的标题、描述、大图是别人的
canonical	搜索引擎可能把别人的域名当作规范来源
preload	改了 hero 图文件名的话预加载会 404（无伤大雅但浪费一次请求）

---

选改清单

文件	改什么
src/components/Navbar.jsx	导航栏文字链接（navLinks / rightNavLinks）与外链图标（externalLinks）
public/sitemap.xml	把里面的域名换成你的
public/_redirects	通用 SPA 回退规则，一般不用动
package.json	name、version（页脚版本号自动读取 version）
README.md、LICENSE	署名（MIT 要求保留原许可声明，可在其下追加你的署名）
wrangler.toml	Cloudflare Pages 项目名 name
src/context/ThemeContext.jsx	localStorage 键名 keqing-theme（不改也能正常运行）

---

验证清单

完成上述修改后，逐项验证以下项目：

• [ ] npm run dev 页面正常，控制台无报错
• [ ] 倒计时日期正确（注意 month 是自然月，不要写错）
• [ ] 页脚备案号正确或已隐藏
• [ ] 首页轮播图、头像、音乐封面显示正常
• [ ] 点击「复制群号」弹出「复制成功」提示（正文显示已复制的群号）
• [ ] 浅色 / 深色 / 跟随系统三种模式都正常
• [ ] npm run build 构建通过，预渲染成功（需先 npx playwright install chromium）
• [ ] 预览 dist/ 时直接访问 /contributors 不 404

建议保留的内容

• 页脚免责声明（素材版权归游戏官方所有的声明）
• LICENSE 中的 MIT 许可署名（可在其下追加你自己的署名）