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

Question

我有一封 fiddle（基本上是一封 html 电子邮件），我已按照特定设计对其进行了复制。

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

我使用动态内容的 fiddle 中的 html 代码片段是：

<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%;">0.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>

问题陈述：

我想知道如何在我使用 0.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)
    }
];

... table 与您提供的模板处理后的结果类似。

这显然很笼统，不能适用于所有场景，但应该可以回答您的问题。请随时使用更多信息更新您的 post 或发表评论，我会尝试更新以匹配您的示例。

编辑：

为了实现与 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，但只需：

男：三月 28/18 @ 7:00pm
j: 三月 28/18 @ 7:00pm
s：3 月 28 日/18@7:00pm
g：2018 年 3 月 28 日@7:00pm
我：3 月 28/18 @ 7:00下午
a：2018 年 3 月 28 日@7:00下午

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

How to put placeholders for dynamic contents in html email?

html

css

html-email

laravel

laravel-blade

编辑：