Skip to main content

建站日志

2026-06-04 - 项目初始化与基础配置​

技术选型​

  • 框架：Docusaurus 3.10.1
  • 包管理器：pnpm
  • 部署平台：Cloudflare Pages（计划中）
  • 代码托管：GitHub

目录调整​

  1. 初始创建时使用 pnpm create docusaurus 生成项目在 my-site 目录
  2. 将 my-site 目录内容移动到根目录，删除原 my-site 目录
  3. 创建 memoDoc 目录用于存放建站记录文档
  4. 将 个人站技术方案.md 移动到 memoDoc/ 目录

Git 配置​

  1. 初始化 git 仓库
  2. 关联远程仓库 https://github.com/ZooMze/Zsite.git
  3. 删除 master 分支，只保留 main 分支作为默认分支

Docusaurus 配置修改​

package.json​

  • 修改 start 命令：docusaurus start --host 0.0.0.0 --port 8862
  • 修改 serve 命令：docusaurus serve --host 0.0.0.0 --port 8862
  • 默认端口从 3000 改为 8862

首页改造 (第一版)​

  • 位置：src/pages/index.tsx
  • 删除默认的 HomepageHeader 和 HomepageFeatures 组件
  • 新增 4 个全屏 section 组件：Section1 ~ Section4
  • 每个 section 占满一屏 (100vh)
  • 添加路由类名 route-home-page 用于首页特定样式

首页样式 (第一版)​

  • 位置：src/pages/index.module.css
  • 4 个 section 分别使用不同的渐变背景
  • 添加弹跳动画的滚动提示
  • 响应式适配

全局样式 (第一版)​

  • 位置：src/css/custom.css
  • 修改主题色为紫色系 #667eea
  • 实现沉浸式透明模糊 Header：
    • position: fixed 固定定位
    • background: transparent 完全透明
    • backdrop-filter: blur(10px) 背景模糊
    • 只在首页生效（通过 route-home-page 类名控制）
    • Header 文字颜色改为白色
  • 首页去除顶部 padding，让内容顶到最上面
  • 非首页恢复正常的 padding-top

2026-06-04 - 代码重构与架构优化​

重构目标​

  • 更好的代码组织
  • 更清晰的职责分离
  • 便于后续维护和扩展

首页组件重构​

新的目录结构​

src/
├── features/
│   └── home/              # 首页功能模块
│       ├── HomePage.tsx   # 首页主组件
│       ├── HomePage.module.css
│       └── sections/     # 各屏 section 组件
│           ├── HeroSection.tsx
│           ├── BlogSection.tsx
│           ├── ProjectsSection.tsx
│           └── AboutSection.tsx
├── pages/
│   └── index.tsx         # 只是一个简单的导出
└── css/
    ├── custom.css        # 入口文件，只做导入
    ├── theme.css         # 主题变量
    ├── docusaurus-overrides.css  # Docusaurus 默认样式覆盖
    ├── home-route-overrides.css  # 首页特定样式
    └── memo-route-overrides.css  # 备忘录路由样式

首页组件改动​

  • 主组件：src/features/home/HomePage.tsx

    • 从 src/pages/index.tsx 迁移过来
    • 保持原有的功能逻辑
    • 通过 props 传递 title 和 tagline 给 HeroSection

  • Section 组件拆分：

    • HeroSection.tsx - 第一屏（原 Section1）
    • BlogSection.tsx - 第二屏（原 Section2）
    • ProjectsSection.tsx - 第三屏（原 Section3）
    • AboutSection.tsx - 第四屏（原 Section4）

  • 页面入口：src/pages/index.tsx

    • 简化为只导出 HomePage 组件

CSS 拆分重构​

custom.css (入口)​

  • 只负责导入其他 CSS 文件
  • 不再包含具体样式规则
  • 导入顺序：
    1. theme.css - 主题变量
    2. docusaurus-overrides.css - Docusaurus 样式覆盖
    3. home-route-overrides.css - 首页特定样式
    4. memo-route-overrides.css - 备忘录路由样式

theme.css​

  • 存放主题颜色变量
  • 紫色系主题配置
  • 深色模式配置

home-route-overrides.css​

  • 首页沉浸式 Header 样式
  • 首页相关的覆盖样式

docusaurus-overrides.css​

  • Docusaurus 默认样式覆盖
  • 预留位置

memo-route-overrides.css​

  • 备忘录路由相关样式
  • 预留位置

memoDoc 文档配置​

  • 给 memoDoc/建站日志.md 添加 frontmatter： 
    ---
    title: 建站日志
    sidebar_position: 2
    slug: /site-log
    ---

当前项目结构​

personal-site/
├── docs/                  # 文档目录
├── blog/                  # 博客目录
├── src/
│   ├── features/
│   │   └── home/         # 首页功能模块
│   │       ├── HomePage.tsx
│   │       ├── HomePage.module.css
│   │       └── sections/
│   ├── pages/
│   │   └── index.tsx
│   ├── components/
│   └── css/
│       ├── custom.css
│       ├── theme.css
│       ├── docusaurus-overrides.css
│       ├── home-route-overrides.css
│       └── memo-route-overrides.css
├── static/
├── memoDoc/               # 建站记录文档
│   ├── 个人站技术方案.md
│   └── 建站日志.md
├── docusaurus.config.ts
├── sidebars.ts
├── package.json
├── pnpm-lock.yaml
└── README.md

重构优势​

  • ✅ 更好的模块化
  • ✅ 样式按功能分离，便于管理
  • ✅ 组件职责更单一
  • ✅ 便于后续添加动画效果
  • ✅ 预留了扩展空间

当前效果​

  • ✅ 4 屏整屏滚动首页
  • ✅ 沉浸式透明模糊 Header
  • ✅ 紫色主题配色
  • ✅ 响应式适配
  • ✅ 代码结构清晰