Files
2026-03-08 06:43:48 -05:00

3.6 KiB
Raw Permalink Blame History

站点模板使用指南

本项目已配置化为可复用模板可快速克隆并替换为不同主题数字游民、一人公司、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          # 主题数据加载器

切换主题

方式一:环境变量

# .env.local
NEXT_PUBLIC_THEME=solo-company

方式二:修改配置

编辑 config/site.config.ts

export const CURRENT_THEME: ThemeId =
  (process.env.NEXT_PUBLIC_THEME as ThemeId) || "solo-company";  // 改默认值

新增主题步骤

1. 添加主题配置

config/site.config.tsTHEME_CONFIGS 中添加:

"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.tsgetThemeMessagesgetThemeToolsData 的 switch 中添加:

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)

{
  "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。支付和 PocketBase 已配置化,可通过环境变量和主题 services 覆盖。

功能开关 (features)

在主题配置中可关闭某些模块:

  • roadmap - 7 天学习路径
  • tools - 工具推荐
  • community - 社区区块
  • join - 加入社区页
  • course - 课程页
  • ebook - 电子书

(功能开关的 UI 条件渲染待接入)