【Strapi 系列之六】从零做设计公司官网（一）：Strapi 端 8 个模型这样建

这一篇进入实战：不再零散地介绍 Strapi 功能，而是从一个真实的设计公司官网出发，搭建内容模型。重点是讲清楚 为什么要建这 8 个模型、每个模型有哪些字段、模型之间如何关联，以及在 Strapi 后台怎么配置，为下一篇 Next.js 前端联调和表单提交做好准备。

从零做设计公司官网（一）：Strapi 端 8 个模型这样建

做一个设计公司官网，最容易踩的坑是什么？

不是前端页面不好看，而是网站做完之后，改一张首页大图要找开发，新增一个案例要改代码，想增加中英文版本又得重新折腾。

这就是为什么我们要把内容交给 CMS 管理。

这一篇用 Strapi 5 + Next.js ，从零搭建一个设计公司的内容后台。我们先不写前端代码，重点把数据模型设计好。模型设计合理，后续接口查询和页面开发都会轻松不少。

一、先规划网站需要什么内容

假设我们要给一家设计工作室做官网，网站包含首页、服务介绍、项目案例、团队介绍、文章资讯和联系表单。

我们规划 8 个内容模型：

模型	类型	用途
Site Setting	Single Type	网站名称、Logo、联系方式、社交链接
Project	Collection Type	设计案例、项目图片、项目详情
Service	Collection Type	品牌设计、空间设计、网页设计等服务
Team Member	Collection Type	团队成员与个人介绍
Article	Collection Type	设计文章、行业资讯
Article Category	Collection Type	文章分类
Testimonial	Collection Type	客户评价
Contact Message	Collection Type	保存访客提交的联系信息

为什么只有网站设置用 Single Type？

因为网站全局设置通常只需要一份；案例、服务、文章等内容则会有多条记录，适合用 Collection Type。Strapi 的 Content-Type Builder 可以创建这两类内容，以及可复用的 Component。官方文档：Content-Type Builder。

二、先建可复用组件

别急着给每个模型添加几十个字段。先把重复出现的结构抽出来。

组件 1：SEO 信息

组件分类：shared

组件名称：seo

字段：

• metaTitle：Text，页面标题

• metaDescription：Long text，页面描述

• shareImage：Media，单张图片，用于社交分享

首页、服务详情、项目详情和文章都可能需要 SEO 信息。使用同一个组件，字段规范更统一。

组件 2：按钮链接

组件名称：button-link

字段：

• label：Text，按钮文字

• url：Text，链接地址

• openInNewTab：Boolean，是否新窗口打开

这个组件适合首页 Banner、服务介绍等位置。注意，组件是可复用字段集合，不是独立内容模型，也不会单独生成 REST API 接口。

三、8 个模型，字段这样设计

1. Site Setting：网站全局设置

类型：Single Type

字段建议：

• siteName：Text，网站名称

• logo：Media，单张图片

• favicon：Media，单张图片

• email：Email，联系邮箱

• phone：Text，联系电话

• address：Long text，公司地址

• socialLinks：Repeatable Component，可重复的社交链接组件

• seo：Component，选择 shared.seo

socialLinks 可以复用 button-link 的思路，也可以单独建一个 shared.social-link 组件，包含 platform、url 两个字段。

这个模型的核心原则是：全站只维护一份，前端多个页面都可以读取。

2. Project：项目案例

类型：Collection Type

字段建议：

• title：Text，项目名称

• slug：UID，基于 title 生成

• summary：Text，案例摘要

• cover：Media，单张封面图

• gallery：Media，多张项目图片

• clientName：Text，客户名称

• year：Integer，项目年份

• projectType：Enumeration，例如 branding、space、web

• description：Rich text，项目详情

• featured：Boolean，是否首页推荐

• sortOrder：Integer，手动排序值

• seo：Component，shared.seo

为什么同时有 cover 和 gallery？

列表页只需要一张封面图，详情页则可能需要多张展示图。把它们分开，前端查询更清楚，也不必每次都加载整个图库。

3. Service：设计服务

类型：Collection Type

字段建议：

• title：Text，服务名称

• slug：UID，基于 title 生成

• shortDescription：Text，简短介绍

• description：Rich text，详细说明

• icon：Media，单张图标

• cover：Media，服务配图

• sortOrder：Integer，排序值

• seo：Component，shared.seo

例如品牌策略、视觉识别、空间设计、网站设计，都可以作为独立服务记录。

不要把所有服务写成一个长文本字段。拆成多条记录之后，前端才方便生成服务列表、详情页和首页精选区域。

4. Team Member：团队成员

类型：Collection Type

字段建议：

• name：Text，姓名

