自定义指令（pixem / pixcm / piximg-* / pixfont / pixicon）
在 HTML/CSS/JS 中用 Tab 展开 pixcm、pixem、piximg-*、pixreset、pixc、pixfont、pixicon、pixcdn 缩写，插入 mock 文案、占位图、CSS 清零、注释、网页字体或常用图标/库。
pix 自定义指令是什么？
pixcm 插入可读的简体中文 UI 占位文本；pixem 插入可读的英文 UI 文案；piximg-* 从 Picsum、pravatar、randomuser.me 或 DiceBear 插入随机占位图或头像；pixreset 在 CSS 面板插入清零样式；pixbody 插入居中 body 并把光标停在 background-color 后；pixc 插入块注释并把光标停在中间；pixfont 打开网页字体搜索弹窗（CDN Fonts / Google Fonts）或将 CDN Fonts 预设写入 HTML/CSS；pixicon-* 直插常用图标 CDN；pixcdn 搜索或直插常用 JS 库。输入缩写后按 Tab 展开（pixfont / pixcdn 会打开搜索弹窗）。
与 lorem 的区别
Emmet 的 lorem 生成传统拉丁假文；pixem 与 pixcm 生成更接近真实产品界面的可读文案；piximg-* 用于 mock 配图与头像，无需上传本地文件；pixfont 可在编辑器内搜索 CDN Fonts 或 Google Fonts 并插入样式表；pixicon-* 可一键引入常用图标库样式或脚本。
| 工具 | 缩写示例 | 语言 | 风格 | 计量 |
|---|---|---|---|---|
| Emmet lorem | lorem / lorem30 | 拉丁文 | 经典 Lorem ipsum | 单词 |
| pixem | pixem / pixemN | 英文 | 可读 UI 文案 | 词 |
| pixcm | pixcm / pixcmN | 简体中文 | 可读 UI 文案 | 字 |
| piximg-picsum | piximg-picsum / piximg-picsum1200x600 | HTML / CSS | Picsum 随机摄影图 | 像素（宽×高） |
| piximg-avatar | piximg-avatar / piximg-avatar128 | — | pravatar 真人头像 | 像素（裸缩写无路径边长；或用 64/128/256 预设） |
| piximg-randomuser | piximg-randomuser / piximg-randomuser128 | — | randomuser.me 真人肖像 | 像素（映射 thumb/med/large） |
| piximg-dicebear | piximg-dicebear / piximg-dicebear-lorelei | — | DiceBear 插画头像 | 像素（正方形边长） |
| pixfont | pixfont / pixfont-inter | — | CDN Fonts 网页字体 | 字体族 |
如何使用
在 HTML 或 CSS 面板光标处输入 pix 缩写后按 Tab。文案与图片类会在光标处展开；pixreset、pixbody 与 pixc 仅在 CSS 面板可用。输入 pixfont 后按 Tab 打开网页字体搜索弹窗（可切换 CDN Fonts / Google Fonts）；在 HTML/JS 面板输入 pixcdn 后按 Tab 打开 CDN 库搜索弹窗。pixicon-fontawesome 等纯 CSS 图标在 CSS 写入 @import、在 HTML 写入 link；Lucide / Feather 仍在 HTML/JS 写入 script。
piximg-* 缩写（占位图与头像）
piximg-picsum 用于内容大图（默认随机宽高）；piximg-picsum1200x600 等可指定固定尺寸；piximg-avatar 生成无路径边长的 pravatar 头像（如 ?img=60）；piximg-avatar64 / 128 / 256 等可指定边长；piximg-randomuser 用于 randomuser.me 真人肖像；piximg-dicebear 用于风格化插画头像。均可加 -url 仅输出 URL；randomuser 可用 -men / -women 指定性别。
| 缩写 | 含义 | 示例值 |
|---|---|---|
| piximg | Picsum 随机图（piximg-picsum 别名） | 随机（横版 ≥800×400 或竖版 ≥400×800） |
| piximg-picsum | 默认 Picsum 占位图（随机宽×高，完整 img） | 随机（横版 ≥800×400 或竖版 ≥400×800） |
| piximg-picsum1200x600 | 固定 1200×600 的 Picsum 占位图 | 1200×600 |
| piximg-picsum800x400 | 指定宽×高的 Picsum 占位图 | 800×400 |
| piximg-picsum-url | 仅插入 Picsum URL（随机宽×高） | — |
| piximg-picsum1200x600-url | 仅 Picsum URL（1200×600） | 1200×600 |
| piximg-picsum640x480-url | 仅 Picsum URL，指定宽×高 | 640×480 |
| piximg-avatar | pravatar 头像（默认尺寸，URL 无路径边长） | 默认（路径无边长） |
| piximg-avatar-url | 仅 pravatar URL（默认尺寸） | — |
| piximg-avatar64 | 指定边长的 pravatar 头像预设 | 64 |
| piximg-avatar128 | 指定边长的 pravatar 头像预设 | 128 |
| piximg-avatar256 | 指定边长的 pravatar 头像预设 | 256 |
| piximg-avatar128-url | 仅 pravatar URL（指定边长） | — |
| piximg-randomuser | 默认 randomuser.me 肖像（128×128） | 128 |
| piximg-randomuser128 | 指定边长的 randomuser.me 肖像 | 128 |
| piximg-randomuser-women | 指定性别（-men / -women） | women |
| piximg-randomuser128-url | 仅 randomuser.me URL（128） | — |
| piximg-dicebear | 默认 DiceBear 头像（avataaars，128） | 128 |
| piximg-dicebear-lorelei | 指定 DiceBear 风格（如 lorelei） | lorelei |
| piximg-dicebear128 | 指定边长的 DiceBear 头像 | 128 |
| piximg-dicebear128-url | 仅 DiceBear URL（128） | 128 |
| piximg-pexels | Pexels 随机图（1200×600，需 API Key） | 1200×600 |
| piximg-pexels-url | 仅 Pexels 图片 URL | — |
| piximg-pexels-video | Pexels 随机视频（需 API Key） | — |
| piximg-pexels-video-url | 仅 Pexels 视频 URL | — |
pixcm 缩写（中文，按字计数）
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixcm | 默认正文（约 30 字） | — |
| pixcmN | 指定字数 N 的正文 | 20 |
| pixcm3p | N 段（每段默认长度） | 3 |
| pixcm-t | 短标题 | — |
| pixcm-d | 一两句描述 | — |
| pixcm-name | 姓名 | — |
| pixcm-phone | 电话 | — |
| pixcm-price | 价格 | — |
| pixcm-date | 日期（ISO） | — |
| pixcm-job | 职业 | — |
| pixcm-email | 邮箱 | — |
| pixcm-company | 公司名 | — |
pixem 缩写（英文，按词计数）
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixem | 默认正文（约 30 词） | — |
| pixemN | 指定词数 N 的正文 | 20 |
| pixem3p | N 段（每段默认长度） | 3 |
| pixem-t | 短标题 | — |
| pixem-d | 一两句描述 | — |
| pixem-name | 姓名 | — |
| pixem-phone | 电话 | — |
| pixem-price | 价格 | — |
| pixem-date | 日期（ISO） | — |
| pixem-job | 职业 | — |
| pixem-email | 邮箱 | — |
| pixem-company | 公司名 | — |
pixreset / pixc 缩写（CSS 清零与注释）
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixreset | 最小通配符 reset | — |
| pixreset-all | 完整 CSS reset | — |
| pixbody | 居中 body（光标停在 background-color） | body { min-height: 100vh; … } |
| pixc | CSS 块注释（光标停在开闭定界符中间） | /* */ |
pixfont 缩写（网页字体）
pixfont 打开搜索弹窗，可在 CDN Fonts 与 Google Fonts 分页间切换并挑选字体族。Google Fonts 默认写入 fonts.googleapis.com；国内打不开时可打开「经 Bunny 插入」，改为 fonts.bunny.net（同一套线上目录）。Google / Bunny 按 Google Fonts 线上目录插入（字重以该目录为准），不会按手输族名猜测字重。pixfont-<slug> 仍只插入 CDN Fonts 预设——slug 与 cdnfonts.com 路径一致（如 pixfont-noto-sans-sc），不会改成 Google / Bunny URL。也可输入未列出的合法 pixfont-<slug>。
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixfont | 搜索网页字体并插入（打开弹窗） | — |
| pixfont-poppins | CDN Fonts · Poppins | poppins |
| pixfont-inter | CDN Fonts · Inter | inter |
| pixfont-roboto | CDN Fonts · Roboto | roboto |
| pixfont-open-sans | CDN Fonts · Open Sans | open-sans |
| pixfont-montserrat | CDN Fonts · Montserrat | montserrat |
| pixfont-lato | CDN Fonts · Lato | lato |
| pixfont-nunito | CDN Fonts · Nunito | nunito |
| pixfont-work-sans | CDN Fonts · Work Sans | work-sans |
| pixfont-noto-sans-sc | CDN Fonts · Noto Sans SC | noto-sans-sc |
| pixfont-playfair-display | CDN Fonts · Playfair Display | playfair-display |
| pixfont-lora | CDN Fonts · Lora | lora |
| pixfont-jetbrains-mono | CDN Fonts · JetBrains Mono | jetbrains-mono |
| pixfont-fira-code | CDN Fonts · Fira Code | fira-code |
| pixfont-bebas-neue | CDN Fonts · Bebas Neue | bebas-neue |
| pixfont-oswald | CDN Fonts · Oswald | oswald |
pixicon 缩写（图标 CDN）
纯 CSS 图标库（Font Awesome、Bootstrap Icons、Remix、Boxicons、Material）在 CSS 面板输入 pixicon-<slug> 后按 Tab，写入 @import；在 HTML 面板则写入 <link>。Lucide / Feather 仅在 HTML/JS 面板可用，写入 script；补全走 data-lucide / data-feather，或 class="icon-trash-2"（预览会自动渲染）。JS 面板不提供纯 CSS 图标指令。图标包来自平台已收录的 CDN 白名单。各库的 HTML 写法和补全位置见「图标库」指南。
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixicon-fontawesome | 图标 CDN · Font Awesome | fontawesome |
| pixicon-bootstrap | 图标 CDN · Bootstrap Icons | bootstrap |
| pixicon-remix | 图标 CDN · Remix Icon | remix |
| pixicon-lucide | 图标 CDN · Lucide | lucide |
| pixicon-feather | 图标 CDN · Feather Icons | feather |
| pixicon-boxicons | 图标 CDN · Boxicons | boxicons |
| pixicon-material | 图标 CDN · Material Icons | material |
pixcdn 缩写（CDN 库）
pixcdn 在 HTML/JS 面板打开 CDN 库搜索弹窗（可选手动选择 Script 或 ES Module，再选包版本）。pixcdn-<slug> 直插下方常用库（如 pixcdn-gsap），预设始终以 ES Module 写入。Vim 模式下可用 :pixcdn 打开搜索弹窗。
| 缩写 | 含义 | 示例值 |
|---|---|---|
| pixcdn | 搜索 CDN 库并插入（打开弹窗） | — |
| pixcdn-gsap | CDN 库 · GSAP | gsap |
| pixcdn-motion | CDN 库 · Motion | motion |
| pixcdn-three | CDN 库 · Three.js | three |
| pixcdn-lodash | CDN 库 · Lodash ES | lodash |
| pixcdn-animejs | CDN 库 · anime.js | animejs |
输出示例
缩写本身在各界面语言下相同；下方样例展示典型展开结果。
<img src="https://picsum.photos/seed/pix42/1120/520" alt="">
<img src="https://i.pravatar.cc/?img=12" alt="">
<img src="https://randomuser.me/api/portraits/med/women/42.jpg" alt="">
<img src="https://api.dicebear.com/7.x/avataaars/png?seed=pix42&size=128" alt="">
设计稿需要真实长度的文本才能检验行高与断行效果。
Realistic placeholder copy helps validate line height and wrapping in mockups.
<link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet">
@import url('https://fonts.cdnfonts.com/css/inter');
使用限制
- 暂不支持 p*4>pixcm 等嵌套 Emmet 链式写法，请在文本节点中直接输入缩写。
- 语言由缩写决定（pixcm / pixem），与界面语言无关。
- piximg-* 依赖 picsum.photos、i.pravatar.cc、randomuser.me 或 api.dicebear.com 外链，离线或网络受限时预览可能无法加载图片。
- piximg-* 只能在标签外插入图片，或在 src / poster 等地址属性中插入 URL；在 alt、class 等不适用的属性中不会出现对应补全。CSS 中 color、font-size、display 等明显不接受图的属性同样不会列出 piximg。pixem / pixcm 可用于 alt、title 等文案属性，不能用于 src。pixfont / pixcdn / pixicon 请在标签外展开。
- pixfont 弹窗可插入 fonts.cdnfonts.com、fonts.googleapis.com 或 fonts.bunny.net 外链；离线或网络受限时预览可能无法加载字体。国内打不开 Google Fonts 时可改走 Bunny。pixfont-<slug> 仍只走 CDN Fonts。只读模式下无法打开搜索弹窗。