开发文档中心

二、技术栈与依赖

三、项目架构

目录结构

public/
  ├── llms.txt          # AI 爬虫索引（精简版）
  ├── llms-full.txt     # AI 爬虫索引（完整版）
  └── ...               # 其他静态资源
src/
  ├── app/                    # App Router 页面
  │   ├── layout.tsx           # 全局布局（Header + Footer + JSON-LD）
  │   ├── page.tsx             # 首页
  │   ├── globals.css          # 全局样式
  │   ├── robots.ts            # robots.txt 生成
  │   ├── sitemap.ts           # sitemap.xml 生成
  │   ├── news/                # 行业资讯（列表 + 详情）
  │   ├── ai-news/             # AI资讯（列表 + 详情）
  │   ├── industry/            # 行业大全（分类列表 + 详情）
  │   ├── brands/              # 品牌名录（列表 + 详情）
  │   ├── manufacturers/       # 厂商推荐（列表 + 详情）
  │   ├── directory/           # 企业名录（品牌+厂商整合）
  │   ├── geo/                 # GEO 服务页
  │   ├── join/                # 商家入驻页
  │   ├── promotion/           # 商业推广页
  │   └── dev-docs/            # 开发文档页（本页）
  ├── components/
  │   ├── layout/              # 布局组件
  │   │   ├── Header.tsx           # 顶部导航栏
  │   │   ├── Footer.tsx           # 底部栏
  │   │   ├── PageHero.tsx         # 栏目页 Hero 组件
  │   │   ├── SectionTitle.tsx     # 区块标题
  │   │   ├── CommercialTag.tsx    # 商业推广标识
  │   │   └── AiContentDisclaimer.tsx  # AI 内容免责
  │   └── seo/                 # SEO / JSON-LD 组件
  │       ├── OrganizationJsonLd.tsx
  │       ├── ArticleJsonLd.tsx
  │       ├── FAQPageJsonLd.tsx
  │       └── ItemListJsonLd.tsx
  ├── data/                    # 静态数据（纯 TS 导出，无数据库）
  │   ├── categories.ts        # 行业分类（26 个）
  │   ├── articles.ts          # 行业资讯（12 篇）
  │   ├── articles-geo.ts      # GEO 行业资讯（6 篇）
  │   ├── ai-news.ts           # AI 资讯（22 篇）
  │   ├── brands.ts            # 品牌数据（12 家）
  │   ├── brands-geo.ts        # 新增行业品牌（12 家）
  │   ├── manufacturers.ts     # 厂商数据（10 家）
  │   ├── manufacturers-geo.ts # 新增行业厂商（10 家）
  │   └── news-flashes.ts      # 行业快讯（12 条）
  ├── lib/
  │   └── utils.ts
  └── server.ts                # 自定义服务端入口

设计原则

• Server Component 优先：所有页面默认服务端渲染，仅在必要时使用use client
• 纯静态直出：所有核心内容在服务端完整渲染，禁止 JS 动态渲染正文
• 数据驱动 UI：内容均来自 src/data/下的静态数据文件，扩展时只需新增数据
• 组件化复用：Header、Footer、Hero、卡片等通用组件抽象复用

四、各版块功能说明

4.1 首页 /

全站内容聚合入口，主要功能模块：

• Hero 区域：平台定位 + 核心数据 + 快捷服务入口 + 主次按钮
• 重点资讯：行业资讯精选（6 篇）
• 行业分类导航：26 个行业入口卡片
• 优质品牌推荐：展示部分品牌
• 厂商推荐：展示部分厂商
• AI 资讯入口：AI 资讯频道引导

4.2 行业资讯 /news

• 列表页：资讯卡片列表 + 行业筛选 + 热门资讯侧边栏
• 详情页：文章正文 + 作者/日期/阅读量 + 相关推荐 + FAQ 折叠面板 + Article / FAQPage JSON-LD
• 数据来源：src/data/articles.ts + articles-geo.ts
• 每篇资讯含 5 个 FAQ，用于 GEO 优化

4.3 AI资讯 /ai-news

• 子栏目：全部资讯 / 大模型动态 / 行业解决方案 / GEO 案例解析
• 列表页：子栏目卡片导航 + 细分标签 + 资讯列表 + 热门排行 + GEO 免费诊断 + 白皮书下载 + 合作品牌
• 详情页：正文 + 分类标签 + 文末 CTA（行业方案/GEO案例显示诊断引导，其他显示白皮书） + 相关阅读 + FAQ + 免责声明
• 数据来源：src/data/ai-news.ts（22 篇，含 11 个分类）

4.4 行业大全 /industry

• 列表页：26 个行业分类卡片网格展示
• 行业详情页/industry/[slug]：行业介绍 + 热门服务（每个行业 6 项定制，含 1 项 GEO 服务）+ 行业资讯 + 行业品牌 + 行业厂商
• 数据来源：src/data/categories.ts
• 各行业 hotServices 差异化定制，不做统一模板

4.5 企业名录 /directory

• 品牌名录 + 厂商推荐的整合页（双 Tab 切换）
• 支持按行业筛选
• 侧边栏：热门品牌 + 热门厂商 + 入驻引导
• 顶部有合规免责声明（品牌名录类页面强制要求）
• 原 /brands 和 /manufacturers 页面保留可访问

4.6 商家入驻 /join

• 企业入驻申请说明 + 入驻流程 + 入驻优势
• 整合了原"商业推广"的增值服务内容
• 含品牌入驻和厂商入驻两种类型
• 底部有 CTA 引导（联系电话/表单入口占位）

