← 返回列表
使用payload 造一个网站后台的轮子
造轮子
📄 5 个步骤 · 🕒 最后编辑 2026-09-24 15:06
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 前端写组件(渲染组件)生产积木的成品
生产积木的成品,主要决定前端页面的展示样式。 在后端数据积木字段已经创建好了以后,修改前端的样式。