上传说明

📝 概述

本网站采用纯前端静态架构，所有内容存储在 data/content.json 文件中。更新内容只需修改JSON文件并重新部署即可。

📂 文件结构

houkaijian-website/
├── index.html              # 首页
├── category-notes.html      # 笔记列表页
├── category-mind.html       # 思维导图页
├── category-project.html     # 项目列表页
├── detail.html             # 内容详情页
├── upload-guide.html        # 上传说明页（本页）
├── css/
│   └── style.css          # 全局样式
├── js/
│   └── main.js            # 页面逻辑
├── img/
│   ├── avatar.jpg          # 个人头像
│   └── mindmaps/         # 思维导图截图
│       ├── thumb1.jpg      # 缩略图
│       ├── full1.jpg       # 大图
│       └── ...
└── data/
    └── content.json       # 所有内容数据
        

📊 content.json 数据结构

{
  "profile": {
    "name": "侯凯健",
    "avatar": "img/avatar.jpg",
    "bio": "专注于前端开发与技术创新",
    "email": "example@email.com",
    "gitcode": "https://gitcode.net/username"
  },
  "content": [
    {
      "id": 1,
      "title": "内容标题",
      "category": "notes|project|mind",
      "description": "内容描述",
      "date": "2026-02-07",
      "tags": ["标签1", "标签2"],
      "link": "https://gitcode.net/...",
      "thumbnail": "img/mindmaps/thumb1.jpg",
      "fullImage": "img/mindmaps/full1.jpg"
    }
  ]
}
        

📝 添加笔记

1. 打开 data/content.json 文件
2. 在 content 数组中添加新对象
3. 设置 category 为 "notes"
4. 填写 title、description、date、tags、link
5. 确保 id 唯一

{
  "id": 11,
  "title": "新笔记标题",
  "category": "notes",
  "description": "笔记描述内容",
  "date": "2026-02-08",
  "tags": ["前端", "JavaScript"],
  "link": "https://gitcode.net/username/new-note"
}
          

🚀 添加项目

1. 打开 data/content.json 文件
2. 在 content 数组中添加新对象
3. 设置 category 为 "project"
4. 填写 title、description、date、tags、link
5. 确保 id 唯一

{
  "id": 11,
  "title": "新项目名称",
  "category": "project",
  "description": "项目描述内容",
  "date": "2026-02-08",
  "tags": ["React", "Node.js"],
  "link": "https://gitcode.net/username/new-project"
}
          

🧠 添加思维导图

1. 准备思维导图截图（建议尺寸：缩略图 280x200px，大图 800x600px）
2. 将缩略图放入 img/mindmaps/thumbX.jpg
3. 将大图放入 img/mindmaps/fullX.jpg
4. 打开 data/content.json 文件
5. 在 content 数组中添加新对象
6. 设置 category 为 "mind"
7. 填写 title、description、date、tags、thumbnail、fullImage
8. 确保 id 唯一

{
  "id": 11,
  "title": "新思维导图",
  "category": "mind",
  "description": "导图描述内容",
  "date": "2026-02-08",
  "tags": ["前端", "知识体系"],
  "thumbnail": "img/mindmaps/thumb11.jpg",
  "fullImage": "img/mindmaps/full11.jpg"
}
          

🚀 部署流程

1. 修改 data/content.json 文件
2. 更新 img/ 目录下的图片资源（如有）
3. 将整个 houkaijian-website 文件夹打包为ZIP文件
4. 登录 Cloudflare Pages 控制台
5. 选择项目，点击 "Upload assets"
6. 上传ZIP文件，等待部署完成

⚠️ 注意事项

• JSON格式：确保JSON格式正确，使用双引号，注意逗号位置
• ID唯一性：每个内容的 id 必须唯一
• 日期格式：使用 YYYY-MM-DD 格式
• 图片路径：确保图片路径正确，图片文件存在
• 外部链接：确保GitCode链接可访问
• 备份：部署前备份旧版本，以便回滚

💡 常见问题