D'SKIN - WordPress 到 Astro 迁移

挑战

D’SKIN 是一家智利天然化妆品品牌，其现有的 WordPress + WooCommerce 网站已经显得过时。客户需要一个更快、更现代的网络形象，同时保持轻松管理内容的能力和电子商务功能。

主要目标是：

• 大幅提升页面速度和 Core Web Vitals
• 为营销团队提供可视化内容编辑体验
• 保留 WooCommerce 用于产品管理和结账
• 支持双语内容（西班牙语/英语）
• 现代高端的美学设计，体现品牌的天然护肤身份

解决方案

我设计了一个混合架构：Astro 作为前端，配合 TinaCMS 进行可视化内容编辑，同时保持 WordPress + WooCommerce 作为无头后端处理产品数据和结账。

技术架构

┌─────────────────┐     ┌──────────────┐     ┌─────────────────┐
│   Astro 网站    │────▶│   TinaCMS    │────▶│   静态构建      │
│   (前端)        │     │   (内容)      │     │   (Vercel)     │
└─────────────────┘     └──────────────┘     └─────────────────┘
        │
        ▼
┌─────────────────┐
│   WordPress     │
│   WooCommerce   │
│   (产品)        │
└─────────────────┘

实现的关键功能

双语支持 (ES/EN)

• 完整的 i18n 实现，西班牙语为默认语言
• 英文路由在 /en/*，完整翻译
• 按语言分离的内容集合（每种语言 26+ 篇博客文章）
• 本地化的 UI 元素、日期、货币格式和导航
• 按语言的 SEO 元标签

TinaCMS 可视化内容管理

• 分屏实时预览编辑
• 带可视指示器的可编辑区域：
  • 主页英雄轮播（4 个可配置产品）
  • 畅销产品区域与 WooCommerce 集成
  • 关于页面及团队画廊
  • 护理服务目录
  • 博客文章富文本编辑

电子商务集成

• 从 WooCommerce REST API 实时获取产品目录
• 客户端购物车抽屉，使用 localStorage 持久化
• 多产品购物车转移到 WooCommerce 结账
• Astro 和 WordPress 之间的 SSO 认证（HMAC-SHA256 签名令牌）
• 库存状态和价格自动同步
• API 不可用时的降级机制

交互组件

• 购物车抽屉（桌面 380px 侧边栏，移动端全宽）
• 可配置产品的英雄轮播
• Google 评价轮播
• 动态 Instagram 信息流集成
• WhatsApp 悬浮按钮
• Lenis 平滑滚动

性能优化

• 使用 Astro 的部分水合进行静态站点生成
• React 组件仅在需要时水合（client:load、client:visible）
• 图片优化并通过 Vercel 边缘 CDN 分发
• Lighthouse 分数稳定在 95+

成果

迁移带来了显著改进：

• 页面加载时间：从 4.2 秒降至 1 秒以下 (LCP)
• Lighthouse 分数：从 62 提升到 98（性能）
• 内容更新：从依赖开发者变为可视化自助服务
• 托管成本：迁移到 Vercel 后降低 60%

客户的营销团队现在可以在没有技术支持的情况下更新博客文章、护理描述、产品展示和页面内容，同时网站为访问者几乎即时加载。

技术亮点

TinaCMS 可视化编辑

自定义 React 包装器通过 useTina() hook 实现实时预览：

// 可视化编辑包装器示例
export default function BestSellersWrapper({ query, variables, data, products }) {
  const { data: tinaData } = useTina({ query, variables, data });
  return (
    <section data-tina-field={tinaField(bestSellers, 'title')}>
      {/* 带可视指示器的可编辑内容 */}
    </section>
  );
}

WooCommerce API 集成

实时产品数据，优雅降级：

// 获取畅销产品
const products = await getBestSellers(3);

// 按 ID 获取特定产品
const products = await getProductsByIds([7183, 7176, 7868]);

// 格式化为智利价格格式
formatPrice(21990); // "$21.990"

购物车转移系统

自定义 WordPress 插件处理带 SSO 的多产品购物车转移：

• 签名令牌（有效期 5 分钟）使用共享密钥
• 在 WordPress 上自动创建用户会话
• 无缝结账体验

技术栈

这个项目展示了如何用无头架构现代化传统 WordPress 网站，结合静态站点性能的优势、可视化 CMS 的灵活性和 WooCommerce 在电子商务方面的稳健性。