落地页配置
通过路由文件顺序拼装,配合轻量配置定制首页、功能页、定价页、FAQ 与法律页。
将首页调整为你的产品:保留需要的区块,替换文案,让导航指向真正有用的页面。
开始前准备
完成 品牌设置。文件路径相对于当前应用根目录。保持开发服务运行,方便立即查看;产品文案放在两语言 mvp.json。
先做一个改动:移除 Newsletter 区块
打开 src/app/(landing-page)/[locale]/(home)/page.tsx。暂不收集订阅时,移除 <Newsletter /> 和不再使用的 import。刷新首页,确认其他区块仍按顺序显示。
调整顺序同样直接移动 JSX。替换区块时改 import 并渲染新组件,保留页面现有语言初始化和静态渲染配置。其他区块和链接参考如下。
配置目录结构
产品总配置是 packages/config/src/index.ts,语言元信息是 packages/config/src/i18n.ts。下面应用配置目录只保留套餐展示/价格文件。衍生公开文案只改 packages/i18n/src/translations/{en,zh}/mvp.json;default.json 是模板默认层。
首页
src/app/(landing-page)/[locale]/(home)/page.tsx 按顺序渲染区块,并保持 force-static:
export const dynamic = "force-static";
export default async function Home({ params }) {
const { locale } = await params;
setRequestLocale(locale);
return (
<>
<Hero />
<Features />
<CTASection />
<PricingSection />
<FaqSection />
<Newsletter />
</>
);
}| 区块 | 组件 | 说明 |
|---|---|---|
| Hero | Hero | 产品图:/images/hero-light.png 和 /images/hero-dark.png |
| Features | Features | Lucide 图标;模板文案在 default.json,派生覆盖在 mvp.json |
| CTA | CTASection | |
| Pricing | PricingSection | config.payments.enableBilling 为 false 时首页返回 null |
| FAQ | FaqSection | 模板文案在 default.json,派生覆盖在 mvp.json |
| Newsletter | Newsletter | 模板文案在 default.json,派生覆盖在 mvp.json |
隐藏区块就删掉对应 JSX。替换区块就改 import。调整顺序就移动 JSX。
导航与页脚
在下面组件的链接列表中编辑入口,同时在两语言 mvp.json 更新标签。
| 文件 | 改什么 |
|---|---|
src/modules/landing-page/header/SwitchHeader.tsx | 导航链接 |
src/modules/landing-page/footer/SwitchFooter.tsx | 页脚分组、社交、powered-by |
src/modules/landing-page/site-links.ts | GitHub、Discord、X、演示站、powered-by URL |
packages/i18n/src/translations/{en,zh}/mvp.json | 派生产品页头/页脚文案 |
隐藏公开页:删掉 header/footer 里的链接。只有当 URL 也不该再访问时,才删除路由文件。定价链接仍跟随 config.payments.enableBilling。
定价页
定价页 src/app/(landing-page)/[locale]/pricing/page.tsx 由 config.payments.enableBilling 控制。为 false 时该路由重定向到首页。首页定价区在 PricingSection 内部自行隐藏,不使用路由级开关。
定价文案和套餐展示来自 src/config/saas/pricing-desc-usage.ts 与 pricing-desc.ts。
pricing-desc.ts:套餐标题、描述、功能列表pricing-desc-usage.ts:实际可购买的价格项、稳定套餐productId与计费行为。支付商产品 ID 是<GATEWAY>_PRODUCT_ID_<PLAN>环境变量。
如果要把划线价显示为 $249、实际收款 $199,在 pricing-desc-usage.ts 里配置:
{
type: "one-time",
productId: billingProductCatalog.lifetime.productId,
originalAmount: 249,
amount: 199,
currency: "USD",
}字段含义:
amount:发给支付网关的实际结账金额originalAmount:仅用于 UI 的划线对比价
只有 originalAmount 大于 amount 时才会显示划线价。省略则只显示现价。
FAQ
FAQ 数据在 src/modules/landing-page/home/components/FaqSection.tsx 里通过两个 hook 读取:
useFaqData():问答列表,来自 i18nuseFaqSectionData():区块标题与描述,同样来自 i18n
模板 FAQ 在 default.json 的 faq 命名空间;派生产品只在两语言 mvp.json 覆盖相同路径。
更新日志
/changelog 使用 src/modules/landing-page/changelog/changelog-page-content.tsx 的三列时间线。条目正文来自 content/changelog/ MDX。界面文案(含展开全文)在 default.json。
法律页
法律页是独立 MDX,直接编辑:
| 页面 | 文件 |
|---|---|
| 隐私政策 | content/legal/privacy.en.mdx、content/legal/privacy.zh.mdx |
| 服务条款 | content/legal/terms.en.mdx、content/legal/terms.zh.mdx |
| 社区规范 | content/legal/behavior.en.mdx、content/legal/behavior.zh.mdx |
保留 frontmatter title。正文不要再写一个 # H1,路由已经渲染标题。页脚模板文案在 default.json,派生覆盖在 mvp.json。
快速定制流程
在 src/app/(landing-page)/[locale]/(home)/page.tsx 调整首页 JSX,隐藏、替换或重排区块。
在 SwitchHeader / SwitchFooter 更新链接,派生导航文案只放两语言 mvp.json。
派生 FAQ 与更新日志界面文案走 mvp.json,更新日志条目走 content/changelog/,法律正文走 content/legal/。
相关文档
确认结果
分别以桌面和手机宽度打开两语言首页,检查区块顺序、CTA 目标、页头/页脚、FAQ 和定价显示。逐个点击变更链接,确认目标存在。双应用产品运行 pnpm apps:parity,部署两端前同步符合条件的页面改动。
常见问题
| 问题 | 处理方式 |
|---|---|
| 移除区块后 import 报错 | 同时移除不再使用的 import |
| 链接标签仍是模板内容 | 在两语言 mvp.json 覆盖实际读取的 home.* 键 |
| 隐藏页面仍能访问 | 移除导航仍保留路由,只有 URL 也不应访问时才删除路由 |
| 定价区消失 | 检查 config.payments.enableBilling 和套餐配置 |