按分类浏览
GrapesJS 方块
GrapesJS 区块库为编辑器提供开箱即用、可拖拽的 HTML 页面区块。无需从零编写页头、卡片、首屏或页脚——安装一个区块包,即可把预制且完全可定制的区块放到画布上。浏览社区贡献的合集与付费库——每个条目都附带实时预览,安装前就能确切看到将加入项目的内容。
关于 GrapesJS 方块
GrapesJS 区块是用户拖到画布上以搭建页面的基本单元。一个区块可以小到单张图片元素,也可以是包含嵌套组件、样式与交互的复杂多列版块。GJS.Market 上的区块库插件跨度很大——从极简包(几个用于页头与文本的干净实用区块),到包含 50 多种版块类型的完整设计体系,涵盖首屏横幅、功能网格、评价轮播、价格表、FAQ 手风琴与联系表单。付费区块库通常还提供深色模式变体、响应式断点预览,以及在 GrapesJS 区块面板内的分类归组。社区区块包往往聚焦某种特定设计语言或框架,例如 Tailwind、Bootstrap 或 Bulma,并且免费提供。评估区块库时,请注意 GrapesJS 版本与框架筛选项——为 Bootstrap 4 编写的区块,若画布预览未加载对应 CSS,将无法正确渲染。GJS.Market 上所有付费区块库都为包内每个区块提供实时预览。
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 等特定设计语言的社区包也不收费。使用价格筛选即可只看免费条目。付费库通常提供多得多的版块类型、深色模式变体、响应式预览,以及每个区块的实时预览。
按标签浏览
占位符2.0 GrapesjsGrapesjs 发票插件顺风方块通讯响应式葡萄邮件开发者 GrapesjsGrapesjs 插件拖拽式Grapesjs 反应成分反应React UI反应堆葡萄网页构建器移动葡萄葡萄块建造工具自定义组件农夫格拉佩斯组件 bootstrap5用户封锁自定义方块自力带网格引导Bootstrap5 grapesjs滑行葡萄洛里·斯莱德·格雷佩斯布局网格块插件自定义方块Grapesjs 基本块所有页面的单页注脚 葡萄超级标题 Grapesjs英雄葡萄CSS 网格网格网页设计图层管理器图标字体资产网站建设者 GrapesjsTwitchCalendly模板管理器模板插件 Grapesjs洛里·格拉佩斯Tabs Grapesjs自定义代码插件 Grapesjs提示插件 Grapesjs倒计时葡萄葡萄基本Forms 插件 GrapesjsNavbar Grapesjs葡萄菜单