使用payload 造一个网站后台的轮子
01
原理解析
页面就像是用乐高积木拼成的一栋房子。例如about页面。
这栋"房子"其实由这些"积木"组成:
[公司简介积木] → 左边文字,右边视频
[数据条积木] → 30+ / 500+ / 50+ / 1,000,000+
[企业文化积木] → 背景图 + Vision/Mission + 按钮
[团队积木] → 4 张人物卡片
[里程碑积木] → 时间轴上的 4 张照片
[为什么选我们] → 4 个特色卡片
[证书积木] → 5 张证书图片
[合作伙伴积木] → Logo 网格
我们的做法是:把每一块都做成独立的乐高积木。你想换顺序、加减积木、调换颜色,直接在后台拖一拖就行,不用碰代码。
编辑 About 页面时,你会看到一排按钮:
[+ Add Block]
├─ Text Block
├─ Image Block
├─ Video Block
├─ Stats Block ← 数据条
├─ Team Block ← 团队
├─ Milestone Block ← 里程碑
├─ Features Block ← 特色
├─ Certificates Block ← 证书
└─ Partners Block ← 伙伴
02
最基础的积木模具
程序定义了 5 种最基本的积木:
Pages.ts 里,只定义了 5 种最基本的积木;
textBlock(文本)
imageBlock(图片)
tableBlock(表格)
videoBlock(视频)
ctaBlock(按钮)
位置:src/collections/Pages.ts
03
创建一个独立的积木模具
位置:src/collections/ 这个目录下面,创建自己想要的积木模具,可以重新命名。
最小必需结构
{
slug: 'teamBlock', // 必需:内部标识符
fields: [ // 必需:字段数组
{ name: 'title', type: 'text' },
],
}
就这么简单——slug 和 fields。其他的都是可选项。
04
造完积木模具后,去注册
注册位置:payload.config.ts
内容:
collections: [Users, Media, Categories, Products, Pages, FAQs, Inquiries],
globals: [Navigation, SiteConfig], // ← 加上 SiteConfig
05
前端写组件(渲染组件)生产积木的成品
生产积木的成品,主要决定前端页面的展示样式。
在后端数据积木字段已经创建好了以后,修改前端的样式。