Money Hub

Appearance

06. 页面实现与装配子 SOP ​

适用步骤：

  • Step 7 页面实现与装配

1. 目标 ​

把页面内容正确落到代码里。

2. 必做动作 ​

  • 接入 metadata
  • 接入 JSON-LD
  • 检查并更新 sitemap
  • 检查并更新 llms.txt
  • 接入真实示例图
  • 接入 community proof
  • 接入 open-source
  • 接入 related models

项目内固定实现位置：

  • 页面文件：src/app/[locale]/(marketing)/(image-models)/[model-slug]/page.tsx
  • 页面主容器：src/components/model-page/ModelLandingPageSection.tsx
  • metadata helper：src/lib/metadata.ts
  • 模型页 JSON-LD：src/lib/jsonld/model-landing-page.ts
  • sitemap：src/app/sitemap.ts
  • llms.txt：src/app/llms.txt/route.ts
  • 真实示例图公开目录：public/images/model-pages/[model-slug]/
  • 生成素材原始目录：data/model-page-assets/[model-slug]/
  • 批量生图脚本：scripts/generate-model-materials.ts
  • 视频模型页面文件：src/app/[locale]/(marketing)/(video-models)/[model-slug]/page.tsx
  • 视频页面主容器：src/components/video/VideoModelLandingPageSection.tsx
  • 视频 prompt 示例组件：src/components/video/VideoPromptExamplesSection.tsx
  • 视频素材原始目录：data/model-page-video-assets/[model-slug]/
  • 视频素材脚本：scripts/generate-video-model-materials.ts
  • 页面演示视频压缩脚本：scripts/compress-model-page-videos.ts

固定装配顺序：

  1. 创建 / 更新 page data
  2. 接 metadata
  3. 接 JSON-LD
  4. 检查并更新 sitemap
  5. 检查并更新 llms.txt
  6. 接示例图
  7. 接 community proof
  8. 接 open-source
  9. 接 related models
  10. 校验本地页面输出

3. 页面数据装配清单 ​

  • 在 page.tsx 中整理并导出：
    • page title / description / path
    • header context / release info
    • FAQ 数据
    • prompt examples 数据
    • community proof 数据
    • open-source 数据
    • related models 数据
  • 所有文案和数据先在 page.tsx 的常量层整理，再传给 ModelLandingPageSection
  • 不要把事实、候选链接、schema 文案散落在多个无关组件里

