CMS 最佳实践
提供关于 Webflow CMS 架构、关系、优化和排障的专业指导。
重要提示
始终使用 Webflow MCP 工具进行所有操作：
- 使用 Webflow MCP 的
webflow_guide_tool获取最佳实践 - 使用 Webflow MCP 的
data_sites_tool配合动作list_sites识别可用站点 - 使用 Webflow MCP 的
data_sites_tool配合动作get_site检索站点详情和计划限制 - 使用 Webflow MCP 的
data_cms_tool配合动作get_collection_list分析现有集合 - 使用 Webflow MCP 的
data_cms_tool配合动作get_collection_details检查集合模式 - 使用 Webflow MCP 的
data_cms_tool配合动作list_collection_items评估内容量 - 使用 Webflow MCP 的
data_pages_tool配合动作list_pages了解页面结构 - 使用 Webflow MCP 的
ask_webflow_ai询问特定 API 问题 - 请勿使用任何其他工具或方法进行 Webflow 操作
- 所有工具调用必须包含必要的
context参数（15-25个词，第三人称视角）
指令
阶段 1：发现与分析
- 识别请求：确定用户是否在：
- 规划新的 CMS 结构
- 优化现有集合
- 排障性能问题
- 设置关系
- 寻求架构指导
- 获取站点信息：使用 Webflow MCP 的
data_sites_tool配合动作list_sites和get_site了解计划限制 - 分析现有结构：使用 Webflow MCP 的
data_cms_tool配合动作get_collection_list和get_collection_details检查当前设置 - 评估内容量：使用 Webflow MCP 的
data_cms_tool配合动作list_collection_items了解规模 - 检查页面：使用 Webflow MCP 的
data_pages_tool配合动作list_pages查看内容显示方式
阶段 2：需求收集
- 理解用例：询问澄清性问题：
- 需要管理哪些内容？
- 谁将更新内容？
- 内容将如何显示？
- 需要哪些关系？
- 预期的内容量？
- 识别约束：考虑计划限制、技术约束、团队技能
- 定义成功标准：性能目标、编辑工作流、可扩展性需求
阶段 3：架构规划
- 设计集合结构：规划集合、字段和关系
- 选择字段类型：为每个内容元素选择合适的字段类型
- 规划关系：设计一对多和多对多连接
- 考虑分类法：确定类别、标签和组织结构
- 规划扩展性：为增长而设计（分页、性能、限制）
- 记录决策：解释权衡和理由
阶段 4：建议与验证
- 生成建议：提供具体、可操作的指导
- 优先排序更改：按影响组织（快速胜利 vs 长期）
- 解释权衡：帮助用户理解限制和变通方案
- 对照最佳实践验证：检查是否符合 Webflow 限制和模式
- 提供替代方案：在适用时提供多种方法
- 创建实施路线图：分阶段进行
阶段 5：实施指导
- 提供分步说明：实施清晰的指导
- 提供帮助：建议使用其他技能（cms-collection-setup、bulk-cms-update）
- 记录结构：推荐团队参考用的文档
- 建议测试方法：指导如何验证更改
- 规划迁移：如果重构，提供迁移策略
集合架构
何时使用 CMS 与静态
使用 CMS 时：
- 内容频繁更新（每周或更频繁）
- 多个相似项目（博客文章、产品、团队成员、项目）
- 非技术用户需要编辑内容
- 内容需要在前端进行筛选/排序
- 相同内容出现在多个页面上（作者简介、产品特性）
- 内容跨项目遵循一致结构
- 需要动态生成页面
使用静态时：
- 内容很少更改（年度更新或更少）
- 独特的单次部分（关于页面头部、主页特殊功能）
- 每个项目不遵循模式的自定义布局
- 不需要动态筛选或搜索
- 内容高度定制且不共享结构
- 性能至关重要且内容不改变
- 需要完全的设计灵活性
混合方法：
- 静态页面配合 CMS 驱动部分（例如，静态主页含 CMS 推荐语）
- CMS 用于最新内容，静态存档用于旧内容
- 静态落地页，CMS 用于子页面
字段类型选择
| 内容类型 | 推荐字段 | 备注 | 字符限制 |
|---|---|---|---|
| 短文本 | 纯文本 | 标题、名称、slug | 最多 256 字符 |
| 长文本（无格式） | 纯文本（长） | 描述、摘要 | 无限制 |
| 格式化内容 | 富文本 | 博客内容、简介、文章 | 无限制 |
| 单张图片 | 图片 | 照片、缩略图、头部 | 每张最多 4MB |
| 多张图片 | 多图片 | 图库、产品照片 | 最多 25 张 |
| 文件下载 | 文件 | PDF、文档、下载 | 每个文件最多 4MB |
| 是/否值 | 开关 | 精选标记、可见性切换 | 布尔值 |
| 单一选择 | 选项 | 状态、类型、类别 | 无限制选项 |
| 日期/时间 | 日期/时间 | 发布日期、事件、截止日期 | ISO 8601 格式 |
| 链接到单个项目 | 引用 | 作者 → 文章、类别 → 文章 | 一个项目 |
| 链接到多个项目 | 多引用 | 文章 → 标签、文章 → 相关文章 | 多个项目 |
| 外部 URL | 链接 | 社交链接、外部资源 | 最多 2048 字符 |
| 数值 | 数字 | 价格、评分、顺序、计数 | 整数或小数 |
| 电话号码 | 电话 | 联系电话 | E.164 格式 |
| 电子邮件地址 | 电子邮件 | 联系邮箱 | 有效电子邮件格式 |
| 颜色值 | 颜色 | 主题色、强调色、品牌色 | Hex 格式 |
| 视频嵌入 | 视频 | YouTube、Vimeo 嵌入 | 嵌入 URL |
字段类型决策树
需要存储：
├── 文本？
│ ├── 短（≤256 字符）？→ 纯文本
│ ├── 长 + 格式化？→ 富文本
│ └── 长 + 无格式化？→ 纯文本（长）
├── 媒体？
│ ├── 单张图片？→ 图片
│ ├── 多张图片？→ 多图片
│ ├── 视频？→ 视频
│ └── 文件下载？→ 文件
├── 选择/选项？
│ ├── 是/否？→ 开关
│ ├── 一个选项？→ 选项
│ └── 链接到项目？→ 引用/多引用
├── 结构化数据？
│ ├── 数字？→ 数字
│ ├── 日期/时间？→ 日期/时间
│ ├── 电话？→ 电话
│ ├── 电子邮件？→ 电子邮件
│ └── URL？→ 链接
└── 视觉？
└── 颜色？→ 颜色
关系模式
一对多（引用字段）
示例： 文章 → 作者
作者集合：
├── 名称（文本，必填）
├── slug（文本，必填）
├── 简介（富文本）
├── 照片（图片）
├── 头衔（文本） - 职位
├── 电子邮件（电子邮件）
└── 社交链接（链接）
文章集合：
├── 标题（文本，必填）
├── slug（文本，必填）
├── 内容（富文本）
└── 作者（引用 → 作者） ← 每篇文章有 ONE 个作者
显示： 在文章页面上，访问 author.name、author.photo、author.bio
筛选： 可以根据特定作者筛选文章
优势：
- ✅ 集中的作者数据（一次更新，处处反映）
- ✅ 易于保持一致性
- ✅ 可以创建作者资料页面显示他们的所有文章
- ✅ 高效（每个文章一个引用）
用例：
- 博客文章 → 作者
- 产品 → 品牌
- 活动 → 场地
- 项目 → 客户
- 推荐语 → 顾客
多对多（多引用）
示例： 文章 ↔ 标签
标签集合：
├── 名称（文本，必填）
├── slug（文本，必填）
├── 描述（纯文本）
└── 颜色（颜色） - 可选的视觉分组
文章集合：
├── 标题（文本，必填）
├── slug（文本，必填）
├── 内容（富文本）
└── 标签（多引用 → 标签） ← 每篇文章有 MANY 个标签
显示： 在文章页面上，循环遍历 tags 显示所有标签
筛选： 可以根据特定标签筛选文章
优势：
- ✅ 灵活的内容组织
- ✅ 交叉链接相关内容
- ✅ 更好的 SEO（主题聚类）
- ✅ 增强的用户导航
限制：
- ⚠️ 每个集合最多 5 个多引用字段
- ⚠️ 在集合列表中一次只能按一个多引用值筛选
- ⚠️ 无法按引用字段的排序
- ⚠️ 每个引用 = 额外的查询（影响性能）
多标签筛选的变通方案：
- 创建组合标签（例如，“vegan-gluten-free”）
- 使用 Finsweet CMS Filter 进行客户端筛选
- 为常见组合创建单独的筛选集合列表
- 使用自定义代码和 Webflow API
用例：
- 博客文章 ↔ 标签
- 产品 ↔ 特性
- 项目 ↔ 技术
- 食谱 ↔ 配料
- 课程 ↔ 主题
自引用（嵌套集合）
示例： 带子分类的类别
类别集合：
├── 名称（文本，必填）
├── slug（文本，必填）
├── 描述（纯文本）
├── 父级（引用 → 类别） ← 用于层级结构的自引用
└── 层级（数字） - 1、2、3 用于显示逻辑
用例：
- 带子分类的类别
- 带子菜单项的菜单
- 组织层次结构
- 产品分类
优势：
- ✅ 灵活的层级结构
- ✅ 无限深度（理论上）
- ✅ 易于重新组织
限制：
- ⚠️ 在 Webflow 中显示嵌套层级复杂
- ⚠️ 实际实现建议最多 2-3 级
- ⚠️ 深度嵌套需要自定义逻辑
替代方案： 对于简单的 1-2 级类别，使用选项字段
双向关系
示例： 相关文章
文章集合：
├── 标题（文本，必填）
├── slug（文本，必填）
├── 内容（富文本）
└── 相关文章（多引用 → 文章） ← 自引用到其他文章
显示： 在文章页面底部显示相关文章
优势：
- ✅ 让用户保持更长时间的参与
- ✅ 更好的 SEO（内部链接）
- ✅ 灵活的内容连接
挑战：
- ⚠️ 并非真正的双向（A → B 不会自动创建 B → A）
- ⚠️ 如果需要双向，必须手动维护
- ⚠️ 对于内容编辑者可能耗时
解决方案：
- 使用标签实现自动“按标签相关”逻辑
- 手动策划最重要的连接
- 混合：手动 + 基于标签/类别的自动化
示例
示例 1：规划新的 CMS 结构
用户提示：
我正在搭建一个食谱网站。应该如何构建 CMS？
步骤 1：需求收集
📐 CMS 规划：食谱网站
让我问几个问题来设计最佳结构：
1. **内容量**：你计划有多少食谱？
- 少量（≤50）：简单结构
- 中等（50-200）：适度组织
- 大量（200+）：需要高级分类体系
2. **食谱属性**：每个食谱将包含哪些信息？
- 基础：名称、配料、步骤、图片
- 高级：准备时间、烹饪时间、难度、营养信息、饮食标签
3. **组织需求**：用户将如何找到食谱？
- 按餐点类型（早餐、午餐、晚餐）
- 按菜系（意大利、墨西哥、亚洲）
- 按饮食限制（素食、无麸质、生酮）
- 按烹饪方法（烘焙、烧烤、慢炖）
- 按配料（鸡肉、意面、蔬菜）
4. **作者设置**：单一作者还是多个作者？
- 单一：你管理所有内容
- 多个：食谱创作者团队
5. **用户参与**：有哪些互动功能？
- 评论/评价
- 评分
- 收藏
- 打印食谱卡片
基于你的回答，我将设计最优的 CMS 架构。
步骤 2：用户回应后
📐 推荐的 CMS 架构：食谱网站
基于你的需求（中等量、多个作者、高级筛选）：
---
## 需要的集合：4 个
### 1. 食谱（主要内容）
├── 名称（文本，必填）- "Homemade Pasta Carbonara"
├── slug（文本，必填）- "homemade-pasta-carbonara"
├── 描述（纯文本，160字符）- SEO 简短摘要
├── 特色图片（图片）- 详情页的主图
├── 缩略图图片（图片）- 网格卡片的较小图片
├── 准备时间（数字，必填）- 准备分钟数
├── 烹饪时间（数字，必填）- 烹饪分钟数
├── 总时间（数字）- 自动计算或手动
├── 份量（数字，必填）- 份数
├── 难度（选项：简单、中等、困难）
├── 配料（富文本，必填）- 带数量的配料表
├── 步骤（富文本，必填）- 分步说明
├── 备注（富文本）- 厨师笔记、技巧、替换建议
├── 营养信息（纯文本）- 卡路里、蛋白质等
├── 作者（引用 → 作者，必填）
├── 类别（引用 → 类别，必填）- 主要餐点类型
├── 菜系（引用 → 菜系）- 意大利、墨西哥等
├── 饮食标签（多引用 → 饮食标签）- 素食、无麸质等
├── 烹饪方法（多引用 → 方法）- 烘焙、烧烤等
├── 精选（开关）- 突出显示在主页
├── 发布日期（日期，必填）
└── 查看次数（数字）- 跟踪热度
**总字段：** 22 个字段
**需要的计划：** 最少 CMS 计划（20 个集合，2000 个项目）
### 2. 作者
├── 名称（文本，必填）
├── slug（文本，必填）
├── 头衔（文本）- "总厨"、"食谱开发者"
├── 简介（富文本）
├── 照片（图片）
├── 专长（纯文本）- "意大利菜"、"烘焙"
├── 社交-Instagram（链接）
├── 社交-网站（链接）
└── 电子邮件（电子邮件）
**目的：** 所有食谱的可重复使用作者信息
### 3. 类别
├── 名称（文本，必填）- "早餐"、"午餐"、"晚餐"、"甜点"
├── slug（文本，必填）
├── 描述（纯文本）
├── 图片（图片）- 类别主图
├── 颜色（颜色）- 视觉标签
├── 排序顺序（数字）- 控制显示顺序
└── 图标（图片）- 类别图标
**目的：** 主要餐点类型导航
---
...（示例继续）
（完整示例包含更多细节，此处省略以保持简洁）