多语言官网的 UX 设计：@nuxt/ui + Cloudflare Pages
官网 demo 与业务模板一样重要。本篇分享如何利用 @nuxt/ui token、Nuxt 状态管理与 Cloudflare Pages 的极速发布能力，打造真正可上线的多语言营销站点。
多语言数据结构
网站首页的 messages 对象为 zh/en/ja 分别定义 copy，包括 Hero、Workflow、Modules 等区块。通过 useState 管理 locale，并在组件中响应式切换。
type Locale = 'zh' | 'en' | 'ja'
const locale = useState<Locale>('site-locale', () => 'zh')
const content = computed(() => messages[locale.value])模块化切片
Hero、Workflow、Core、Modules、Blog cards 都是可复用切片。通过统一的 card 与 badge 组件样式，在暗色模式下也能保持一致体验。
- actions 使用 NuxtLink，确保跳转均为站内真实文章
- Blog 模块引用 /blog/[slug] 动态路由，读者可直接深入文章
- Resource Grid 按 Docs/Tutorial/Blog 分类，降低跳出率
部署与缓存
官网与模板同 repo，不需要额外 monorepo。Pages 针对静态页面自动开启 CDN 缓存，同时保留 Functions 能力供表单或订阅 API 使用。通过 wrangler pages deploy .output/public --project-name=cf-nuxt-pages-kit-site 即可上云。
- 静态页面默认享受全局 CDN 缓存，适合文案与文档类内容
- 对于需要个性化或实时数据的模块，可通过 server/api 配合 KV/D1 提供动态内容
- 多语言内容建议统一通过数据结构管理（如 messages 对象），方便未来接入 CMS 或翻译流程