GrapesJS 方块

GrapesJS 方块 — 常见问题

什么是 GrapesJS 区块？

区块是编辑器区块面板中的一个条目，拖到画布上时会插入一段内容。它由标签名、预览缩略图和内容本身（HTML 或组件定义）构成。区块是终端用户向页面添加版块的方式，也是区块库中可见的那一半。

如何向 GrapesJS 添加自定义区块？

使用 BlockManager API 添加区块，指定 id、label、category 和内容。内容可以是 HTML 字符串或组件对象，推荐后者，因为它在编辑过程中更稳定。把一组 add 调用包进插件，就变成可跨项目安装的可复用区块包。

GrapesJS 区块需要 Tailwind 或 Bootstrap 吗？

只有当区块包本身基于它们时才需要。区块携带带类名的标记，因此 Tailwind 包在画布 iframe 未加载 Tailwind CSS 时会渲染成无样式 HTML——画布不会自动继承你应用的样式表。通过编辑器的 canvas styles 选项引入框架，并在安装前查看本页的框架筛选项。

可以给区块分类吗？

可以。每个区块都声明一个 category，GrapesJS 会据此在面板中分组并提供可折叠的分组标题。优秀的库开箱就带有合理分类——首屏、功能、价格、页脚——当区块数量超过几十个时这一点尤为重要。你也可以在注册时覆盖 category，把第三方包并入自己的分组体系。

有免费的 GrapesJS 区块库吗？

有。grapesjs-blocks-basic 是官方且免费的，许多面向 Tailwind、Bootstrap 或 Bulma 等特定设计语言的社区包也不收费。使用价格筛选即可只看免费条目。付费库通常提供多得多的版块类型、深色模式变体、响应式预览，以及每个区块的实时预览。