• slug：UID，基于 name 生成

• role：Text，职位

• avatar：Media，头像

• bio：Rich text，个人介绍

• sortOrder：Integer，显示顺序

• socialUrl：Text，个人主页或社交链接

如果未来需要展示团队成员的项目经历，再增加 Relation 关联 Project 即可。第一版先保持简单，不要为了"可能用到"提前设计一大堆字段。

5. Article：文章资讯

类型：Collection Type

字段建议：

• title：Text，文章标题

• slug：UID，基于 title 生成

• excerpt：Text，摘要

• cover：Media，封面图

• content：Rich text，文章正文

• authorName：Text，作者

• category：Relation，关联 Article Category

• publishedAt：使用 Strapi 的发布机制管理

• seo：Component，shared.seo

文章正文可以使用 Strapi 提供的富文本字段。前端需要根据实际返回的数据结构渲染内容，不能简单假设富文本一定是普通字符串。

6. Article Category：文章分类

类型：Collection Type

字段建议：

• name：Text，分类名称

• slug：UID，基于 name 生成

• description：Text，分类说明

例如设计趋势、品牌案例、设计技巧。

分类独立建模的好处是文章可以通过 Relation 关联分类，而不是每篇文章都手动输入一段分类文字。后续要做分类筛选时也更方便。

7. Testimonial：客户评价

类型：Collection Type

字段建议：

• clientName：Text，客户姓名

• company：Text，公司名称

• role：Text，客户职位

• quote：Long text，评价内容

• avatar：Media，客户头像

• featured：Boolean，是否首页展示

• sortOrder：Integer，排序值

客户评价通常不需要复杂结构。第一版把展示所需字段准备齐全即可。

注意：真实客户评价需要经过授权和确认，不要为了填充页面而编造客户背书。

8. Contact Message：联系表单

类型：Collection Type

字段建议：

• name：Text，联系人

• email：Email，联系邮箱

• company：Text，公司名称，可选

• serviceInterest：Text，感兴趣的服务，可选

• message：Long text，需求描述

• status：Enumeration，例如 new、in_progress、closed

这个模型和前面几个不同：它不是由编辑人员在后台编写的展示内容，而是用来接收访客提交的信息。

不要为了方便，把写入权限直接开放给所有公开 API 请求。 下一篇会再讲前端如何安全提交表单。实际部署时，还需要结合服务端校验、反垃圾机制、限流和权限策略。

四、模型之间的关系

当前最重要的一条关系是：

• Article Category → Article：一个分类可以对应多篇文章；每篇文章先关联一个分类。

其他模型先独立存在即可。等业务真正需要时，再为 Project 增加服务关联，为 Team Member 增加项目经历关系。

这样既能满足第一版官网需求，也不会把模型设计得过于复杂。

五、在 Strapi 后台的实际创建顺序

建议按照下面的顺序操作：

1. 进入 Content-Type Builder，创建 shared.seo、shared.button-link 等组件。

2. 创建 Article Category，再创建 Article，配置两者的 Relation。

3. 创建 Project、Service、Team Member、Testimonial。

4. 创建 Site Setting，填入网站 Logo、联系方式等基础信息。

5. 最后创建 Contact Message，检查它的字段和权限设计。

6. 在 Content Manager 中添加几条测试数据，上传图片，保存并发布需要公开展示的内容。

开发环境下可以使用 Content-Type Builder 修改结构；正式生产环境不要把它当成随意修改数据库结构的工具。模型调整应纳入版本管理、测试和部署流程。

六、建完之后，先检查这 5 件事

• Slug 是否唯一且稳定？ 项目和文章的 URL 不应因为标题修改就轻易改变。

• 图片字段是否区分封面与图库？ 避免列表接口加载过多图片。

• Relation 是否确实必要？ 不要把简单文本过度建模。

• 公开权限是否最小化？ 只开放前端确实需要读取或提交的接口。

• 发布状态是否正确？ 草稿不应意外出现在正式官网。

Strapi REST API 默认不会自动返回关联内容、媒体字段和组件内容，需要通过 populate 显式指定；同时，内容类型默认也不是对所有访客开放的。具体可以查看 REST API 文档 和 Populate 指南。

总结

设计公司官网第一阶段的重点，不是把所有功能一次性做满，而是让内容有清晰的归属：网站设置管理全局信息，Project 管理案例，Service 管理服务，Article 管理文章，其他模型各司其职。

模型确定之后，再准备几条真实的测试数据。等到下一篇，我们就把这些内容接入 Next.js，完成案例列表、详情页和联系表单，让这个官网真正跑起来。

(https://blog.csdn.net/weixin_43288714/article/details/169048189)