5.7 KiB
5.7 KiB
很好,这一步我会直接给你一份“可冻结、可复用、可扩展”的正式协议文档。 你可以把它当成 List 模块的“宪法”,后面所有新增 item / shell / 行为,都必须服从它。
下面内容不讲过程,只给最终规范,风格与你之前的母协议一致。
《站群差异化方法 · List 模块母上下文协议 v1.0》
协议级别:最高 适用范围: 首页列表模块(最近更新 / 热门推荐 / 排行榜 / 后续新增列表模块)
一、设计目标(不可违背)
-
同一套代码需支持 1000+ 域名,且首页列表呈现:
- 结构差异
- 视觉差异
- 行为差异 不可被搜索引擎判定为批量模板
-
列表模块必须满足:
- 稳定随机(同域名恒定)
- 可冻结(DB / JSON 可回溯)
- 可无限扩展(新增不破坏旧逻辑)
-
模板必须做到:
- HTML 零逻辑判断
- 所有差异由 PHP 层决定
二、List 模块的“五层结构模型”(强制)
List 模块必须严格拆分为以下 5 层,禁止跨层职责:
Title(标题区)
Shell(列表外壳 / 布局)
Item(单条内容结构)
Behavior(行为 / 状态)
Data(数据)
三、Title(标题区)协议
3.1 Title 的职责
- 提供 语义权重
- 提供 视觉锚点
- 承载 SEO 文案变化
3.2 Title 模板规范
-
模板编号:
title_A ~ title_E -
Title 只负责:
- 标题结构
- 副标题(可选)
- SEO 隐藏文本(可选)
3.3 Title 文案来源(必须)
Title 文案 必须来自 PHP 层生成,结构如下:
'title_text' => [
'primary' => '热门推荐',
'secondary' => '大家都在看',
'seo' => '热门影视推荐列表',
]
模板中 禁止硬编码文案。
四、Shell(列表外壳)协议
4.1 Shell 的定义
Shell 负责 列表的整体布局方式,包括:
- 列数
- 排列方式
- 间距
- 是否为榜单 / 网格 / 流式
4.2 Shell 母型(当前冻结)
| 编号 | 语义 | 描述 |
|---|---|---|
| A | Flow | 流式列表 |
| B | Grid | 卡片栅格 |
| C | Rank | 排行榜序列 |
| D | Group | 分组区块(预留) |
4.3 Shell 规则(强制)
- Shell 不关心 Item 内容
- Shell 不关心 Behavior
- Shell 只定义布局,不定义状态
五、Item(内容结构)协议
5.1 Item 的定义
Item 只描述 “一条内容长什么样”,例如:
- 封面型
- 横向信息流
- 文本榜单
- 评分强化
- Top 排名
5.2 Item 母型(当前)
| 编号 | 类型 | 描述 |
|---|---|---|
| 01 | poster | 纯封面 |
| 02 | media | 横向图文 |
| 03 | text | 极简文本 |
| 04 | score | 评分 / 热度 |
| 05 | rank | 榜单序号 |
5.3 Item 扩展规则
-
Item 数量上限建议 ≤ 20
-
每新增一个 Item:
- 只新增 1 个 HTML
- 只新增 1 个 CSS
-
禁止为 Shell 单独写 Item
六、Behavior(行为 / 状态)协议(核心)
6.1 Behavior 的定义
Behavior 描述 列表“如何被使用”,而不是“长什么样”。
6.2 当前允许的 Behavior 语义
| 行为 | class | 说明 |
|---|---|---|
| 密度 | compact / loose | 紧凑 / 宽松 |
| 折叠 | collapsed | 超出部分隐藏 |
| 强调 | emphasis | 模块强化 |
| 分组 | grouped | 分组包裹 |
| 排序 | top | 榜单 |
6.3 Behavior 实现规则(强制)
- Behavior 只能通过 class 体现
- Behavior 只能作用于容器
- Behavior 禁止改变结构 / 布局
6.4 Behavior CSS 规范
- 当前阶段 只允许一个文件:
list/behavior.css
- 禁止拆分为多个 behavior 文件(未到规模)
七、CSS 分层与职责(冻结)
list/
├── base/ (基础样式,冻结)
├── shell/ (布局母型,≤5)
├── item/ (内容母型,≤20)
├── title/ (标题母型,≤10)
└── behavior/ (行为兜底,1 个)
八、PHP 生成规则(强制)
8.1 所有差异由 PHP 生成
$cfg['list_layout'] = [
'newest' => [
'shell' => 'A',
'item' => '01',
'title' => 'C',
'title_text' => [...],
'behavior' => [...],
'class' => 'compact collapsed',
],
];
8.2 模板中禁止出现:
- 随机
- 判断
- seed
- 行为组合逻辑
九、SEO 与安全规则(不可违反)
- 不允许所有列表使用同一 Shell
- 不允许所有列表使用同一 Item
- 不允许所有列表无 Behavior
- Title 文案必须存在差异
- 列表顺序必须可稳定随机
十、协议冻结声明
-
本协议为 List 模块 v1.0 最终规范
-
后续新增内容:
- 只能 扩展,不可破坏
-
若需变更:
- 必须升级协议版本号(v1.1 / v2.0)
十一、你现在已经具备的能力(客观评价)
截至此刻,你的系统已经具备:
- 模板级差异化(HTML)
- 结构级差异化(Shell / Item)
- 行为级差异化(Behavior)
- 语义级差异化(Title)
- 站点级稳定随机(seed)
👉 这是“工业级站群前端架构”
下一步(建议顺序)
你可以选一个最自然的方向继续:
A:把这套 List 协议接入“推荐 / 分类 / 搜索页” B:做「List 视觉母型档案表」,防止风格重复 C:开始 Detail / Play 页的同构设计
你只需要回一个字母,我继续直接带你落地。