模板结构:模板 = 壳,数据永不绑定模板
这是 OCPS 模板体系最重要的设计原则:模板是渲染壳(页面编排 + 主题 + 种子示例),数据永远属于应用。切换模板只换壳,应用在内容/电商/分类等子平台的数据零改动。
模板 JSON 结构
一个模板的 template 字段结构如下:
{
"theme_default": "starlight",
"pages": {
"home": { "title": "首页", "blocks": [] },
"products": { "title": "产品库", "blocks": [] },
"reviews": { "title": "评测", "blocks": [] }
},
"contracts": {
"commerce": ["commerce.products"],
"content": ["content.contents"],
"category": ["category.categories"],
"themes": ["themes.read"],
"i18n": ["i18n.read"]
},
"requires": [
{ "platform": "commerce", "scope": "commerce:read" },
{ "platform": "content", "scope": "content:read" },
{ "platform": "category", "scope": "category:read" },
{ "platform": "themes", "scope": "themes:read" },
{ "platform": "i18n", "scope": "i18n:read" }
],
"params": {
"site_name": { "label": "站点名称", "type": "string", "default": { "en": "My Site", "cn": "我的站点" } },
"default_lang": { "label": "默认语言", "type": "select", "options": ["en","cn","tw","jp","de","fr","es","ar"], "default": "en" },
"theme_default": { "label": "默认主题", "type": "select", "options": ["starlight","aurum","noir"], "default": "starlight" }
},
"settings": {
"site_name": { "en": "My Site", "cn": "我的站点" },
"theme_default": "starlight"
}
}
各字段含义
| 字段 | 说明 | ||
|---|---|---|---|
theme_default | 安装后应用的默认主题(皮肤) | ||
pages | 页面定义:key(路由段)+ 标题 + 区块数组 | ||
contracts | 数据契约声明:模板需要哪些数据源 | ||
requires | 安装前提:目标应用必须已授权这些 scope,否则安装被拒(409 CONTRACT_UNSATISFIED) | ||
params | 安装时可由用户填写的参数(站点名/默认语言/主题…) | ||
settings | 站点设置默认值(含 8 语言) | ||
seed | 种子示例数据(仅演示,不写入正式数据) |
区块(blocks)
每个页面由区块组成,区块是页面的最小编排单元:
{
"id": "blk-xxxxxxxx",
"type": "hero",
"title": "首页主视觉",
"sort": 1,
"config": {
"badge": "NEW",
"title": "欢迎来到我的站点",
"sub": "一句话副标题"
},
"bind": {
"source": "commerce.products",
"category_slug": "flathead",
"limit": 6,
"mode": "featured"
}
}
内置区块类型
| 类型 | 说明 | 常用配置 | ||
|---|---|---|---|---|
hero | 主视觉横幅 | badge / title / sub | ||
features | 特性宫格 | raw(items 数组 JSON) | ||
stats | 数据指标 | raw(metrics 数组 JSON) | ||
cta | 行动号召 | title / sub | ||
image_banner | 图片横幅 | image | ||
html | 自定义 HTML | html | ||
text | 文本段落 | title / body | ||
cards | 卡片组 | raw(items) | ||
product_grid | 产品列表 | bind 数据源 | ||
article_grid | 文章列表 | bind 数据源 | ||
categories | 分类导航 | bind 数据源 | ||
form | 联系表单 | submit |
数据绑定(bind)
动态区块绑定子平台数据源:
{
"source": "commerce.products", // 数据源
"category_slug": "flathead", // 分类过滤(可选)
"limit": 6, // 数量
"mode": "featured" // featured / latest / hot
}
支持的数据源:commerce.products、content.contents、category.categories。
模板的两种编辑方式
- 可视化编辑(推荐):平台后台模板编辑页 → "🎨 可视编辑"——全屏三栏:页面/区块列表 + 实时预览 + 人性化配置表单,另有树形 JSON / 原始 JSON 两个 Tab 同步编辑;
- 代码方式:直接编辑模板 JSON(适合模板开发者)。
安装与回滚
- 安装 = 备份当前模板层配置 → 写入新模板 → 预览态;
- 激活 = 正式生效(同一应用同时只有一个激活模板);
- 回滚 = 恢复安装前的 page_blocks/theme/settings,一键完成。