★ FEATURED ARTICLE UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载Stack 是 DiceBear 中一款抽象头像风格在纸张底色上用浅、中、深三档色调垒起一堆平衡的石块并以上六种顶盖之一收尾。为了让开发者快速上手文档仓库为它维护了一份预设preset清单——一组组现成的渲染选项可直接复制进代码也可在 Playground 中打开继续微调。本文以 Stack Presets 文档 为骨架完整列出 11 组预设的配置值并深入文档仓库与dicebear/core源码讲清预设只是一包普通选项这一设计以及预设页面、校验与渲染工具链的实现细节。读完你就能选对预设、读懂每组预设的代码、在自己的项目或 HTTP API 中直接使用并理解预设数量与剩余可变头像数背后的计算逻辑。预设是什么一组普通的渲染选项按官方文档的定义preset预设就是一组普通的渲染选项an ordinary set of render options。它没有独立的运行时类型也无需任何核心core知道预设的存在。选中一个预设后你可以读它的代码把它复制进自己的项目也可以在 Playground 中打开它继续调整其他参数预设没有涉及的选项会继续随 seed种子变化所以每一行预设都会列出它仍然能产生多少种不同的头像。这一点在 presets.ts 的注释里说得更直白预设不过是一袋常规渲染选项因此它在每一种语言库和HTTP API 查询参数里都能直接工作不需要定义格式也不需要七个核心中的任何一个知道预设存在。预设的数据形态每个预设由四个字段加一个options对象构成定义见 presets.ts字段类型说明idstring稳定、kebab-case 格式用于?presetPlayground 链接namestring展示名如Sepiasummarystring一行简介显示在头像旁descriptionstring更长的设计理由卡片展开时显示optionsRecordstring, unknown实际渲染选项直接透传给Avatar预设文件存放在 apps/docs/.vitepress/theme/presets/stack.json通过import.meta.glob按风格名懒加载见 presets.ts。注释专门说明懒加载的原因55 个风格文件若被急切内联会形成一个 214 KB 的公共 chunk而懒加载后每个风格页面只拉取自己需要的那一个。Stack 风格与它的参数空间Stack 风格页stack/index.md对风格的描述是A balanced pile of stones in a light, a mid and a deep tone on a paper background, capped with one of six tops.即一堆在浅、中、深三档色调下保持平衡的石块铺在纸张背景上顶部由六种顶盖之一收束。从预设数据可以反推出 Stack 的核心参数空间四组颜色backgroundColor纸张/背景色、stoneLightColor浅色石块、stoneMidColor中色石块、stoneDeepColor深色石块组件选项pilesVariant石块布局变体tower 预设的描述提到共11 种布局其中 4 种能垒起四块以上石头通用选项scale缩放、backgroundColorFill/backgroundColorAngle背景渐变。这些选项命名规则来自 StyleOptions.ts 中的类型映射对每个颜色名C生成${C}Color、${C}ColorFill、${C}ColorFillStops、${C}ColorAngle、${C}ColorOrder对每个组件名C生成${C}Variant与${C}Probability。这正是为什么stoneLightColor、pilesVariant这样的名字会同时出现在预设文件、OptionsDescriptor 校验和 JavaScript 库调用中。背景色选项速查options 参考文档 给出了背景相关选项的完整语义选项取值默认值说明backgroundColorstring \| string[]unset十六进制颜色#可省略支持#RGB到#RRGGBBAAbackgroundColorFillsolid \| linear \| radialsolid背景填充类型可传数组以随机化backgroundColorFillStopsinteger \| [min, max]2渐变停靠点数量最小 2solid时忽略backgroundColorAnglenumber \| [min, max]0渐变角度-360 到 360backgroundColorOrderrandom \| fixedrandomfixed表示按给定顺序使用颜色而不是打乱这些选项在核心层由 Options.ts 统一读取color()把标量或数组归一化为数组未设置时返回undefined让解析器回落到风格定义里的默认色板。11 组预设逐一解析stack.json共收录 11 组预设。按设计意图可分成四类色调微调Sepia、Greyscale、Duotone、Muted、高饱和撞色Electric、背景改造Pastel Wall、Bold Pop、Sunrise、Stencil、构图改造Tower、Close Up。idname一句话简介设置的选项数sepiaSepia三档暖棕4greyscaleGreyscale三档灰阶4duotoneDuotone单色靛蓝四档明度4mutedMuted比出厂八色更柔和的尘土色4electricElectric超越出厂色板的霓虹石块4pastel-wallPastel Wall彩色背景替代纸白1bold-popBold Pop高饱和背景1sunriseSunrise暖色渐变背景3stencilStencil统一近黑背景只剩堆叠变化1towerTower只保留高塔布局1close-upClose Up放大石块铺满画布1色调类Sepia / Greyscale / Duotone / MutedSepiasepia——三档暖棕。风格本身就有浅、中、深三档色该预设把它们统一换成一套棕色阶沿石堆向下分发单色设定会让三档色同时变化、保持构图不变{ id: sepia, name: Sepia, options: { backgroundColor: [f0e7d9], stoneLightColor: [e3d2b4], stoneMidColor: [b08e66], stoneDeepColor: [6b4a2e] } }Greyscalegreyscale——三档灰阶不带任何色相的同一套三档阶梯适合打印样式表或任何颜色会传递不想要的语义的场景{ options: { backgroundColor: [efeff1], stoneLightColor: [dcdce0], stoneMidColor: [a0a0a6], stoneDeepColor: [4a4a50] } }Duotoneduotone——三档同一种靛蓝。背景与三档石块取同一个色相、四个明度这是一摞石头在仍能看出堆叠的前提下最接近单色的状态{ options: { backgroundColor: [eaecf7], stoneLightColor: [c8cdea], stoneMidColor: [7d86c0], stoneDeepColor: [343c78] } }Mutedmuted——尘土色石块取代出厂八色。出厂色调本身已经很安静这一组再往灰色方向走一步适合头像不该成为页面上最响亮的元素的场合。注意它把三档石块色都扩展成了多值数组让种子仍有挑选空间{ options: { backgroundColor: [ece9e3], stoneLightColor: [ddd8cc, e0dcd2, d8dcd6, e2dad6], stoneMidColor: [a5a58d, b98b73, 8e9aaf, 9c8a94], stoneDeepColor: [5b5b4a, 6b4f40, 4c5461, 574a52] } }高饱和撞色ElectricElectricelectric——石块比出厂任何色都更跳。它把同一组杠杆往反方向推地面近乎黑色让石堆读起来像被点亮而非印在纸上深色档也必须跟着抬亮——出厂深色档在黑地上会暗到看不见底石{ options: { backgroundColor: [0f0f12], stoneLightColor: [7cff00, 00e5ff, ffe600], stoneMidColor: [ff2e88, b400ff, ff6a00], stoneDeepColor: [c72a8c, 2a8cc7, c77a2a] } }背景改造Pastel Wall / Bold Pop / Sunrise / StencilPastel Wallpastel-wall——彩色墙面替代纸白。出厂提供四个几乎没差别的近白背景而这组给出五种淡色让地面成为一种选择而非默认{ options: { backgroundColor: [ffe3ea, e3edff, e2f5e9, fdf1d4, efe6ff] } }Bold Popbold-pop——高饱和地面垫在石堆后面响亮到头像在拥挤页面里也能立住浅色石块负责托起剪影{ options: { backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff] } }Sunrisesunrise——石堆背后的暖色渐变。这组专门演示渐变的背景选项两个颜色、linear线性填充、固定角度135种子仍然决定两个端点哪个在上{ options: { backgroundColor: [ffd9b0, ffa8bf], backgroundColorFill: linear, backgroundColorAngle: 135 } }Stencilstencil——人人都用同一个近黑地面只有石堆在变。这样一组头像从一组图片变成一张图标表{ options: { backgroundColor: [16161c] } }构图改造Tower / Close UpTowertower——只要高塔。11 种布局里只有 4 种能垒起四块以上石头把它们单独留下每个头像都是一根立柱此时每块石头的宽度就成了区分彼此的要素{ options: { pilesVariant: [tower, five, four, fourLean] } }Close Upclose-up——放大到石堆填满画布。它用scale而非颜色底石会超出画面边缘这在评论串给到头像的那个尺寸下反而更好读{ options: { scale: 1.3 } }注意scale属于核心通用选项见 StyleOptions.ts不是 Stack 专属——你可以在任何风格上这样用。在项目中使用预设预设只是选项因此使用方式与任何 DiceBear 选项完全一致。JavaScript / TypeScript 库安装核心与风格定义两个包npm install dicebear/core dicebear/styles然后像 JavaScript 库文档 示范的那样把预设的options展开进Avatarimport { Style, Avatar } from dicebear/core; import stack from dicebear/styles/stack.json with { type: json }; const style new Style(stack); // Sepia 预设 const avatar new Avatar(style, { seed: Delia, backgroundColor: [f0e7d9], stoneLightColor: [e3d2b4], stoneMidColor: [b08e66], stoneDeepColor: [6b4a2e], }); const svg avatar.toString();没有设置的选项石块布局、顶盖、渐变角度等会随 seed 变化——这正是预设保留多样性的来源想继续微调在avatar选项里叠加即可例如把 Sepia 与scale: 1.3组合需要 PNG/JPEG 时可用 converter 包转换。Playground 一键打开每个预设行的 Playground 按钮会跳到/playground/?stylestackpresetid拼接逻辑见 SitePresetRow.vue。例如?stylestackpresetsunrise。preset参数直接匹配预设的id打开后即可继续调参。HTTP API 查询参数因为预设只是普通选项同一组options也能作为 HTTP API 查询参数使用。文档仓库在 presets.ts 的注释里明确保证这一点。需要留意的边界在 validate-presets.ts 中有说明idRandomization、fontFamily、fontWeight、title这四个选项会被 HTTP API 静默丢弃且ColorOrder类选项公开 API 尚不支持——好在当前 11 组 Stack 预设都没有用到它们。预设页面从 JSON 到画廊的渲染链路预设画廊页Stack Presets 文档本质上是挂载SitePresetsPage组件的 VitePress 页面。整个渲染链路如下SitePresetsPage.vue 通过loadStylePresets(stack)拉取stack.json并加载风格定义每行调用 SitePresetRow.vue左侧是名称、一句简介与N options · M distinct avatars元信息中间是三个种子下的头像预览右侧是Code与Playground两个出口所有行共用同一组种子见 SitePresetsPage.vue这样预设之间可以横向对比而不是一次看一个头像。Stack 的预览种子定义在 previewRowSeeds.ts页面取前三个Delia、Ingrid、Carla作为画廊行的对照种子。还有多少种不同头像由computeCount(narrowDefinition(...))计算见 SitePresetRow.vue先按预设的选项把风格定义收窄narrowDefinition再统计收窄后的组合数computeCount。这就是文档所说每行列出它还能给你多少种不同头像的实现。预设的质量保障校验、同步与渲染工具预设是冻结的选项集会悄悄腐烂——组件一旦改名nameVariant选项就再也匹配不到任何东西而文档构建本身不会察觉。为此文档仓库内置了三套工具scripts见 apps/docs/package.jsonvalidate-presets.ts校验预设合法性运行npm run validate:presets。它把每个预设与已安装的dicebear/styles做交叉检查validate-presets.tsid必须是 kebab-case 且全局唯一四个文本字段非空每个options键必须存在于该风格的OptionsDescriptor中枚举值必须在当前风格定义内防止组件被改名后残留失效选项真正的一锤定音是渲染用Felix、Aneka、Milo、Luna、Dara、Erik六个探针种子而不是只测一个跑同一个new Avatar(style, { seed, ...options })——Avatar内部会执行与线上库完全相同的选项校验与解析器任何无解的颜色约束或越界值都会在构建期失败而不是等用户浏览器里翻车渲染结果必须包含use引用防止某个概率/变体选项把头像渲染成空。sync-preset-pages.ts把预设接进文档运行npm run presets:sync。它为每个拥有预设 JSON 的风格在风格页插入## Presets区块前 5 个并确保presets/index.md画廊页挂载了SitePresetsPagesync-preset-pages.ts。该脚本幂等可用--check模式只做检查。render-presets.ts人工审美的联系表预设的失败模式大多是视觉性的——暗色预设吞掉线稿、撞色刺眼、裁切切掉耳朵这些都是校验器看不见的。npm run presets:sheet -- stack会渲染一张每个预设一行、跨行共用同一组种子的联系表 PNG默认 6 个种子可用--seeds调整专供人眼逐行对比render-presets.ts。小结预设 可复制的选项 可对比的舞台DiceBear Stack 的 11 组预设覆盖了四条设计主线暖色/灰阶/单色的三档色调阶梯、超出出厂色板的高饱和撞色、纸张背景的多种替代方案、以及塔式布局与近景裁切两类构图改造。它们无一例外都是普通渲染选项因而在 JS 库、Playground 与 HTTP API 中可以直接落地文档仓库则用同种子对比行 收窄定义统计剩余组合数 六种子渲染校验 联系表人工审美这套工具链让预设既好用又不易腐烂。如果你在文档中想继续深挖可直接查看预设数据 stack.json、画廊组件 SitePresetsPage.vue、校验脚本 validate-presets.ts以及核心选项类型 StyleOptions.ts。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐DiceBear Moods 风格预设Presets完整指南12 组现成表情配色方案的复制、运行与底层原理DiceBear Moods 风格预设Presets完整指南12 组现成表情配色方案的复制、运行与底层原理 Moods 是 DiceBear 头像库中主打UI组件后端DiceBear Avataaars 预设Presets实战指南11 套现成配置、代码生成与 Playground 调参DiceBear Avataaars 预设Presets实战指南11 套现成配置、代码生成与 Playground 调参 DiceBear 官方文档为每个UI组件后端Pixel Art Neutral 风格预设实战DiceBear 现成像素脸的配色与组件方案Pixel Art Neutral 风格预设实战DiceBear 现成像素脸的配色与组件方案 Pixel Art Neutral 是 DiceBear 头像库UI组件后端上一篇合成生物学gh_mirrors/da/data-science-from-scratch基因编辑数据分析下一篇深海探索gh_mirrors/da/data-science-from-scratch海洋数据分析应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
