第五部分：自定义与扩展

5.1 项目结构

FunRadiusP/
├── app/              # 页面路由与布局
├── components/       # React 组件
├── lib/              # 工具函数（内容读取、Markdown 解析、i18n）
├── content/          # 内容文件（博客、文档、动态、演示、页面）
│   ├── posts/        #   博客文章（子模块）
│   ├── docs/         #   文档集（子模块）
│   ├── moments/      #   日常动态（子模块）
│   ├── demos/        #   交互演示（子模块）
│   └── spec/         #   静态单页面（子模块）
├── scripts/          # 构建脚本（复制资源、生成 RSS/Sitemap）
├── docs/             # AI 开发文档（仅开发参考，不参与构建）
└── public/           # 静态资源（图片、Live2D 模型、搜索引擎验证文件）

content/ 下每个目录可以是独立的 Git 子模块，也可以是普通文件夹。 详见第三部分的"内容目录结构"说明。

5.2 修改主题

方式一：环境变量

NEXT_PUBLIC_DEFAULT_PRIMARY_COLOR=#3b82f6

方式二：CSS 变量

编辑 app/globals.css：

:root {
  --primary: #3b82f6;
  --secondary: #2563eb;
}

5.3 修改导航栏

编辑 components/Header.tsx：

  • 修改导航链接
  • 修改 Logo
  • 调整样式

5.4 修改页脚

编辑 components/Footer.tsx：

  • 修改版权信息
  • 添加友链
  • 添加社交链接

5.5 添加新页面

  1. 在 app/ 下创建文件夹和 page.tsx：
export default function CustomPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1>自定义页面</h1>
    </div>
  );
}
  1. 在 Header.tsx 中添加导航链接。

5.6 修改粒子特效

编辑 components/Particles.tsx 或通过环境变量配置。

5.7 修改背景

编辑 app/globals.css 中的背景样式。

5.8 添加新功能

  1. 在 components/ 创建新组件
  2. 在页面中引入使用
  3. 如需配置，添加环境变量

5.9 代码修改建议

  • 使用 Git 进行版本控制
  • 修改前先 commit
  • 小步迭代，逐步验证