帮助
快速上手路径与编辑器、平台功能的详细指南。
快速上手
按顺序完成以下步骤。每个链接指向详细指南，完整说明见对应文章。
创建第一个 Fiddle
添加外部 CSS / JS
添加 Mock 素材
全部指南
编辑器
- 创建第一个 Fiddle打开编辑器，编辑 HTML/CSS/JS，运行预览并保存到云端。阅读指南
- 键盘快捷键切换 HTML / JS / CSS、运行、保存、格式化、禅模式与自定义编辑器快捷键。阅读指南
- 模板与 Tailwind起步模板与按需启用的 Tailwind CSS。阅读指南
- 从设计稿到 Fiddle：尺寸换算指南把 @1x / @2x / @3x 设计稿的标注换算成 CSS 逻辑像素，按逻辑宽度选择预览机型，并正确使用切图素材、避开常见还原坑。阅读指南
- Emmet 缩写在 HTML/CSS 中用 Tab 展开 Emmet：完整 HTML 语法与 CSS 属性词典，以及 lorem、pixem、pixcm、piximg-*、pixreset、pixfont、pixicon、pixcdn 等自定义指令。阅读指南
- CDN 库通过 jsDelivr 搜索 npm 包并选择版本，快速添加依赖。阅读指南
- 图标库用 pixicon 引入 Font Awesome、Remix、Lucide 等常用图标 CDN，并按各库写法补全。阅读指南
- CSS @import 白名单预览中允许的 CSS @import 域名与示例。阅读指南
- 预览工具检查元素、放大镜、截图、机型（含折叠机）、缩放、安全区、设计底图与参考线、多设备预览与控制台输出。阅读指南
- 编辑器 AI 助手BYOK 配置、侧栏对话、上下文范围，以及将建议应用到代码。阅读指南
- Vim 键位在 HTML/CSS/JS 编辑器中使用 Vim 导航、命令行与 Ex 命令。阅读指南
- 自定义指令（pixem / pixcm / piximg-* / pixfont / pixicon）在 HTML/CSS/JS 中用 Tab 展开 pixcm、pixem、piximg-*、pixreset、pixc、pixfont、pixicon、pixcdn 缩写，插入 mock 文案、占位图、CSS 清零、注释、网页字体或常用图标/库。阅读指南
工作区
- 分享与链接通过 URL Hash、短链、二维码图片、嵌入与导出选项分享作品。阅读指南
- 发布到探索保存作品、设置可见性，并在探索页公开展示。阅读指南
- 公开个人主页稳定的 /u/用户名 页面：页内编辑简介与外链、置顶代表作，并可上传横幅封面（须本机图床）。阅读指南
- 代码片段保存并插入可复用的 HTML、CSS、JavaScript 片段。阅读指南
- 作品集Pro：把多个作品打成可分享的作品包，支持公开链接，并可在公开主页展示封面预览。阅读指南
- 导入与导出从 JSFiddle 导入；在「我的作品」导出单个 ZIP/Markdown，或通过顶栏批量导出全部作品与笔记。阅读指南
- Pixorla Browser 桌面端下载、安装与首开：把作品实时预览放进独立桌面窗口。阅读指南
- 工作区布局布局预设、控制台位置、自动保存与自动运行。阅读指南
- 多页面工作区文件树管理文件与文件夹、上传图片到自己的图床、运行成真实小站，分享与导出带整棵文件树。阅读指南
- 跟练清单收藏想练的教程，选择模式开练，练成的作品自动关联回清单。阅读指南
- 笔记与自定义指令Pro 笔记的写法、样式栏、@ 指令、AI 生成文章，以及发布时随作品公开。阅读指南
- 社区规范社区板块如何运作、欢迎什么内容、被举报后会怎样。阅读指南
- 如何求助与反馈发布效果求助、作品求诊或对他人公开作品的反馈，以及标记采纳。阅读指南