05 首页配置(可视化首页编辑器)

路径:主题设置 → 首页配置 → 打开首页编辑器,或直接访问 /builder/

首页编辑器用于可视化搭建首页:从左侧组件库添加模块,在中间画布预览效果,并在右侧检查器调整内容、样式、布局和交互。模块编辑采用“草稿 → 发布”流程,发布后前台用户才会看到变化。

1. 工作台结构

  • 左侧:组件库,支持搜索、分类筛选、点击添加和拖拽添加。
  • 中间:首页画布,支持桌面、平板、手机预览尺寸切换。
  • 右侧:检查器,包含组件设置、页面工具和外观设置。

2. 添加与编辑模块

  1. 在左侧组件库搜索或浏览组件。
  2. 点击组件,或将组件拖到画布中的目标位置。
  3. 选中画布里的模块后,在右侧检查器编辑内容、样式、间距、边框和点击事件。
  4. 组件属性会实时更新画布;涉及服务端渲染的模块会稍后刷新预览。

提示:组件类型和字段由主题内置定义,不同版本可能会有增减。

3. 排序、复制、删除与启用

  • 排序:拖拽模块,或选中模块后使用上移/下移按钮。
  • 复制:选中模块后点击复制按钮。
  • 删除:删除前会弹出确认;误删后可以使用撤销恢复。
  • 启用:右侧检查器顶部的显示开关控制模块是否在首页渲染。

4. 草稿、自动保存、预览与发布

  • 保存草稿:保存编辑器草稿,不会替换正式首页。
  • 自动保存:编辑后会低频自动保存草稿;浏览器里也会保留一份本地恢复数据,异常退出后可选择恢复。
  • 预览:在编辑器中生成当前草稿预览。
  • 发布:将当前草稿发布到正式首页,前台用户才会看到变化。
  • 若多个管理员同时编辑,发布时会检查首页版本;如果别人已经发布过,可先导出当前配置备份,再刷新编辑器继续。

5. 导入、导出与外观设置

  • 导出配置:下载当前模块与外观配置 JSON,可用于备份或迁移。
  • 导入配置:导入 JSON 会替换当前编辑中的模块;若当前有未保存草稿,编辑器会先确认。
  • 外观设置:Logo、导航、主题切换等属于全站外观配置,会在停止操作后自动保存,不需要随首页模块一起发布。

6. 快捷键

  • Ctrl/Cmd + S:保存草稿。
  • Ctrl/Cmd + Enter:发布。
  • Ctrl/Cmd + Z:撤销。
  • Ctrl/Cmd + Shift + ZCtrl/Cmd + Y:重做。
  • Alt + ↑ / ↓:移动当前选中模块。
  • Delete:删除当前选中模块。
  • Esc:退出预览或关闭打开的下拉菜单。

7. 常见注意事项

  • 如果发布后前台不变:优先清理缓存(站点缓存/CDN 缓存/浏览器缓存),并确认首页未被静态化。
  • 若你使用了页面缓存插件,请将首页加入“更新时自动清理”的规则。
  • 自定义 HTML 模块请只放可信代码;管理员无 unfiltered_html 权限时会进行内容过滤。