创建 Mandrill html 模板
Posted
技术标签:
【中文标题】创建 Mandrill html 模板【英文标题】：Create Mandrill html template 【发布时间】：2014-10-20 02:19:13 【问题描述】：我一直在尝试为 Mandrill 创建一个 html 模板，但我对如何创建动态内容一无所知。我想通过 Mandrill 发送 Wordpress 和 Woocommerce 电子邮件，但首先需要能够创建一个有效的 html 模板。
谁能帮助或给我一个 Mandrill html 模板的工作示例？
【问题讨论】：
您可能应该查看 Mandrill 文档，尤其是关于模板的部分。 mandrillapp.com/api/docs/templates.JSON.html 【参考方案1】：Mandrill 文档，甚至是关于模板的部分，都不是特别有用，因为它们假定您知道如何编写模板代码。
制作模板的最简单方法（尤其是如果您不知道自己在做什么）是注册 Mailchimp（免费）。使用拖放模板编辑器制作所需的模板，然后复制代码并将其粘贴到 Mandrill 模板编辑器中。或者连接您的 Mandrill 和 Mailchimp 帐户，让 Mandrill 为您复制模板。
无论如何，这是一个非常基本的示例模板：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|SUBJECT|*">
<title>*|SUBJECT|*</title>
<style type="text/css">
#outlook a
padding:0;
body
width:100% !important;
.ReadMsgBody
width:100%;
.ExternalClass
width:100%;
body
-webkit-text-size-adjust:none;
body
margin:0;
padding:0;
img
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
table td
border-collapse:collapse;
#backgroundTable
height:100% !important;
margin:0;
padding:0;
width:100% !important;
/*
@tab Page
@section background color
@tip Set the background color for your email. You may want to choose one that matches your company's branding.
@theme page
*/
body,#backgroundTable
/*@editable*/background-color:#ffffff;
/*
@tab Page
@section email border
@tip Set the border for your email.
*/
#templateContainer
/*@editable*/border:1px solid #f6f6f6;
/*
@tab Page
@section heading 1
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings.
@style heading 1
*/
h1,.h1
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
/*
@tab Page
@section heading 2
@tip Set the styling for all second-level headings in your emails.
@style heading 2
*/
h2,.h2
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:30px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
/*
@tab Page
@section heading 3
@tip Set the styling for all third-level headings in your emails.
@style heading 3
*/
h3,.h3
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
/*
@tab Page
@section heading 4
@tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
@style heading 4
*/
h4,.h4
/*@editable*/color:#202020;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:22px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
/*@editable*/text-align:left;
/*
@tab Header
@section preheader style
@tip Set the background color for your email's preheader area.
@theme page
*/
#templatePreheader
/*@editable*/background-color:#FAFAFA;
/*
@tab Header
@section preheader text
@tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent div
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:10px;
/*@editable*/line-height:100%;
/*@editable*/text-align:left;
/*
@tab Header
@section preheader link
@tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
/*
@tab Header
@section header style
@tip Set the background color and border for your email's header area.
@theme header
*/
#templateHeader
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-bottom:0;
/*
@tab Header
@section header text
@tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/
.headerContent
/*@editable*/color:#202020;
/*@editable*/font-family:Arial;
/*@editable*/font-size:34px;
/*@editable*/font-weight:bold;
/*@editable*/line-height:100%;
/*@editable*/padding:0;
/*@editable*/text-align:center;
/*@editable*/vertical-align:middle;
/*
@tab Header
@section header link
@tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
*/
.headerContent a:link,.headerContent a:visited,.headerContent a .yshortcuts
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
#headerImage
height:auto;
max-width:600px !important;
/*
@tab Body
@section body style
@tip Set the background color for your email's body area.
*/
#templateContainer,.bodyContent
/*@editable*/background-color:#FFFFFF;
/*
@tab Body
@section body text
@tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
@theme main
*/
.bodyContent div
/*@editable*/color:#505050;
/*@editable*/font-family:Arial;
/*@editable*/font-size:14px;
/*@editable*/line-height:150%;
/*@editable*/text-align:left;
/*
@tab Body
@section body link
@tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
*/
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
.bodyContent img
display:inline;
height:auto;
/*
@tab Footer
@section footer style
@tip Set the background color and top border for your email's footer area.
@theme footer
*/
#templateFooter
/*@editable*/background-color:#FFFFFF;
/*@editable*/border-top:0;
/*
@tab Footer
@section footer text
@tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
@theme footer
*/
.footerContent div
/*@editable*/color:#707070;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:125%;
/*@editable*/text-align:left;
/*
@tab Footer
@section footer link
@tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts
/*@editable*/color:#336699;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
.footerContent img
display:inline;
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
@theme footer
*/
#social
/*@editable*/background-color:#FAFAFA;
/*@editable*/border:0;
/*
@tab Footer
@section social bar style
@tip Set the background color and border for your email's footer social bar.
*/
#social div
/*@editable*/text-align:center;
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
@theme footer
*/
#utility
/*@editable*/background-color:#FFFFFF;
/*@editable*/border:0;
/*
@tab Footer
@section utility bar style
@tip Set the background color and border for your email's footer utility bar.
*/
#utility div
/*@editable*/text-align:center;
#monkeyRewards img
max-width:190px;
</style></head>
<body leftmargin="0" margin topmargin="0" margin offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" >
<tr>
<td valign="top">
<div mc:edit="std_preheader_content">Preheader content</div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" >
<div mc:edit="std_preheader_links">
Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" id="templateBody">
<tr>
<td valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" >
<tr>
<td valign="top">
<div mc:edit="std_content00">Hi *|FNAME|*<strong>,</strong><br>
<br>
Content goes here<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" style="width: 370px;" >
<tbody>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Login ID:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|LOGINID|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Password:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|PASSWORD|*</td>
</tr>
<tr>
<td nowrap="nowrap" style="width: 152px; height: 20px;">Account number:</td>
<td nowrap="nowrap" style="width: 217px; height: 20px;"> *|ACCNUM|*</td>
</tr>
</tbody>
</table>
<br>
<br>
Kind regards,<br>
<br>
<strong></strong></div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" id="templateFooter">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" >
<tr>
<td valign="top" >
<div mc:edit="std_footer">
<em>Footer Content</em>
<br>
</div>
</td>
<td valign="top" id="monkeyRewards">
<div mc:edit="monkeyrewards">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility">
<div mc:edit="std_utility">
<a href="*|UNSUB|*">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
以*| 开头并以|* 结尾的位是合并标签。 See the Mandrill help page for assistance with them
【讨论】：
以上是关于创建 Mandrill html 模板的主要内容，如果未能解决你的问题，请参考以下文章