content.config.js —— 页面内容配置

本页列出 src/config/content.config.js 中的全部配置块，说明每个配置块的结构、字段含义与常用操作。

src/config/content.config.js 是组员日常维护中修改频率最高的文件：首页各板块的文案与图片、核心 / 全部贡献者名单、招募信息、歌单、页脚文字均在此配置。

站点名 / 组名 / QQ 群号 / 生日日期 / 备案号在 site.config.js 中配置，不要在这里重复填写。

文件包含 4 个配置块，本文逐一说明：

配置块	作用	详细说明
`homeSections`	首页四个板块的内容	见下文
`contributorsPage`	全部贡献者名单（`/contributors` 页面）	见下文
`playlist`	音乐播放器歌单	见下文
`footerConfig`	页脚各区块	见下文

`homeSections` —— 首页板块

一个数组，每一项是一个板块。数组的顺序就是页面上从上到下的顺序（hero 固定显示在最顶部）。

每个板块共用的字段如下表所示：

字段	类型	说明
`id`	字符串	板块唯一标识，绝对不要修改。首页渲染时靠它在 `src/pages/HomePage.jsx` 的 `sectionComponents` 里查对应组件
`status`	字符串	`'enable'` 显示板块 / `'disable'` 隐藏板块。隐藏不是删除，随时可改回来
其它字段	——	随板块类型不同而不同，见下文

板块一：`hero` —— 首屏

首屏是全屏区域：大标题图 + 描述 + 两个按钮 + 右侧贺图轮播 + 生日倒计时。

{
  id: 'hero',
  status: 'enable',
  titleImage: {
    src: '/images/hero-title.png',
    alt: '刻晴生日会 需要你的加入',
  },
  description: '玉衡星刻晴的生日即将到来，我们正在筹备一场盛大的庆典……',
  primaryButton: {
    text: '立即加入',
    targetId: 'recruit',
  },
  secondaryButton: {
    text: '了解更多',
    targetId: 'contact',
  },
  slides: [
    { src: '/images/birthday-2021.jpg', alt: '2021年刻晴生日' },
    { src: '/images/birthday-2022.jpg', alt: '2022年刻晴生日' },
    { src: '/images/birthday-2023.jpg', alt: '2023年刻晴生日' },
    { src: '/images/birthday-2024.jpg', alt: '2024年刻晴生日' },
  ],
},

各字段说明如下。

`titleImage` —— 首页大标题图

titleImage 的字段如下表所示。

字段	说明
`src`	图片路径。文件放在 `public/images/` 下，路径从 `/images/` 开始写
`alt`	图片加载失败时显示的替代文字，也是屏幕阅读器读到的内容

图片建议

建议使用透明底 PNG，宽度在 1200px 以上。这张图是首屏的视觉焦点，index.html 中已对它配置 <link rel="preload"> 预加载。

`description` —— 标题下方描述

一段纯文本，显示在大标题图下方。

`primaryButton` / `secondaryButton` —— 两个按钮

两个按钮的字段如下表所示。

字段	说明
`text`	按钮文字
`targetId`	点击后平滑滚动到哪个板块。填目标板块的 `id`（如 `recruit`、`contact`）

主按钮为紫底白字的实心样式，次按钮为描边样式。两个按钮均只在页面内平滑滚动，不跳转外链。

`slides` —— 右侧贺图轮播

一个数组，每张图一项：

字段	说明
`src`	图片路径（`public/images/` 下）
`alt`	替代文字

按需增删：向数组追加一项即新增一张图，轮播自动适应
自动播放间隔默认 5 秒，可在 theme.config.js → effects.swiper.autoplayDelay 修改
图片建议统一比例（如 16:9），避免轮播高度跳动

板块二：`coreContributors` —— 核心贡献者

{
  id: 'coreContributors',
  status: 'enable',
  title: '核心贡献者',
  description: '感谢每一位为刻晴生日会付出心血的老师，排名不分先后。',
  viewAllText: '查看全部',
  contributors: [ /* 成员数组，见下 */ ],
},

字段	说明
`title`	板块标题
`description`	标题下方的一行说明
`viewAllText`	「查看全部」按钮文字，点击跳转 `/contributors` 页面
`contributors`	首页展示的核心成员数组

contributors 数组每一项的成员字段如下表所示：

字段	类型	说明
`name`	字符串	昵称
`role`	字符串	职位 / 负责内容，显示在昵称下方
`avatar`	字符串	头像图片路径，建议放 `public/images/`
`bilibili`	字符串	B 站个人空间链接。整个头像卡片可点击跳转到这里

提示

「核心贡献者」与 /contributors 页面的「全部贡献者」是两份独立名单（见下文 contributorsPage）。首页只放主办和核心成员，完整名单放全量页面。

板块三：`recruit` —— 招募信息

{
  id: 'recruit',
  status: 'enable',
  title: '招募信息',
  description: '刻晴生日会正在招募各方人才……',
  items: [ /* 岗位卡片数组，见下 */ ],
},

字段	说明
`title` / `description`	板块标题与描述
`items`	招募岗位卡片数组，顺序即显示顺序

items 数组每一项的岗位字段如下表所示：

字段	类型	说明
`icon`	字符串	Lucide 图标名，决定卡片左上角的图标
`title`	字符串	岗位名称
`desc`	字符串	一句话岗位说明
`skills`	字符串数组	技能标签，显示为卡片底部的小胶囊