4. 多语言消息装配动作 ​

  • 页级消息文件统一放在：messages/[locale]/models/*Page.json
  • 共享模型页 UI 标签放在：messages/[locale]/models/base.json
  • src/i18n/messages.ts 的 moduleFiles 必须包含新页的消息模块
  • en 先作为主文案真值源完成，zh 作为第二套高质量文案
  • 其他 locale 通过批量翻译脚本生成后，再抽样人工检查

模型页消息批量翻译命令：

powershell
pnpm translate:model-page-messages

按需翻译单文件或单语言：

powershell
pnpm tsx scripts/translate-model-page-messages.ts --files=zimagePage.json --locales=ja

多语言硬规则：

  • 不允许只依赖英文回退，把深度模型页长期留在未翻译状态
  • zh-Hant 默认从 zh 翻译，不从 en 直译
  • 模型名、repo 名、占位符、宽高比、分辨率、路径片段必须保持不变
  • 生成完后必须抽查至少 1 个页面，确认不是英文回退

5. metadata 装配动作 ​

  • 在 page.tsx 中实现 generateMetadata
  • 使用 constructMetadata(...)
  • 显式传入：
    • title
    • description
    • canonicalUrl
    • path
  • 如果模型页存在品牌歧义风险，显式传 siteName: null

6. 头部背景信息装配动作 ​

  • 优先在 src/config/image-models.ts 中整理：
    • releaseDate
  • ModelLandingPageSection 默认从当前模型配置读取这些字段
  • 只有非常特殊的页面，才允许在 page.tsx 里显式覆盖
  • 页面默认只展示发布日期 badge，不展示额外说明块

7. JSON-LD 装配动作 ​

  • 在 page.tsx 中创建：
    • breadcrumbSchema
    • modelPageSchema
    • faqSchema（仅当页面真实有 FAQ）
  • 使用 JsonLdScript 注入
  • modelPageSchema 默认通过 generateModelLandingPageSchema(...) 生成
  • about 中的模型实体必须使用当前模型的真实名称和别名
  • 默认不在模型页 JSON-LD 中补官方产品页、官方文档页、官方 announcement 页等 sameAs 外链
  • 如果页面包含 open-source ecosystem 模块，可以在该模块中保留与当前模型直接相关的官方仓库、官方模型卡或官方开源项目链接
  • open-source 相关外链只能作为生态证据或项目入口存在，不能作为“去官方使用”的主 CTA

8. community / open-source / related models 装配动作 ​

community proof：

  • 在 page.tsx 中整理：
    • videos
    • xPosts
    • redditPosts
  • 通过 communityProofSectionProps 传入 ModelLandingPageSection

open-source：

  • 在 page.tsx 中整理候选后的最终项目数组
  • 每项必须与当前模型直接相关
  • 通过 openSourceSectionProps 传入 ModelLandingPageSection

related models：

  • 在 page.tsx 中整理站内模型链接
  • 只链接真实存在、路径稳定、主题相关的模型页
  • 通过 relatedModelLinksSectionProps 传入 ModelLandingPageSection

9. 必须遵循的规则 ​

  • community proof 只作为证据层，不替代正文
  • embed 必须做异步加载
  • 移动端和桌面端都要检查
  • metadata、JSON-LD、正文三者必须一致
  • 社区嵌入不能比正文更抢主线
  • 不允许把无价值社媒内容为了凑数接入页面
  • 公开可索引模型页必须检查 src/app/sitemap.ts
  • 高意图模型页必须检查 src/app/llms.txt/route.ts

metadata 硬规则：

  • title 必须包含模型名和主任务词
  • description 必须介绍模型定位和站内可用能力
  • title 与 H1 可以不同，但不能表达不同意图
  • 如果站点品牌词会引起模型歧义，模型页不输出歧义性 og:site_name

JSON-LD 硬规则：

  • 模型页默认只使用：
    • WebPage
    • BreadcrumbList
    • FAQPage（仅当页面真实有 FAQ）
  • 不允许虚构：
    • Rating
    • AggregateRating
    • Review
    • 价格
    • 折扣
    • 页面上不存在的能力
  • 不要在 JSON-LD 里把用户引导到官方产品页或官方控制台去使用模型

外链与闭环硬规则：

  • 模型页的主 CTA、related models、核心转化路径必须保持站内闭环
  • 不要把用户从模型页引导到官方产品页、官方控制台或官方“立即使用”入口
  • 如果链接的是开源生态资源，必须满足：
    • 与当前模型直接相关
    • 放在 open-source ecosystem 模块内
    • 作用是补生态信息，而不是替代站内生成入口

图片与示例图硬规则：

  • 示例图必须来自真实生成结果或明确可用的真实素材
  • 所有示例图必须有描述性 alt
  • 文件路径必须稳定
  • 不允许用模糊占位图充当真实案例

路由索引硬规则：

  • sitemap 使用当前 canonical 路径，不能保留旧重定向路径
  • llms.txt 使用当前真实路径，不能保留旧别名或废弃路径
  • 新增公开模型页时，默认加入 src/app/sitemap.ts
  • 新增高意图模型页时，默认加入 src/app/llms.txt/route.ts
  • 如果决定不加入其中任一处，必须在 route-index-check.md 写明原因

10. 产出物 ​

  • 页面代码
  • 页面数据
  • route-index-check.md

固定模板：

md
## Route index check

- Page path:
- Canonical path:
- Added to sitemap: yes / no
- Sitemap location:
- Added to llms.txt: yes / no
- llms.txt section:
- If skipped, reason:

11. 本地验收动作 ​

  • 打开 http://localhost:3000/[model-slug]
  • 检查：
    • title
    • meta description
    • canonical
    • og:url
    • og:site_name（如适用）
    • application/ld+json
    • 页面是否实际渲染了 FAQ / prompt examples / community proof / open-source / related models
  • 确认 sitemap.ts 和 llms.txt 中的路径与当前页面 canonical 一致

12. 进入下一步条件 ​

  • 页面在本地可访问
  • 数据和组件已接通

Released under the MIT License.

Copyright © 2023-present DANTE FUNG