跳到主要内容

预览检查器

预览检查器允许您直接在预览界面中浏览 section 和 block，使查找对应设置更加直观便捷。

预览检查器会在 section 和 block 周围绘制轮廓线以区分它们。然而，预览检查器依赖浏览器的 Element.getBoundingClientRect() 方法返回的坐标来绘制这些轮廓线，这可能会凸显 theme 基础结构中通常不可见的某些方面。

请参考以下设计规范，确保 section 或 block 的轮廓线在预览检查器中正确显示：

避免使用负边距​

您应避免使用负边距在 section 内部定位 block，否则 block 可能会显示在 section 轮廓线之外。

避免使用 padding 设置 block 间距​

要在 block 之间添加间距，应使用 margin 或 gap，而非 padding。如果使用 padding，block 的轮廓线可能无法按预期显示。

避免使用视觉隐藏元素​

要隐藏某个元素，应将其从 DOM 中移除或使用 display: none，而非采用视觉隐藏方式。视觉隐藏元素可能导致出现无法交互的元素轮廓线。

Block 复制​

如果需要复制某个 block，应确保您希望主题编辑器识别的元素是唯一包含 data-shoplaza-editor-block 属性的元素。主题编辑器依赖 data-shoplaza-editor-block 属性来识别 block，因此复制该属性可能导致识别冲突。

您可以使用 block.shoplaza_attributes 标识供主题编辑器使用的 block。例如：

{% for block in section.blocks %}
  <div {{ block.shoplaza_attributes }}>
    <!-- block 内容 -->
  </div>
{% endfor %}