email - Mailchimp mc:repeatable & mc:variant 没有按预期工作
问题描述
我一直在尝试让我在 mailchimp 中的自定义电子邮件模板与他们的构建块一起使用。一直在做文档所说的，但我似乎无法让它工作。
我使用了mc:repeatable="content" & mc:variant="random name" 我唯一能做的就是添加一个块或删除一个块。我不能移动他们做另一个我想添加的选择女巫块的地方。
我将如何做到这一点，所以我可以选择我想添加到哪里的女巫块？
这是我一直在使用的代码。一些帮助会受到欢迎，现在试着把我的头绕在这个上面一段时间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="x-ua-compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>Mailchimp test</title>
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
<style type="text/css">
#outlook a{
padding:0;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
p{
margin:0;
padding:0;
font-size:0;
line-height:0;
}
table td{
border-collapse:collapse;
}
table{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
img{
display:block;
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}
a img{
border:none;
}
a{
text-decoration:none;
color:inherit;
}
a.phone{
text-decoration:none;
color:#000001 !important;
pointer-events:auto;
cursor:default;
}
span{
font-size:13px;
line-height:17px;
font-family:monospace;
color:#000001;
}
.show-mobile{
display:none !important;
}
.btn-gold a,.black-anchor a{
color:#000000 !important;
}
.btn-black a,.white-anchor a{
color:#ffffff !important;
}
img{
max-width:100%;
height:auto;
}
@media screen and (max-width: 583px){
.mobile-logo{
width:130px !important;
height:35px !important;
}
} @media screen and (max-width: 583px){
.mobile-sign{
width:39px !important;
height:40px !important;
}
} @media screen and (max-width: 583px){
.mobile-container-full{
width:92% !important;
}
} @media screen and (max-width: 583px){
.mobile-width-full{
width:100% !important;
}
} @media screen and (max-width: 583px){
.mobile-block-intro-text-padding{
height:30px !important;
}
} @media screen and (max-width: 583px){
.mobile-row{
width:100% !important;
display:block !important;
}
} @media screen and (max-width: 583px){
.show-mobile{
display:block !important;
}
} @media screen and (max-width: 583px){
.mobile-background-hide-mobile{
background:none !important;
}
} @media screen and (max-width: 583px){
.mobile-full-img img{
width:100% !important;
height:auto !important;
max-width:100% !important;
}
}</style></head>
<body style="width:100%; margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<!--*|IF:MC_PREVIEW_TEXT|*-->
<!--[if !gte mso 9]><!--><span class="mcnPreviewText" style="display:none; font-size:0px; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; visibility:hidden; mso-hide:all;">*|MC_PREVIEW_TEXT|*</span>
<!--<![endif]-->
<!--*|END:IF|*-->
<!-- page wrapper -->
<table cellpadding="0" cellspacing="0" border="0" style="margin:0;padding:0;width:100%;line-height:100% !important;">
<tr>
<td valign="top">
<!-- content wrapper -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="584" class="mobile-container-full">
<!-- Building blocks -->
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<!-- block intro text -->
<tr mc:repeatable="content" mc:variant="intro text - white background">
<td valign="top" align="left" bgcolor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile-width-full">
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:16px;line-height:20px;color:#C89619;text-transform:uppercase;" mc:edit="intro_text_title">Lorep Ipsum 1</span>
</td>
</tr>
<tr>
<td valign="top" align="center" height="16" style="height:16px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#000000;" mc:edit="intro_text_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</td>
</tr>
<tr>
<td valign="top" align="left" height="20" style="height:20px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td align="left">
<!-- button -->
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#C89619" class="mobile-width-full btn-gold">
<tr>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="middle" align="center">
<strong class="black-anchor" style="font-family:Arial, sans-serif;font-size:12px;color:#000000 !important;font-weight:bold;text-decoration:none;" mc:edit="intro_text_link">
Read more
</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<!-- end block intro text -->
<!-- block intro text -->
<tr mc:repeatable="content" mc:variant="intro text - black background">
<td valign="top" align="left" bgcolor="#000000">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile-width-full">
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="left">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:16px;line-height:20px;color:#C89619;text-transform:uppercase;" mc:edit="intro_text_black_title">Lorem Ipsum 2</span>
</td>
</tr>
<tr>
<td valign="top" align="center" height="16" style="height:16px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td valign="top" align="center">
<span style="font-family:Arial, sans-serif;font-size:12px;line-height:20px;color:#ffffff;" mc:edit="intro_text_black_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</td>
</tr>
<tr>
<td valign="top" align="left" height="20" style="height:20px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td align="left">
<!-- button -->
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#C89619" class="mobile-width-full btn-gold">
<tr>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center">
<strong class="black-anchor" style="font-family:Arial, sans-serif;font-size:12px;color:#000000 !important;font-weight:bold;text-decoration:none;" mc:edit="intro_text_black_link">Read more</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="12" style="height:12px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
<td align="left" valign="top" width="15" style="width:15px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
</td>
<td align="left" valign="top" width="30" style="width:30px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" height="45" class="mobile-block-intro-text-padding" style="height:45px;font-size:1px;line-height:1px;"></td>
</tr>
</table>
</td>
</tr>
<!-- end block intro text -->
</table>
</td>
</tr>
<!-- / Building blocks -->
</table>
<!-- / content wrapper -->
</td>
</tr>
</table>
<!-- / page wrapper -->
</body>
</html>
解决方案
Mailchimp 文档说“自定义编码的电子邮件模板不包括拖放内容块。使用 Mailchimp 的模板语言将可编辑区域添加到自定义编码的电子邮件中。” （https://mailchimp.com/help/about-content-blocks/）
因此，您的体验似乎符合预期：“我唯一能做的就是添加或删除一个块。我无法将它们移动到另一个地方......”
模板语言表明了这一点，mc:repeatable并且mc:variant可以一起使用来打开和关闭“变体”——就像你已经做过和体验过的那样。( https://templates.mailchimp.com/getting-started/template-language/ )
总之，您的期望是不正确的，您可以随意移动积木。该行为仅适用于 MailChimp 的模板。
推荐阅读
- java - Junit抛出java.lang.Exception：即使有公共@test也没有可运行的方法
- django - 如何在django中计算对象
- python - 从 pandas.Series 过滤 pandas.DataFrame
- ios - 如何跨 Swift 模块进行调试？
- node.js - 我在安装应用程序后创建了 Shopify 应用程序我想以电子邮件和商店 URL 作为参数将用户带到我的网站
- apache - 如何使用 pgadmin4 和 apache 解决内部服务器错误？
- testing - 我如何将 Jmeter 用作普通浏览器？
- angular - 使用 @angular/elements 为每个组件生成不同的 js 包
- html - 徽标 CSS 导航栏不断爆炸
- python - 安装 Tensorflow 时出现有关 Python 的错误