feat: 更新亚克力机箱-单详情页及 skills 配置优化
This commit is contained in:
@@ -19,30 +19,33 @@ description: 设计电商产品的详情页。当用户需要为产品生成详
|
||||
|
||||
### 步骤 1: 读取 SKU 配置
|
||||
|
||||
从 `产品/{产品线}/{产品名}/sku/` 目录下的 markdown 文件读取产品配置。
|
||||
从 `产品` 目录下找到对应的产品目录
|
||||
|
||||
文件格式示例:
|
||||
```
|
||||
亚克力-单-AMD-A4-2G-16G.md
|
||||
```
|
||||
|
||||
### 步骤 2: 渲染 HTML 模板
|
||||
### 步骤 2: 生成 HTML 文件
|
||||
|
||||
使用 `scripts/render.js` 脚本,将 SKU 数据填充到 HTML 模板中:
|
||||
#### 详情页组成部分
|
||||
- 购买须知
|
||||
- 亚克力机箱需要自己组装,店铺会提供安装视频
|
||||
- 受成本限制,产品无法做到十全十美,完美主义者慎拍
|
||||
- 配置清单
|
||||
- 功能描述
|
||||
- 产品实拍图
|
||||
- 配件清单
|
||||
- 包装展示
|
||||
- 常见问题
|
||||
1. 产品是否支持双CPU?
|
||||
2. 产品是否支持双内存条
|
||||
3. 产品是否支持双硬盘
|
||||
- 严格按照详情页组成生成详情页,多余的删除掉
|
||||
- 需要用的产品图片,都放在对应产品目录的image目录下
|
||||
- html 按照1000*1000的分辨率生成
|
||||
- 一个产品有多个sku,但一个产品只需要一个详情页,不需要为每个sku生成详情页
|
||||
- 详情页放到每个产品对应的`详情`目录下
|
||||
- 配色采用科技风格
|
||||
- 单个页面放不下,采用-1 -2 的方式拆分多个页面
|
||||
|
||||
```bash
|
||||
cd .codebuddy/skills/product-detail-designer/scripts
|
||||
node render.js <sku文件路径> [输出目录]
|
||||
```
|
||||
|
||||
模板位置:`assets/templates/{产品类型}/`
|
||||
|
||||
可用模板变量:
|
||||
- `{{PRODUCT_NAME}}` - 产品名称
|
||||
- `{{SKU_CODE}}` - SKU 编码
|
||||
- `{{CPU}}` / `{{MEMORY}}` / `{{STORAGE}}` - 核心配置
|
||||
- `{{TOTAL_COST}}` / `{{RETAIL_PRICE}}` - 价格信息
|
||||
- `{{NOTE}}` - 备注信息
|
||||
|
||||
### 步骤 3: HTML 转 PNG 图片
|
||||
|
||||
@@ -60,19 +63,3 @@ node convert-html-to-png.js
|
||||
```bash
|
||||
node remove-watermark.js
|
||||
```
|
||||
|
||||
## 资源说明
|
||||
|
||||
### scripts/
|
||||
|
||||
- `render.js` - HTML 模板渲染脚本,读取 SKU markdown 并生成对应的 HTML 文件
|
||||
|
||||
### assets/templates/
|
||||
|
||||
- `亚克力单/` - 亚克力单机箱详情页模板(7个 HTML 模板)
|
||||
- `亚克力双/` - (预留)
|
||||
- 其他产品模板可按需添加
|
||||
|
||||
### references/
|
||||
|
||||
- `产品配置规范.md` - 产品设计原则、SKU 命名规则、页面设计规范
|
||||
|
||||
Reference in New Issue
Block a user