> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 营销页面

落地分区、法律页面、FAQ、更新日志与站点配置。

## 初学者演练

先决条件：阅读下面的两个初学者指南，完成 Web 本地设置，并在编辑器的根目录中打开此 monorepo。网页设置属于`apps/web/.env.local`； Next.js不读取根`.env`。默认fake模式下的`/dashboard`是无数据库演示； `/auth` 需要迁移数据库。

简而言之：工作区是一个团队的单独用户、数据和设置。服务器是可信后端；让提供商密钥远离浏览器和电话代码。迁移是创建或更新表的版本化数据库更改。人工智能模型是回答的引擎；型号目录是服务器上可用型号 ID 和价格的列表。提供商是一种外部服务，例如人工智能、电子邮件或计费服务。权利是允许工作区使用某项功能的授权。 Webhook 是一个服务发送到另一个服务的 URL 的消息。

1. 打开 `apps/web/src/marketing/site-config.ts` 并将产品名称、标语、导航标签/URL 和支持地址更改为您拥有的值。

2. 替换 `apps/web/public/og.png` 并更新 `apps/web/src/marketing/seo.tsx` 中的替代文本和尺寸作为一项更改。

3.刷新首页、FAQ、页脚、社交预览。如果仍然存在旧文本，请在发布之前在此存储库中搜索旧名称。

对于自定义代码，请从提供的 `prompts/README.md` 开始，然后复制最接近的提示：对于应用程序屏幕为 `prompts/new-app-screen.md`，对于公共页面为 `prompts/new-landing-page.md`。对于服务器、数据库或提供商工作，请为您的编码代理提供本指南的任务，并要求其读取 `AGENTS.md`、`.ai/PROJECT_CONTEXT.md` 和匹配的 `.ai/` 镜像；检查此处指定的确切源文件；列出文件并在编辑前进行检查；保留工作区所有权和仅限服务器的机密；并向您展示差异。告诉它您想要的行为、输入和输出字段、允许的角色、预期的成功和错误以及测试帐户、提供程序或设备。使用样本值；永远不要粘贴真正的秘密。

[开始之前](https://supastack.dev/zh/docs/web/before-you-start.md)

[终端基础知识](https://supastack.dev/zh/docs/web/terminal-basics.md)

[网络本地设置](https://supastack.dev/zh/docs/web/ship-in-5-minutes.md)

[座席提示和项目内存](https://supastack.dev/zh/docs/web/agents.md)


## 更新站点配置

`apps/web/src/marketing/site-config.ts` 拥有品牌文案、导航/页脚链接、FAQ 和可选的存储库/文档目的地。在将产品名称分散到各个组件之前更新此内容。该套件自己的 chrome 使用此配置；可复制的镀铬块接受产品道具。


## 一起替换资产族

共享的四块标记具有白色的左上/右下和灰色的右上/左下块，具有细轮廓。保持标题标记透明；应用程序图标/图标使用圆形黑色背景。衍生产品可以一起替换该标记及其关联的应用程序/桌面资产。

共享公共社交卡为`/og.png`；使用尺寸和替代文本更新 `marketing/seo.tsx` 中的描述符。博客文章卡使用单独的下一个图像路线。


## 检查每个公共表面

验证页眉/页脚、联系人、FAQ、法律页面、本地化的家庭副本、标题和社交卡。选择您产品的营销主题模式，并仅发送有效的支持/联系链接。

[产品款式](https://supastack.dev/zh/docs/web/theming.md)

[法律页面脚手架](https://supastack.dev/zh/docs/web/project-structure.md)

[元数据和社交卡](https://supastack.dev/zh/docs/web/project-structure.md)


## 安装与配置

营销界面由类型化数据驱动而非硬编码 JSX —— hero、功能分区、定价、FAQ、更新日志、案例展示、联系与法律页面都从站点配置与内容文件读取文案和结构。

MARKETING_THEME_MODE（src/theme/marketing-theme.ts）决定营销站是保持套件锁定的深色品牌、继承访客的主题包，还是钉住某个特定包。衍生产品应选择自己的模式。

```
src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"
```


## 实现流程

优先用 block 库组合页面；缺模式时以同样的纯令牌风格写新 block 并注册到 src/kit/blocks.ts。营销组件不要进入产品界面 —— 两套外壳系统保持分离。

本地化文案走词典与 site-content 叠加层；在那里加键，而不是按语言分叉组件。


## 验证与排障

在 320px 与桌面宽度下检查营销页，键盘焦点可见，至少各用一个浅色与一个深色包，并开启 reduced motion。若营销文案声称某个能力，确保链接的文档页存在。


## 下一篇

[SEO 与分享](https://supastack.dev/zh/docs/web/seo.md)