Skip to content

开发记录.md

Latest commit

 

History

History
198 lines (149 loc) · 5.25 KB

开发记录.md

File metadata and controls

198 lines (149 loc) · 5.25 KB

翡翠原石网站开发记录

项目编号：JD-2026-001 创建日期：2026-03-08 最后更新：2026-03-08

一、项目概述

1.1 客户需求

  • 翡翠原石经销商个人品牌网站
  • 面向海外华人（台湾、香港、澳门、新加坡、美国、加拿大）
  • 语言：繁体中文
  • 单页落地页，展示个人形象+原石产品+信任背景+联系方式
  • 用于 Google Ads 搜索广告投放
  • 需要轻量级后台管理图片和联系方式

1.2 客户背景

  • 身份：中缅边境曼德勒翡翠原石市场专业买手
  • 经验：10年+行业经验，14年开始做雕刻学徒
  • 优势：
    • 收货量大，能拿到品质高、价格低的原石
    • 汇率走本地汇率，比国际汇率低近50%
    • 瑞丽有自己的公司和合作加工厂
    • 保证一物一证
    • 赚20%代购费
  • 目标客户：收藏爱好者

二、技术方案

2.1 技术栈选择

层级 技术 理由
前端框架 Astro 最快静态生成器，适合 Google Ads
部署平台 Cloudflare Pages 免费、快速、全球 CDN
后台 CMS Decap CMS (原 Netlify CMS) 免费、开源、Git-based

2.2 成本估算

  • Cloudflare Pages：免费
  • Decap CMS：免费
  • 域名：约 60 元/年
  • 总计：约 60 元/年

三、开发进度

3.1 已完成

日期 内容 状态
2026-03-08 PRD 文档创建 ✅ 完成
2026-03-08 Astro 项目初始化 ✅ 完成
2026-03-08 网站框架开发（7个模块） ✅ 完成
2026-03-08 动效优化 ✅ 完成
2026-03-08 GitHub 仓库创建 ✅ 完成
2026-03-08 Cloudflare Pages 部署 ✅ 完成
2026-03-08 CMS 后台配置 ✅ 完成

3.2 当前状态

四、网站结构

4.1 页面模块

jade-website/
├── src/
│   ├── components/
│   │   ├── Header.astro       # 顶部导航
│   │   ├── Hero.astro         # Banner 区域
│   │   ├── Video.astro        # 视频区域
│   │   ├── BrandStory.astro  # 品牌故事
│   │   ├── Trust.astro       # 信任保证
│   │   ├── Products.astro     # 产品展示
│   │   ├── WhyChoose.astro    # 为什么选择我们
│   │   ├── Contact.astro     # 联系方式
│   │   ├── ContactModal.astro # 联系弹窗
│   │   └── Footer.astro       # 页脚
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   └── config/
│       └── site.ts            # 统一配置
├── public/
│   ├── admin/
│   │   ├── index.html        # CMS 入口
│   │   └── config.yml        # CMS 配置
│   └── _redirects           # SPA 路由配置
└── package.json

4.2 功能模块

模块 功能
顶部导航 Logo、导航链接、移动端汉堡菜单
Banner 背景图、标题、描述、按钮
视频区域 YouTube 视频嵌入
品牌故事 10年经验、数字展示
信任保证 6个保证卡片（一物一证、本地汇率等）
产品展示 6个产品卡片，参数可配置
为什么选择我们 4个核心优势
联系弹窗 微信/Line 一键复制
联系方式 在线表单、多渠道联系

五、CMS 配置

5.1 配置信息

backend:
  name: github
  repo: q17603008535-netizen/jade-website
  branch: main
  auth_type: implicit
  base_url: https://jade-website.q17603008535.workers.dev

5.2 可管理内容

集合 说明
products 产品管理（名称、图片、参数）
contact 联系方式（微信、Line）
site 网站配置（名称、YouTube ID）

六、部署记录

6.1 部署平台

  • 平台：Cloudflare Pages
  • 项目名：jade-website
  • 域名：jade-website.q17603008535.workers.dev

6.2 构建配置

  • Build command: npm run build
  • Build output directory: dist

七、问题记录

7.1 CMS 后台登录问题

问题：后台打开白色页面，登录时跳转到 Netlify

原因：Decap CMS 初始化时检查 Netlify 配置，导致跳转到 Netlify

解决：添加 auth_type: implicit 配置，并创建 _redirects 文件处理 SPA 路由

八、待完成

8.1 内容替换

项目 待替换内容
Banner 背景图替换为人物照片
Logo 上传品牌 Logo
视频 配置 YouTube ID
产品 上传产品图片
联系方式 配置微信、Line

8.2 后续功能

  • 绑定自定义域名
  • SEO 优化
  • Google Ads 配置

九、相关文档

更新日期：2026-03-08