时间戳

首页 > 解决方案 > 如何在html电子邮件中放置动态内容的占位符？

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

问题描述

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

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

我使用动态内容的小提琴中的 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%;">$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

标签： htmlcsslaravelhtml-emaillaravel-blade

解决方案

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

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

/* 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 在其模板页面上有很多与语法相关的文档。这应该是对之前模板的粗略翻译。

<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) }}函数采用给定的时间戳并将其格式化为给定的格式。文档可以在这里找到，但很简单：

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

推荐阅读