sendgrid如何渲染数组项动态模板

Question

如何渲染数组项：

如何呈现 1 列中的前 2 个数组项和下一列中的后 2 个数组项

2期：

1.如何渲染数组项：

数据：

companies: ["company1", " company2", "company3", "company 4"]

html:

<li>{{ companies.[1]}}

不工作。

2.如何在 1 列中呈现前 2 个数组项，在下一列中呈现下 2 个数组项

companies: ["company1", " company2", "company3", "company 4"]

flexBox 不适用于 gmail 客户端:(

Answer 1

要在 SendGrid 动态模板中呈现数组项，您可以使用 {{index}} 运算符通过其索引访问数组元素。例如，要渲染公司数组中的第二家公司，您可以使用：

{{index companies 1}}

这将输出“company2”。请注意，数组索引是从零开始的，因此第一个元素的索引为 0，第二个元素的索引为 1，依此类推。

要在一列中呈现前两个数组项，在下一列中呈现接下来的两个，您可以使用 SendGrid 的 flexBox 布局选项。这是一个示例代码片段，显示了如何执行此操作：

<div style="display:flex; flex-wrap:wrap;">
  <div style="flex-basis:50%;">
    {{index companies 0}}<br>
     {{index companies 1}}
   </div>
   <div style="flex-basis:50%;">
     {{index companies 2}}<br>
     {{index companies 3}}
   </div>
</div>

此代码使用 flex-wrap: wrap 属性在屏幕宽度太窄无法并排显示时将两列换行到单独的行中。 flex-basis:50% 属性将每列设置为可用宽度的 50%，以便它们在更宽的屏幕上并排显示。

为确保此布局在 Gmail 客户端中正常工作，您可能还需要添加特定于供应商的 CSS 前缀并使用表格或表格单元格显示属性，因为这些在某些电子邮件客户端中得到更好的支持。这是一个使用表格显示属性的示例：

<table width="100%">
  <tr>
    <td width="50%" style="display:table-cell;vertical-align:top;">
      {{index companies 0}}<br>
      {{index companies 1}}
   </td>
   <td width="50%" style="display:table-cell;vertical-align:top;">
      {{index companies 2}}<br>
      {{index companies 3}}
    </td>
  </tr>
</table>

此代码使用表格布局确保两列在 Gmail 客户端中并排显示，并使用 display:table-cell 属性确保列正确对齐。