按分类浏览
GrapesJS 网页
GrapesJS 网页插件覆盖搭建网页(而非邮件)所需的一切:整页模板、多版块布局,以及落地页、作品集与营销站点的起步方案。安装一个模板包,用户打开编辑器看到的就是一个可以继续改造的成品页面,而不是空白画布。浏览免费的社区包与付费库,每个都附带实时预览与版本兼容性说明。
关于 GrapesJS 网页
在 GrapesJS 中,一个网页就是画布上的一棵组件树,而本分类的插件正是把这棵树现成地交给你。它们分为两类。整页模板提供完整成品页面——带首屏、功能点、用户评价与行动号召的落地页,带图片网格与个人简介的作品集,或带吸顶导航的长页面营销站——用户打开后是在其基础上改造,而不是从零拼装。版块库则提供零件,页面通过按任意顺序堆叠预制版块来搭建;它与区块库有重叠,但粒度切在「页面版块」这一层。两者都不同于预设(预设配置的是编辑器本身),也不同于建站器(建站器管理的是多个页面)。安装前有三项实际检查。确认该包所需的 CSS 框架已加载进画布 iframe,因为画布不会继承你应用的样式表。确认模板按断点分别定义了样式,而不只有桌面端。并且提前决定:模板是以项目 JSON 存储(保持可编辑),还是以导出的 HTML 存储(不可再编辑)。
GrapesJS 网页 — 常见问题
- 页面模板和预设有什么区别?
- 预设配置的是编辑器——面板、区块、样式分区——并且把画布留空。页面模板不做任何配置,而是把画布填成一个成品页面。通常两者都要用:用预设把编辑器配置一次,再用模板为每个新页面提供起点。
- 如何把页面模板载入 GrapesJS?
- 如果是成品页面,用 editor.setComponents 和 editor.setStyle 把画布内容替换为模板的标记与 CSS。如果模板以项目 JSON 形式提供,则用 editor.loadProjectData 还原,组件模型会完整保留——这是更好的方式,因为所有内容都保持正常可编辑。
- GrapesJS 能做多页面网站吗?
- 可以——Pages API 可在一个项目中管理多个页面,editor.Pages.select 用于切换。本分类的插件作用范围是单个页面,一次填充一页。如果你需要把页面列表、路由与发布做成产品功能,请转向建站器分类。
- GrapesJS 页面模板是响应式的吗?
- 好的模板是,但这并非自动获得。只有在选中某个设备的状态下设置样式,GrapesJS 才会写入真实的媒体查询,因此只在桌面端搭建的模板不会带有移动端规则。安装前请在各断点下查看条目预览,并确认该包注明了针对哪些设备设计。
- 为什么模板在编辑器里看起来没有样式?
- 因为画布是一个 iframe,不会继承你应用的样式表。为 Tailwind 或 Bootstrap 编写的模板,在你通过编辑器的 canvas styles 选项把该框架加载进画布之前,都会渲染成纯 HTML。这是刚安装的包看起来「坏掉了」最常见的原因。
按标签浏览
Grapesjs 反应成分反应React UI反应堆葡萄网页构建器英雄反应组件移动葡萄顺风方块葡萄块建造工具自定义组件网格引导自力带Bootstrap4布局网格块英雄葡萄React UI GrapesjsReact preset Grapesjs反应堆预设葡萄Grapesjs React UIGrapesjs UIGrapesjs 的 React UI自定义方块网页 preset Grapesjs新预设葡萄JS西莱克斯用户体验FOSS进行中葡萄页网站建设者 Grapesjs插件自定义方块云状资产葡萄风格三次贝塞尔风格 BG 葡萄代码编辑器 Grapesjs邮件开发者 Grapesjsrte grapesjs嗨文件上传谷歌分析Google 标签管理器SVG 组件方法-绘制SVG 编辑器模板管理器页面管理器 Grapesjs存储export zip grapesjs发布网站新设计葡萄白色设计葡萄Grapesjs 预设Devfuture GrapesjsGrapesjs 插件预设插件Whitener 预设葡萄JS怀特纳预设怀特纳葡萄JS网页 Grapesjs预设葡萄