SendGrid动态模板数组渲染问题：元素调用与分栏展示

1. 数组元素无法渲染的问题 #

你的代码<li>{{ companies.[1]}}</li>无法渲染数组元素，核心是语法细节问题，解决方法如下：

• 修正语法空格：变量名与索引表达式之间的多余空格会导致模板解析错误，改为<li>{{companies.[1]}}</li>
• 使用更兼容的lookup helper：Handlebars的lookup方法专门用于按索引访问数组元素，兼容性更强，写法为<li>{{lookup companies 1}}</li>
• 清理元素空格：如果数组元素带前导/尾随空格（比如你的" company2"），可以用trim helper去除：<li>{{trim (lookup companies 1)}}</li>

2. Gmail中Flexbox布局失效的问题 #

Gmail对Flexbox的支持极差，邮件模板的通用解决方案是改用HTML表格布局，这是所有邮件客户端都能稳定支持的方式。

固定长度数组的两列布局代码 #

<table width="100%" border="0" cellpadding="8" cellspacing="0">
  <tr>
    <!-- 左列：前2个公司 -->
    <td width="50%" valign="top">
      <ul style="margin:0; padding-left:20px;">
        <li>{{companies.[0]}}</li>
        <li>{{companies.[1]}}</li>
      </ul>
    </td>
    <!-- 右列：后2个公司 -->
    <td width="50%" valign="top">
      <ul style="margin:0; padding-left:20px;">
        <li>{{companies.[2]}}</li>
        <li>{{companies.[3]}}</li>
      </ul>
    </td>
  </tr>
</table>

动态数组的两列布局（适配任意长度数组） #

如果数组元素数量可能变化，用Handlebars的each结合@index判断元素归属：

<table width="100%" border="0" cellpadding="8" cellspacing="0">
  <tr>
    <td width="50%" valign="top">
      <ul style="margin:0; padding-left:20px;">
        {{#each companies}}
          {{#if @index.lt 2}}
            <li>{{trim this}}</li>
          {{/if}}
        {{/each}}
      </ul>
    </td>
    <td width="50%" valign="top">
      <ul style="margin:0; padding-left:20px;">
        {{#each companies}}
          {{#if @index.gte 2}}
            <li>{{trim this}}</li>
          {{/if}}
        {{/each}}
      </ul>
    </td>
  </tr>
</table>

注意：邮件模板中尽量使用内联CSS，避免依赖外部样式或头部<style>标签，Gmail会过滤大部分非内联样式。

内容的提问来源于stack exchange，提问作者Becki Ari