4.7 GEO服务 /geo

• GEO（生成式引擎优化）服务介绍页
• 含服务内容、服务流程、适用行业、案例展示、咨询入口
• AI资讯、行业大全等页面的 GEO 相关 CTA 均导流至此

4.8 商业推广 /promotion

• 推广服务详细介绍页（独立存在，导航已移至商家入驻）
• 与商家入驻页各有侧重：推广页偏服务套餐，入驻页偏入驻流程
• 页面含【商业推广】红色标识

五、公共组件规范

SEO / JSON-LD 组件

六、数据规范与扩展

项目采用纯静态数据驱动，所有内容存储在 src/data/ 目录下的 TypeScript 文件中，无数据库依赖。

数据文件结构规范

每个数据文件应包含三部分：

1. 类型定义（interface）：明确数据结构
2. 数据数组（const export）：实际数据
3. 工具函数：getBySlug、getByCategory、getAll 等

新增资讯文章步骤

1. 在对应数据文件（如 articles.ts 或 ai-news.ts）的数组中追加新对象
2. id 自增，slug 使用英文短横线命名，确保唯一
3. content 字段使用反引号模板字符串包裹，内容为 HTML 格式 （<p>段落</p>、<ul><li>列表</li></ul> 等）
4. 每篇必须包含 5 个 FAQ（用于 GEO 优化和 FAQPage JSON-LD）
5. 新增分类需同步更新 xxxCategories 数组

新增行业步骤

1. 在 categories.ts 中新增分类对象（含 slug, name, description, hotServices[6]）
2. 补充该行业的品牌数据（brands-geo.ts），至少 2 家
3. 补充该行业的厂商数据（manufacturers-geo.ts），至少 1 家
4. 补充该行业的资讯数据（articles-geo.ts），至少 1 篇
5. 更新 Footer.tsx 中的行业导航列表
6. 更新 llms.txt 和 llms-full.txt

七、SEO 与 GEO 优化

GEO（生成式引擎优化）核心措施

• llms.txt / llms-full.txt：放在 public 根目录，供 AI 爬虫索引
• FAQPage JSON-LD：所有资讯详情页内嵌结构化 FAQ 数据
• Article JSON-LD：资讯页文章结构化数据
• Organization JSON-LD：全站统一组织信息
• ItemList JSON-LD：品牌名录列表结构化数据
• robots.txt：放行 DoubaoBot、Bytespider、DeepSeek-Crawler、Baiduspider、Googlebot
• 双端同源：移动端不删减正文、结构化数据、FAQ、商业文本

HTML 语义化规范

• 唯一 H1：每个页面只有一个 H1 主标题
• 层级递进：H2/H3 逐步递进，不跳级
• main 标签：主体内容使用 main 标签包裹
• article 标签：资讯详情使用 article 标签
• aside 标签：侧边栏使用 aside 标签
• nav 标签：导航区域使用 nav 标签 + aria-label

元数据规范

• 每个页面必须定义 metadata（title + description + keywords）
• 动态路由页面通过 generateMetadata 生成
• title 格式：页面标题 - 频道名（如 "xxx - 行业资讯"）
• sitemap 通过 app/sitemap.ts 自动生成

八、广告法合规要求

绝对化违禁词（严禁使用）

全站零绝对化违禁词。以下词语禁止出现在任何文案中：

品牌名录合规

• 不使用"十大品牌排行榜"，统一用"行业优质品牌汇总名录"
• 品牌名录页顶部必须有合规免责公示
• 付费服务仅售卖展位曝光资源，不售卖排名评级权威背书

商业推广标识

• 付费/推广内容首行红色标注【商业推广】，使用 <CommercialTag /> 组件
• AI 内容页底部固定免责话术，使用 <AiContentDisclaimer /> 组件
• 全站底部三重合规声明 + 投诉举报入口（Footer 组件）

九、开发指南

本地开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run dev
# 访问 http://localhost:5000

# 类型检查
pnpm ts-check

# Lint 检查
pnpm lint --quiet

# 生产构建
pnpm run build

# 生产启动
pnpm run start

编码规范

• Server Component 优先：默认不使用 use client，仅在需要交互时添加
• 禁止 hydration 错误：不在 JSX 中直接使用 typeof window、Date.now()、Math.random() 等
• 标点半角：代码中标点符号全部半角，字符串内中文文本除外
• 类型标注：所有函数参数必须标注类型，禁止隐式 any
• import 规范：使用前必须 import，不假设全局可用
• 禁用 head 标签：SEO 元数据统一使用 Next.js metadata

样式规范（Tailwind）

• 主色：深蓝 #1e40af（text-blue-700 / bg-blue-600）
• 辅色：天蓝 #0ea5e9（text-sky-500 等）
• 强调色：红色 #dc2626（仅用于商业标识/警示）
• 卡片：圆角 6px（rounded / rounded-lg），1px 边框 border-gray-200
• 间距：4px 网格，常用 8/16/24/32px
• 字体：正文 14px（桌面）/ 15px（移动），行高 1.75 / 1.85

十、构建与部署

构建流程

1. pnpm install：安装依赖
2. pnpm run build：构建静态页面（约 150+ 个页面）
3. pnpm run start：启动生产服务器

环境变量

十一、常见问题

content: `<p>第一段正文内容</p>
<p>第二段正文，包含<strong>加粗</strong>文字。</p>
<ul>
  <li>列表项一</li>
  <li>列表项二</li>
</ul>`,