入门 · 自选构建
下载

入门

Custom build 自选构建

全量 CSS 体积较大时，用 recipe 只编译页面用到的组件；tokens / layout / utilities 可按需开关。

三步： ① 勾选组件 → ② 下载 recipe.json → ③ 仓库根目录执行构建命令。 交互页：recipe-builder（读取 recipe-manifest.json）。

交互构建器

按侧栏 7 类分组勾选 44 组件，支持预设（landing / admin / minimal / content）、自动依赖提示与体积估算。

打开自选构建器 →

内置预设

类名说明
landing落地页 · 导航 + 表单 + 卡片 + 对话框
admin后台 · 表格 + 侧栏 + 分页 + 上传
minimal最小站 · 排版 + 按钮 + 卡片
content内容站 · 列表 + 手风琴 + 分页

文件位于 site-kit/pivcss/recipes/*.json；npm run pivcss:recipe 会编译全部预设并更新 manifest。

命令行

bash
# 从 JSON
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --recipe=site-kit/pivcss/recipes/admin.json

# 内联组件列表（无需先写 JSON）
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --name=shop --components=button,card,form,modal,notification --js

# 保存 recipe 副本
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --name=shop --components=button,card \
  --save-recipe=site-kit/pivcss/recipes/shop.json
# 从 JSON
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --recipe=site-kit/pivcss/recipes/admin.json

# 内联组件列表（无需先写 JSON）
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --name=shop --components=button,card,form,modal,notification --js

# 保存 recipe 副本
node site-kit/pivcss/scripts/compile_by_recipe_cli.mjs \
  --name=shop --components=button,card \
  --save-recipe=site-kit/pivcss/recipes/shop.json

recipe.json 字段

类名说明
name输出文件名 pivcss.{name}.min.css
components组件 slug 数组（与文档侧栏一致）
include.layout默认 true · layout 全套 partial
include.utilities默认 true
include.print默认 false

依赖（如 modal → close）由 component_scss_map.mjs 自动并入，构建器会提示。

裁剪 JS（可选）

加 --js 同时生成 pivcss.{name}.min.js，只含勾选组件需要的运行时（核心 + 主题 + 浮层 escape 等）。未勾选的 Tab / Carousel 等不会打进包。

纯静态展示页可只引裁剪 CSS，不必引 JS。

相关