装修卡片值-得到html
根据传入的 DIY 配置，渲染出对应的 HTML 页面内容。用于预览 DIY 编辑效果，无需真正保存就能实时看到页面渲染结果。
接口信息
- 接口地址:
{your-site-url}/api/skill/theme-liquid/get-liquid-html
- 基础 URL:
{your-site-url} 需替换为你自己的独立站 URL 地址，如 https://your-domain.com/apimanager666
- 请求方式:
POST
认证
请求头中需要携带 skill-access-token：
| Header |
值 |
skill-access-token |
{your-skill-access-token} （请替换为你自己的 token） |
Content-Type |
application/json |
请求参数 (JSON Body)
| 字段 |
类型 |
必填 |
说明 |
page_type |
string |
是 |
页面类型。page 代表自定义页面，product 代表商品页面。目前只支持这2个值 |
diy_config |
Object |
是 |
装修卡片的 JSON 结构数据。结构见下方说明 |
diy_config 字段
| 字段 |
类型 |
必填 |
说明 |
sections |
Object |
是 |
页面上所有 section 的配置。key 为 {section_type}-{随机ID}（如 affiliate-banner-card-mfE8PfAbOM），value 为该 section 的完整配置 |
order |
Array[string] |
是 |
section 的渲染顺序数组，元素为 sections 的 key |
sections 子项 — section 配置
| 字段 |
类型 |
必填 |
说明 |
type |
string |
是 |
section 类型标识，如 affiliate-banner-card、collapsible-tabs |
name |
Object |
是 |
section 显示名称（多语言对象），{ text, lang_params } |
settings |
Object |
是 |
section 的配置项，结构因 type 而异。必含 cardID、visibility |
blocks |
Object |
是 |
section 的子块配置。key 为 {block_type}_{序号}，value 为该 block 的完整配置 |
block_order |
Array[string] |
是 |
block 的渲染顺序数组 |
blocks 子项 — block 配置
| 字段 |
类型 |
必填 |
说明 |
type |
string |
是 |
block 类型标识，如 slider_item、item、image |
name |
Object |
是 |
block 显示名称（多语言对象） |
settings |
Object |
是 |
block 的配置项，结构因 section 和 block 类型而异 |
多语言对象结构
| 字段 |
类型 |
说明 |
text |
string |
默认语言文本 |
lang_params |
Object/Array |
其他语言翻译。有数据时为对象 { "en": "...", "tw": "..." }，无数据时为空数组 [] |
请求示例
请求体 JSON（简化示例）
{
"page_type": "page",
"diy_config": {
"sections": {
"rich-text-abc123": {
"type": "rich-text",
"name": { "text": "富文本", "lang_params": { "en": "Rich text" } },
"settings": { "cardID": "rich-text-abc123", "visibility": true },
"blocks": {
"heading_1": {
"type": "heading",
"settings": { "text": { "text": "Title", "lang_params": [] } }
}
},
"block_order": ["heading_1"]
}
},
"order": ["rich-text-abc123"]
}
}
cURL
curl --location --request POST '{your-site-url}/api/skill/theme-liquid/get-liquid-html' \
--header 'skill-access-token: {your-skill-access-token}' \
--header 'Content-Type: application/json' \
--data-raw '{"page_type":"page","diy_config":{"sections":{"rich-text-abc123":{"type":"rich-text","settings":{"cardID":"rich-text-abc123","visibility":true},"blocks":{"heading_1":{"type":"heading","settings":{"text":{"text":"Title","lang_params":[]}}}},"block_order":["heading_1"]}},"order":["rich-text-abc123"]}}'
返回结果
code 为 200 表示调用成功；code 不为 200 表示调用失败。
成功响应
{
"code": 200,
"data": {
"content_for_layout": "<div class=\"section_id_...\">...</div>",
"js_code": "<script type=\"text/javascript\" src=\"...\"></script>"
},
"message": "success"
}
返回字段说明
| 字段 |
类型 |
说明 |
code |
Number |
状态码，200 表示成功 |
message |
String |
执行结果的文字描述 |
data.content_for_layout |
string |
渲染后的 HTML 内容，可直接嵌入页面展示 |
data.js_code |
string |
渲染后的装修卡片所需的 JS 代码（<script> 标签），需同时加载以确保卡片交互正常 |
注意事项
diy_config 的数据结构与 DIY 编辑器内部数据格式一致，可直接从编辑器中获取sections 的 key 格式为 {type}-{唯一ID}，该 ID 用于 DOM 元素标识和样式作用域settings.cardID 必须与 sections 的 key 一致- 渲染结果仅用于预览，不会保存到数据库
- 返回的
content_for_layout 是完整的 HTML 片段，可直接嵌入页面展示
js_code 包含页面交互所需的 JavaScript，需同时加载