Frappe Builder 是一个开源的 低代码 (low-code) 网站构建工具，由 Frappe 社区维护，其目标是“用直观的可视化编辑器 (类似 Figma)”，让用户无需深入编码也能构建漂亮、响应式、性能优秀的网站。它将网页设计与发布流程合并为一站式体验，提供从页面设计到一键上线的完整能力。与传统 CMS（如 WordPress）存在的布局局限、插件冗余、样式/脚本臃肿等问题不同，Frappe Builder 强调简洁、高性能和易用性。
Frappe Builder GitHub 地址：https://github.com/frappe/builder
它基于 Frappe Framework，因此不仅适合静态页面，也能构建动态、数据驱动的网站，支持从后台数据库读取动态内容，适用于博客、公司官网、产品展示页、甚至简单的业务系统前端。
Frappe Builder 的主要特性
Frappe Builder 的设计初衷是要让网页构建过程既像设计工具又像发布平台。它包含以下几个特点：
- 可视化编辑器：通过拖放组件、调整布局、可视化设计页面，类似于 Figma 的操作体验。
- 响应式布局：自动适配多种设备 (桌面 / 平板 / 手机)，帮助你的网站在任何屏幕上都保持良好展示。
- 组件系统 + 可重用模板：例如导航栏、页脚、卡片 (card)、按钮 (button)、文章块 (article block) 等作为模板组件，可在多个页面间复用。即使修改了组件，也能够统一更新所有使用该组件的页面。
- 动态 / 数据驱动页面：通过与 Frappe 框架后端结合，可以从数据库中拉取数据 (比如文章列表、产品信息)，并在前端以“数据块 (data block)”的方式动态渲染内容。
- 脚本与样式扩展：支持在页面中嵌入客户端脚本 (client scripts)、全局脚本 (global scripts) 和自定义样式 (CSS)，方便实现交互、动画或特定样式调整。
- 一键发布 (one-click publish)：设计完成后，只需点击发布按钮即可把网站部署上线，极大降低了从编辑到上线的摩擦。
- 高性能 & 轻量级输出：Builder 生成的页面没有不必要的第三方 JS / CSS，页面体积轻、加载快，有利于 SEO 和用户体验。
借助这些特性，Frappe Builder 适用于从静态官网、博客、产品展示站，到简单的内容管理系统 (CMS) 或电商前端等多种场景。
如何开始使用 Frappe Builder
Frappe Builder 支持几种部署方式，你可以根据用途和环境选择合适方式。
托管 / Managed Hosting（最简单方式）
如果你不想自己管理服务器，可以直接使用 Frappe Cloud 的托管服务，一键部署 Builder。它负责基础设施、自动更新、备份等，适合只想快速上线网站的人。
自托管 (Self-hosting) / 本地部署
如果你想更灵活地掌控环境，或用于开发、测试、个性化定制，可以选择自己托管。这里是基本流程 (基于官方 README):
对于 生产部署 (production)：
1. 下载官方提供的安装脚本 (e.g. easy-install.py)
2. 运行部署命令，例如：
python3 ./easy-install.py deploy \
--project=builder_prod_setup \
--email=you@example.com \
--image=ghcr.io/frappe/builder \
--version=stable \
--app=builder \
--sitename subdomain.yourdomain.tld
将示例中的 you@example.com 和 subdomain.yourdomain.tld 替换为你的邮箱与域名。该安装脚本会自动配置好数据库、Web 服务器、Frappe 框架及 Builder 应用，运行约 5 分钟即可部署完毕。
对于 开发 / 本地环境 (development)：
如果你想在本地调试、定制 Builder 或贡献代码，官方提供 Docker + Docker Compose 的 setup 相对简单：
1. 创建一个工作目录，例如 mkdir frappe-builder && cd frappe-builder。
2. 下载 docker-compose.yml 和 init 脚本 ( init.sh )。
3. 执行 docker compose up。系统会自动创建一个站点，你会看到终端输出 Current Site set to builder.localhost。
4. 打开浏览器访问 http://builder.localhost:8000，使用默认账号 (Administrator / admin) 登录，就可以使用 Builder 可视化界面。
如果你更习惯传统 Frappe Bench 的方式，也可以：在你的 frappe-bench 环境里通过 bench get-app builder, bench new-site ..., bench install-app builder 等命令进行安装。
对于前端开发，还可以进入 frappe-bench/apps/builder/frontend，使用 yarn install + yarn dev --host 启动 Vite 开发服务器，实时预览和调试。
使用 Frappe Builder 构建网站的流程
一旦部署完成，你就可以通过浏览器进入 Builder 编辑界面，整个建站流程一般如下：
-
创建 / 设计页面：通过拖放组件 (如标题、图片、文本块、卡片、按钮、导航栏等)，布局页面结构。
-
复用 / 模板组件：将常用部分 (导航、页脚、文章卡片等) 保存为组件 / 模板，以便多个页面共享。以后如果设计变化，只需要修改模板组件即可同步更新。
-
添加动态内容 (可选)：如果你的网站需要展示数据库中的内容 (例如博客文章、产品列表、新闻列表等)，可以通过 Builder 的后台集成功能把数据库数据渲染为页面内容块 (data blocks / dynamic blocks)。
-
定制脚本 / 样式 (可选)：如果需要交互、动画或特殊样式，可以添加自定义脚本 (JS) 或样式 (CSS)。这样可以实现比如表单验证、用户交互、动态效果等功能。
-
预览测试：在编辑器里实时预览页面，并测试不同设备 (响应式)、功能 (脚本 / 数据绑定) 是否正常。
-
发布上线：确认无误后点击 “发布 (publish)” 按钮。一键部署后，你的网站即面向公众开放，可以访问你配置的域名。
-
后期维护与迭代：如果你需要修改内容、样式或页面结构，可以继续使用 Builder 编辑器，无需手动修改代码或重新部署。
Frappe Builder 的适用场景与限制
Frappe Builder 非常适合以下场景：
-
个人 / 小团队想快速搭建展示型网站 (博客、作品集、公司官网、产品页等)
-
想减少对 CSS/HTML/JS 的依赖，用可视化工具快速上线
-
希望结合后台数据库，展示动态内容 (例如文章列表、产品数据、用户生成内容)
-
追求页面性能、SEO 与响应式体验，不希望页面加载大量冗余脚本
不过，需要注意的是：
-
虽然 Builder 支持脚本扩展和数据库集成，但其复杂性和灵活性相比传统从零写代码的网站会有所限制。如果你的网站非常复杂 (例如复杂交互、大量自定义逻辑、复杂权限体系等)，可能需要在 Builder 之外直接开发。
-
Builder 的文档尚不完善 (很多高级用法需要社区支持或自行摸索)，某些功能 (例如复杂数据绑定、动态表单、重复块 / Repeater 等) 实际使用时可能需要一些实验和调试。
总结
Frappe Builder 是一个兼顾 设计体验 与 开发效率 的现代低代码网页构建工具。对于希望快速上线、减少重复劳动、保持页面性能的人来说，它提供了一个非常便捷、高效的选项。
通过托管 (Frappe Cloud) 或自托管 (Docker / Bench) 都可以快速启动。从拖放页面、复用模板组件、集成数据库内容到一键发布，它覆盖了从设计到上线的大部分流程。如果你希望尝试用更少代码构建漂亮、响应式的网站，或希望在已有的 Frappe / ERPNext 生态中添加一个前端展示站点，那么 Frappe Builder 值得一试。
未来，随着社区的成熟和文档完善，它可能成为越来越多人首选的低代码建站工具。