品牌定制

HackerStart 的品牌定制分两层：在线配置（通过管理面板即时生效）和代码修改（需要修改文件并重新部署）。

在线配置（通过管理面板）

产品名称

产品名称显示在 Header、Footer 和浏览器标签页。通过管理面板修改：

1. 以平台管理员身份登录
2. 进入 /admin/config
3. 找到「平台设置」→「产品名称」（platform.productName）
4. 修改后保存，即时生效

例如：将 "HackerStart" 改为 "Coding Girls Club"，Header 和 Footer 会自动更新。

代码修改（需要重新部署）

Logo 图片

当前 Logo 使用产品名称缩写（自动生成）。如果你需要自定义 Logo 图片：

1. 准备你的 Logo 文件（推荐 SVG 格式）
2. 放置到 public/ 目录下（如 public/logo.svg）
3. 修改 src/components/Header.tsx 中的 <ProductLogo> 组件，将文字缩写替换为图片：

function ProductLogo({ productName }: { productName: string }) {
  return (
    <img
      src="/logo.svg"
      alt={productName}
      className="size-7 rounded-md object-contain"
    />
  )
}

4. 同步修改 src/components/Footer.tsx 中对应的 Logo 部分

Favicon

Favicon 是浏览器标签页上的小图标：

1. 使用 CloudConvert 或类似工具生成 favicon.ico
2. 替换 public/favicon.ico

Open Graph 图片

Open Graph 图片在社交媒体分享时显示：

1. 准备一张 1200×630 的图片（推荐 PNG）
2. 放置到 public/og.png

配色方案

HackerStart 使用 Tailwind CSS 4 的 CSS 变量系统。配色定义在 src/styles.css 中：

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0.042 265.755);
  /* ... 更多变量 */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... 暗色模式变量 */
}

修改对应的 CSS 变量即可全局更换配色。

主题设置

明暗模式由 next-themes 管理，配置在 src/routes/__root.tsx 的 <ThemeProvider> 中：

<ThemeProvider
  attribute="class"
  defaultTheme="system"   // 默认跟随系统
  enableSystem            // 启用系统偏好检测
  disableTransitionOnChange
>

可选值：light（仅明亮）、dark（仅暗色）、system（跟随系统）。

法律页面

隐私政策和服务条款存放在 content/legal/ 目录下：

content/legal/
├── privacy-policy.mdx      # 英文隐私政策
├── privacy-policy.en.mdx   # 英文隐私政策
├── terms-of-service.mdx    # 中文服务条款
└── terms-of-service.en.mdx # 英文服务条款

访问路径：/legal/privacy-policy 和 /legal/terms-of-service。

直接编辑对应 MDX 文件即可，支持 Markdown 语法。lastUpdated 字段会显示在页面顶部。

国际化文本

所有 UI 文本通过 Paraglide JS 管理，定义在 messages/zh.json 和 messages/en.json 中：

• 站点名称、描述、导航文案
• 表单标签、按钮文案、错误提示
• 页脚、Header 等区域文本

修改对应的 message key 即可，详见《国际化》。