# 预览检查器

> 让 section 与 block 轮廓在 Shoplazza 主题编辑器预览检查器中正确显示的设计规范：不用负 margin、不用 padding 做间距、不留视觉隐藏元素。

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

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

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

## 避免使用负边距

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

![](https://cnres.appracle.com/ab9017dddca4d6308d8766cdac065273.png)

## 避免使用 padding 设置 block 间距

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

![](https://cnres.appracle.com/c6be97d445f1eaa3bff249ebaae85f43.png)

## 避免使用视觉隐藏元素

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

![](https://cnres.appracle.com/f9dd389176a75c161630a20f47eb6211.webp)

## Block 复制

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

您可以使用 [block.shoplaza\_attributes](/docs/theme/references/liquid/objects/blocks) 标识供主题编辑器使用的 block。例如：

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