如何在html电子邮件中放置动态内容的占位符？

Question

我有一个 fiddle（基本上是一个 html 电子邮件），我按照特定的设计复制了它。

在 html 邮件中，有一些动态内容我想在其中放置占位符，因为它会因不同的客户而变化。

我使用动态内容的小提琴中的 html 代码的 sn-ps 是：

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px; padding-right: 23%;">
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Radio</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
               width: 300px;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">Mike</td>
         </tr>
      </table>
   </td>
</tr>

问题陈述：

我想知道如何在上面使用动态内容的 html 代码中放置一个占位符，例如 $250.00、Radio、2、March 28/18 @ 7:00pm to March 30/18 @ 7:00pm

Answer 1

您可以采取的一种方法是使用template engine。使用此解决方案，您可以将要替换的每个项目替换为通用标签。在我包含的示例中，这个标签就是{{...}}。

完成此操作后，您将向模板引擎提供新创建的模板。然后，引擎将通过将每个标签替换为相关数据来处理您的模板。

/* It was a little hard to read with all of the inline CSS */

table {
  font-size: 20px;
  padding-right: 23%;
}

table tr td {
  padding-bottom: 3%;
}

table tr td:first-child {
  text-align: right;
}

table tr td:last-child {
  padding-left: 10%;
}

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>type:</td>
    <td>{{type}}</td>
  </tr>
  <tr>
    <td>estimated total:</td>
    <td>${{total}}</td>
  </tr>
  <tr>
    <td>what</td>
    <td>{{what}}</td>
  </tr>
  <tr>
    <td>how many</td>
    <td>{{count}}</td>
  </tr>
  <tr>
    <td>when:</td>
    <td style="word-wrap: break-word;
               width: 300px;">{{date_from}} to {{date_to}}</td>
  </tr>
  <tr>
    <td>who:</td>
    <td style="color:#FF8D58;">{{name}}</td>
  </tr>
</table>

那么，如果您要向模板提供以下数据...

let data = [
    {
        id: 123, // A "key" for the user to have a way to reference the data
        name: "Mike",
        type: "availability check request",
        total: 250.00,
        what: "Radio",
        count: 2,
        date_from: new Date(3-28-2018),
        date_to: new Date(3-30-2018)
    }
];

...与您提供的表格相似的表格将在处理模板后生成。

这显然是非常笼​​统的，不能适用于所有场景，但应该回答你的问题。随时更新您的帖子或评论，提供更多信息，我会尝试更新以匹配您的示例。

---

编辑：

为了在 Laravel Blade 中实现同样的功能，我们必须创建一个 [FILE NAME].blade.php 文件。这将是包含我们模板的文件。 Laravel 在their Templates page 上有很多与语法相关的文档。这应该是对之前模板的粗略翻译。

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>type:</td>
    <td>{{ $type }}</td>
  </tr>
  <tr>
    <td>estimated total:</td>
    <td>${{ $total }}</td>
  </tr>
  <tr>
    <td>what</td>
    <td>{{ $what }}</td>
  </tr>
  <tr>
    <td>how many</td>
    <td>{{ $count }}</td>
  </tr>
  <tr>
    <td>when:</td>
    <td style="word-wrap: break-word;
               width: 300px;">{{ date("F j/s @ g:ia", $dateFrom) }} to {{ date("F j/s @ g:ia", $dateTo) }}</td>
  </tr>
  <tr>
    <td>who:</td>
    <td style="color:#FF8D58;">{{ $name }}</td>
  </tr>
</table>

{{ date("F j/s @ g:ia", $date) }} 函数采用给定的时间戳并将其格式化为给定的格式。文档可以在here 找到，但很简单：

• F：3 月 28/18 @ 7:00pm
• j：3 月 28/18 @ 7:00pm
• s：3 月 28 日/18 @ 7:00pm
• g：2018 年 3 月 28 日@7:00pm
• 我：2018 年 3 月 28 日 @ 7:00pm
• 答：2018 年 3 月 28 日 @ 7:00pm