155 lines
3.6 KiB
Markdown
155 lines
3.6 KiB
Markdown
# 站点模板使用指南
|
||
|
||
本项目已配置化为可复用模板，可快速克隆并替换为不同主题（数字游民、一人公司、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 条件渲染待接入）
|