代码之家  ›  专栏  ›  技术社区  ›  flash

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

  •  1
  • flash  · 技术社区  · 7 年前

    我有一个 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%;">$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

    1 回复  |  直到 7 年前
        1
  •  1
  •   Chase Ingebritson    7 年前

    你可以走的一条路是 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)
        }
    ];
    

    …与您提供的表类似的表将在处理模板后生成。

    这显然是非常笼统的,不能适用于所有场景,但应该回答您的问题。请随时更新您的文章,或评论,与更多的信息,我会尝试更新,以符合您的例子。


    编辑:

    为了达到同样的效果,我们必须创造一个 [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: 三月 28/18@下午7:00
    • J:三月 28个 /晚上7点18分
    • 学生:3月28日/ 18岁 @下午7:00
    • G:2018年3月28日@ 7个 下午点
    • I:3月28日/18@7: 00个 下午
    • A:3月28日/18@7:00 下午