下表列出可用的图标名对照（RecruitPanel.jsx 的 iconMap 只注册了这 6 个，填写其它名称会回退成 Users）：

图标名	形状	适合
`Palette`	调色盘	设计、绘画
`Video`	摄像机	视频、剪辑
`Music`	音符	作曲、翻唱
`FileText`	文档	文案、策划
`Gamepad2`	手柄	游戏素材、玩法测试
`Users`	人群	综合事务、社区协力

如需新增图标，修改 src/components/RecruitPanel.jsx 的 iconMap（import 图标名并加进映射表）。完整图标库见 Lucide 图标官网。

板块四：`contact` —— 联系方式

{
  id: 'contact',
  status: 'enable',
  title: '联系方式',
  description: '加入我们的社区，获取最新资讯和活动信息！',
},

该板块仅包含两个可配置字段：title（标题）与 description（描述）。

群号、组名自动读取 site.config.js，无需在此填写。板块会渲染一个群号卡片和「复制群号」按钮。

`contributorsPage` —— 全部贡献者名单

/contributors 独立页面的完整名单（与首页核心贡献者互不影响），是一个对象：

export const contributorsPage = {
  title: '全部贡献者名单',        // 页面大标题
  description: '感谢每一位……',   // 标题下方的一行说明
  members: [
    { name: '昵称', role: '职位', avatar: '/images/xxx.jpg', bilibili: 'https://space.bilibili.com/xxxx' },
  ],
};

字段	说明
`title`	页面标题
`description`	标题下方的一行说明文字
`members`	成员数组，成员字段见下

members 数组每一项的成员字段如下表所示：

字段	说明
`name`	昵称
`role`	职位 / 负责内容
`avatar`	头像图片路径（可选项，不填则显示默认图标）
`bilibili`	B 站空间链接。留空或填 `'#'` 表示头像不可点击

添加成员：在 members 数组末尾（文件中注释标记的位置）追加一项即可。

`playlist` —— 音乐歌单

全局悬浮音乐播放器的歌单：

export const playlist = [
  {
    id: 1,                             // 歌曲唯一 id，顺延即可
    title: '刻晴赋',                    // 歌名
    artist: '夏翊然',                   // 艺术家
    src: '/music/keqing-fu.mp3',       // 歌曲文件路径（文件放 public/music/）
    cover: '/images/music-cover.jpg',  // 封面图路径（文件放 public/images/）
  },
];

字段	说明
`id`	唯一标识，从 1 开始顺延，不要重复
`title`	歌名
`artist`	艺术家名
`src`	音频文件路径。文件必须放在 `public/music/` 目录
`cover`	封面图路径。显示在迷你播放条和展开卡片上

按数组顺序播放
播放模式切换逻辑在 MusicContext 中已实现（列表循环 / 单曲循环 / 随机），但界面上暂无可切换按钮，默认列表循环
歌单为空时播放器自动隐藏

`footerConfig` —— 页脚配置

页脚由多个区块组成，每个区块用 status 控制显隐：

export const footerConfig = {
  brand:     { status: 'enable' },
  tagline:   { status: 'enable', text: '玉衡一心定天衡 · 生贺组作品' },
  description:{ status: 'enable', text: '本站为原神角色「刻晴」同人生日庆祝活动页面，非官方内容' },
  credits:   { status: 'enable' },
  copyright: { status: 'enable', text: '© 2026 Keqing Birthday Fan Project. All rights reserved.' },
  version:   { status: 'enable' },
  disclaimers: {
    status: 'enable',
    items: [
      '本网站为同人作品，所涉及的官方游戏角色、图像、音乐等素材版权归米哈游所有。',
      'Genshin Impact and Keqing are trademarks of miHoYo/HoYoverse. ...',
    ],
  },
};

下表列出各区块的 text 支持与内容来源：

区块	是否有 `text`	内容来源
`brand`	无	自动显示 `site.config.js` 的 `siteName`
`tagline`	有	自定义标语
`description`	有	自定义站点描述
`credits`	无	自动生成：「由 {groupName} 制作 · QQ群：{qqGroup}」
`copyright`	有	自定义版权行
`version`	无	自动读取 package.json 的 version，无需手动维护
`disclaimers`	有（`items` 数组）	免责声明列表，逐行显示

提示

页脚在深色模式下还有一层上升粒子背景（footerParticles），其配置位于 theme.config.js，见主题配置。

常用操作速查

新增一首歌曲

将 mp3 文件放入 public/music/，封面图片放入 public/images/
在 playlist 末尾追加一项（id 顺延）

新增一个招募岗位 在 recruit.items 末尾追加 { icon, title, desc, skills }。

隐藏某个板块 把对应板块的 status 改为 'disable'，无需删除任何内容。

调整首页板块顺序 调整 homeSections 数组中各板块的先后顺序（hero 固定在最上，不参与排序）。

content.config.js —— 页面内容配置 ​

homeSections —— 首页板块 ​

板块一：hero —— 首屏 ​

titleImage —— 首页大标题图 ​

description —— 标题下方描述 ​

primaryButton / secondaryButton —— 两个按钮 ​

slides —— 右侧贺图轮播 ​

板块二：coreContributors —— 核心贡献者 ​

板块三：recruit —— 招募信息 ​

板块四：contact —— 联系方式 ​

contributorsPage —— 全部贡献者名单 ​

playlist —— 音乐歌单 ​

footerConfig —— 页脚配置 ​

常用操作速查 ​