如何创建可在Design Tool中添加模块的邮件模板？

问题出在role="modules-container"的放置位置——直接加在<body>上会覆盖整个body关联的头部内容，加在<html>上则不被Design Tool识别。正确的做法是在<body>内部单独创建一个容器承载模块区域，同时保留页面原有header和footer内容。

以下是正确的代码结构：

<html>
<head>
  <!-- 此处head内容会被正常保留，不受模块编辑影响 -->
</head>
<body>
  <!-- 页面头部固定内容，不受模块容器干扰 -->
  <div class="email-header">
    <!-- content of header -->
  </div>

  <!-- 核心模块容器：仅包裹可编辑的模块区域，放在body内部 -->
  <div role="modules-container">
    <!-- 单个可拉入模块的独立区块 -->
    <div role="module">
      <div role="module-content">
        <!-- 此处为模块占位内容，拉入新模块时会被替换 -->
      </div>
    </div>

    <!-- 可添加多个独立module区域，每个都支持拉入模块 -->
    <div role="module">
      <div role="module-content">
      </div>
    </div>
  </div>

  <!-- 页面底部固定内容，不受模块容器干扰 -->
  <div class="email-footer">
    <!-- content of footer -->
  </div>
</body>
</html>

关键role作用说明 #

• role="modules-container"：作为模块编辑区域的父容器，必须放在<body>内部，仅包裹需要编辑的模块部分，不会影响页面其他固定内容
• role="module"：标记单个可独立替换、拉入模块的区块
• role="module-content"：模块的内容占位区，新拉入的模块内容会替换该标签内的内容

按照此结构设置后，Design Tool可正确识别模块拉入区域，同时完整保留<head>以及页面header、footer的内容。

内容的提问来源于stack exchange，提问作者David Loos