自定义落地页
通过路由文件顺序拼装,配合轻量配置定制首页、功能页、定价页、FAQ 与法律页。
MuseMVP 落地页在路由文件里按渲染顺序拼装。src/config/index.ts 只保留品牌、认证、账单和联系表单投递。落地页路由不再使用 systemShowConfig、useSystemComponent 或 PLACEHOLDER 区块。
配置入口
品牌和运行时开关在 src/config/index.ts。页头/页脚链接在组件里。法律页是 content/legal/ 下的 MDX。
配置目录结构
首页
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 图标;文案在 home.json |
| CTA | CTASection | |
| Pricing | PricingSection | config.payments.enableBilling 为 false 时首页返回 null |
| FAQ | FaqSection | 文案在 faq.json |
| Newsletter | Newsletter | 文案在 newsletter.json |
隐藏区块就删掉对应 JSX。替换区块就改 import。调整顺序就移动 JSX。
导航与页脚
直接改组件。不要把开关矩阵加回 config.ui。
| 文件 | 改什么 |
|---|---|
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 |
src/i18n/translations/{en,zh}/home.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 在后台运行时设置里。
如果要把划线价显示为 $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 请编辑 src/i18n/translations/en/faq.json 和 zh/faq.json。派生产品应把替换文案放到 mvp.json,不要覆盖这些文件。
更新日志
/changelog 使用 src/modules/landing-page/changelog/changelog-page-content.tsx 的三列时间线。条目正文来自 content/changelog/ MDX。界面文案(含展开全文)在 changelog.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,路由已经渲染标题。页脚文案在 home.json。
快速定制流程
在 src/app/(landing-page)/[locale]/(home)/page.tsx 调整首页 JSX,隐藏、替换或重排区块。
改 SwitchHeader / SwitchFooter 和 home.json 更新导航链接与文案。
FAQ 走 faq.json,更新日志走 content/changelog/ 与 changelog.json,法律页走 content/legal/。