Question

我有一个fiddle（基本上是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>

问题陈述：

我想知道如何在上面使用动态内容（例如$250.00，Radio，2，March 28/18 @ 7:00pm to March 30/18 @ 7:00pm

Answer 1

您可以采取的一种方法是使用template engine。使用此解决方案，您将要用通用标签替换要替换的每个项目。在我包括的示例中，此标记仅为var img = new SimpleImage("rodger.png") print(img) function swapRedGreen(pixel){ x = pixel.getRed(); pixel.setRed(pixel.getGreen()); pixel.setGreen(x); } for (var pix of img.values()){ swapRedGreen(pix) } print(img)。

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

$("input[type='number']").val('');

{{...}}

然后，如果要向模板提供以下数据...

/* 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%;
}

...处理完模板后，将产生与您提供的表类似的表。

这显然是非常笼统的，不能应用于每种情况，但是应该回答您的问题。随时用更多信息更新您的帖子或评论，我将尝试更新以匹配您的示例。

编辑：

为了使用Laravel Blade实现相同的功能，我们将必须创建一个<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>文件。这将是包含我们模板的文件。 Laravel有很多有关their Templates page上语法的文档。这应该是先前模板的粗略翻译。

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)
    }
];

[FILE NAME].blade.php函数采用给定的时间戳并将其格式化为给定的格式。可以here找到该文档，但很简单：

F： 3月 28/18 @ 7:00 pm
j：3月 28 / 18 @ 7:00 pm
s：3月28日/ 18 @ 7:00 pm
g：3月28/18 @ 7 ：00pm
i：3月28/18 @ 7： 00 下午
a：3月28/18 @ 7:00 下午

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

1 个答案:

编辑：