如何在 Kentico 电子邮件模板中用一行包装每三个 table 单元格？

Question

如何使用 Kentico 电子邮件模板将每 3 次 <td> 包装成 <tr>？

我在 jQuery 中编写了以下代码，但不知道如何在 Kentico 中编写此循环逻辑。

var td = $("#myTable tr td");           // Getting all td
td.each(function(i) {                   // Looping the td
  if (i % 3 == 0) {                     // Splitting td as multiple of 3
    td.slice(i, i + 3).wrapAll('<tr/>') // Wrapping it inside tr
  }
}).parent('tr').unwrap();

我想要使用 Kentico 的相同逻辑。

Answer 1

您是否尝试将 JS 替换为可用于电子邮件模板或电子邮件小部件的 Kentico 宏？

如果是这样，并且您有 Kentico 11+，那么您可以转到电子邮件营销应用程序 > 电子邮件小部件并打开 "Latest Article" 示例小部件并查看逻辑是如何工作的。

这是示例小部件HTML/macro

{% /*
The Latest articles email widget dynamically obtains four latest articles from the Dancing Goat demo site at the time when the email issue is generated.
It achieves so by using macros that access pages with the given attributes.
*/ @%}

{% 
  articles = Documents["/Articles"]
               .CultureVersions["en-US"]
               .Children
                 .ClassNames("dancinggoat.article")
                 .OrderBy("DocumentPublishFrom DESC")
                 .TopN(4)
                 .WithAllData; 
return; 
#%}

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">

{%
  i = 0;
  isFirstItemInRow = false;
  foreach (article in articles) { 
%}

{% 
    isFirstItemInRow = (Modulo(i, 2) == 0);
    articleUrl = UTMContent == String.Empty ? article.RelativeURL : article.RelativeURL + "?utm_content=" + UTMContent;
    articleTeaserUrl = GetAttachmentUrlByGUID(article.ArticleTeaser, "teaser", "teaser");
    articleLinkText = LinkText == String.Empty ? "Continue reading" : LinkText;
    return; 
%}

{%  if (isFirstItemInRow)  { %}
  <tr>
    <td align="center" valign="top" style="font-size:0; padding: 10px 0 15px 0" class="padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<![endif]-->
{% } /* END if */ #%}

<!--[if (gte mso 9)|(IE)]>
<td align="left" valign="top" width="240">
<![endif]-->
      <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;" class="wrapper">
        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="{% isFirstItemInRow ? "max-width:240px;" : "max-width:240px; float:right;" %}" class="wrapper">
          <tr>
            <td align="center" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td style="padding: 20px 0 30px 0;">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                      <tr>
                        <td align="center" valign="middle"><a href="{% articleUrl #%}" target="_blank"><img src="{% articleTeaserUrl #%}" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></a></td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;">{% article.ArticleTitle #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;">{% article.ArticleSummary #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"><a href="{% articleUrl #%}" target="_blank" style="color: #256F9C; text-decoration: none;">{% articleLinkText #%} &rarr;</a></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>
      </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->

{%  if (isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
<td width="20" style="font-size: 1px;">&nbsp;</td>
<![endif]-->
{% } /* END if */ #%}      


{%  if (!isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
</tr>
</table>
<![endif]-->                                    
</td>
</tr>
{% } /* END if */ #%} 

{% i++; return; %} 
{% } /* END foreach */ #%} 

</table>

如何在 Kentico 电子邮件模板中用一行包装每三个 table 单元格？

How to wrap every third table cell with a row within Kentico for email template?

javascript

kentico

email-templates