如何在Headless CMS中为多区块页面设计内容模型并建立关联？

核心思路：用「关联字段」实现动态内容挂载 #

主流Headless CMS（如Contentful、Sanity、Strapi）都支持在内容模型中添加关联字段，让「主页面」模型可以引用多个「公司」条目，以此适配公司数量不固定的场景，实现多区块页面的动态组合。

具体实现步骤 #

1. 给「主页面」模型添加多引用字段

   • 进入「主页面」模型的字段编辑界面，新增一个类型为「多引用」（不同CMS命名略有差异，比如Contentful叫「References - Many」、Strapi叫「Relation - One-to-Many」）的字段，命名为「关联公司列表」。
   • 将该字段的关联目标设置为「公司」内容模型，允许选择多个条目。

2. 编辑主页面时动态关联公司

   • 编辑「主页面」内容时，在「关联公司列表」字段中勾选需要展示的公司条目，数量可随时调整（新增、删除直接操作即可）。
   • 保存后，主页面的内容数据会包含所有选中公司的关联ID或完整嵌套数据（取决于CMS的配置选项）。

3. 前端渲染时合并数据生成页面

   • 调用Headless CMS的API获取「主页面」数据时，通过API参数（比如Contentful的include、Sanity的expand）请求关联的「公司」数据，让接口返回合并后的完整数据集。
   • 前端代码中遍历「关联公司列表」数组，逐个渲染公司区块的UI组件，自动生成对应数量的区块。

进阶优化方案 #

• 添加排序控制：如果需要指定公司区块的展示顺序，可在关联字段中启用排序功能（部分CMS支持拖拽排序，或手动输入排序序号），前端按排序值渲染即可。
• 通用区块模型（可选）：如果页面还有其他类型的动态区块（如banner、新闻），可以创建一个「页面区块」通用模型，包含「区块类型选择」和对应关联字段，再让「主页面」引用多个「页面区块」条目，实现更灵活的页面布局。

内容的提问来源于stack exchange，提问作者Matt