# 站点模板使用指南 本项目已配置化为可复用模板,可快速克隆并替换为不同主题(数字游民、一人公司、TikTok 运营、独立开发等)。 ## 目录结构 ``` config/ # 配置层 site.config.ts # 主题配置(切换主题只需改 CURRENT_THEME) index.ts content/themes/ # 内容层 - 按主题组织 digital-nomad/ # 数字游民主题 messages/ zh.json # 中文文案 en.json # 英文文案 data/ tools.json # 工具数据 app/ # 应用层 - 组件与页面 components/ # 通用 UI 组件 [locale]/ # 多语言路由 lib/ theme-data.ts # 主题数据加载器 ``` ## 切换主题 ### 方式一:环境变量 ```bash # .env.local NEXT_PUBLIC_THEME=solo-company ``` ### 方式二:修改配置 编辑 `config/site.config.ts`: ```ts export const CURRENT_THEME: ThemeId = (process.env.NEXT_PUBLIC_THEME as ThemeId) || "solo-company"; // 改默认值 ``` ## 新增主题步骤 ### 1. 添加主题配置 在 `config/site.config.ts` 的 `THEME_CONFIGS` 中添加: ```ts "your-theme-id": { id: "your-theme-id", name: "你的主题名", nameEn: "Your Theme Name", tagline: "一句话描述", taglineEn: "Tagline in English", meta: { title: "站点标题 | Site Title", description: "SEO 描述", }, features: { roadmap: true, tools: true, community: true, join: false, course: false, ebook: true, }, colors: { primary: "sky", accent: "amber" }, }, ``` 在 `THEME_IDS` 数组中添加 `"your-theme-id"`。 ### 2. 创建主题内容 复制 `content/themes/digital-nomad/` 为 `content/themes/your-theme-id/`: ``` content/themes/your-theme-id/ messages/ zh.json # 修改为你的中文文案 en.json # 修改为你的英文文案 data/ tools.json # 修改为你的工具数据 ``` ### 3. 注册数据加载 在 `app/lib/theme-data.ts` 的 `getThemeMessages` 和 `getThemeToolsData` 的 switch 中添加: ```ts case "your-theme-id": { const mod = locale === "zh" ? await import("@/content/themes/your-theme-id/messages/zh.json") : await import("@/content/themes/your-theme-id/messages/en.json"); return mod.default; } ``` ## 文案结构 (messages) 参考 `content/themes/digital-nomad/messages/zh.json`: - `common` - 站点名、导航、按钮等 - `hero` - 首页主视觉 - `features` - 特性介绍 - `roadmap` - 学习路径、天数、电子书、课程 - `tools` - 工具区块 - `community` - 社区区块 - `footer` - 页脚 - `auth` - 登录注册 ## 工具数据 (tools.json) ```json { "categories": [ { "id": "category-id", "icon": "🔧", "title": "分类名", "color": "from-sky-500 to-cyan-500", "bg": "bg-sky-50", "text": "text-sky-700", "tools": [ { "name": "工具名", "desc": "描述", "href": "https://..." } ] } ] } ``` ## 7 天学习路径 (days) Day 内容当前在 `app/data/days.ts`,后续可迁移到 `content/themes/[theme]/data/days.json` 实现按主题切换。 ## 服务配置(支付、PocketBase) 详见 [docs/SERVICES.md](./SERVICES.md)。支付和 PocketBase 已配置化,可通过环境变量和主题 `services` 覆盖。 ## 功能开关 (features) 在主题配置中可关闭某些模块: - `roadmap` - 7 天学习路径 - `tools` - 工具推荐 - `community` - 社区区块 - `join` - 加入社区页 - `course` - 课程页 - `ebook` - 电子书 (功能开关的 UI 条件渲染待接入)