Blocks 与 Components:改版后留下的是什么

VocAny 用一条规则把多语言页面内容与可复用界面组件分开:

读取翻译文案的文件是 block,所有内容都通过 props 传入的文件是 component。

Block 是可抛弃的

Block 放在 src/blocks/，是 <Hero />、<Pricing />、<Footer /> 这样的零配置页面区块。每个 block 读取 i18n 文案，组装内容配置，再传给 component。

// src/blocks/header.tsx:读取 i18n，装配 component
export function Header() {
  const navLinks = [{ href: '/#features', label: m['landing.nav.features']() }];
  return <SiteHeader navLinks={navLinks} />;
}

Component 是耐用的

Component 放在 src/components/，永远不读翻译。SiteHeader、PricingTable、AppSidebar 的所有内容都来自 props。它们不知道产品名、文案和当前语言，这正是它们能挺过每一次改版的原因。

为什么这个切分重要

当你改版或基于模板开新项目时:

1. 保留 src/components/* 作为底盘。
2. 重写 src/blocks/* 作为内容装配层。
3. 重写喂给 block 的翻译 JSON 文件。

页面文件始终很小，因为它只负责组合一组 block。重做整个落地页只需要修改 block 和翻译 JSON，不必碰耐用的基础组件。这个切分让改版成为一次聚焦的内容与意图重写。