关于邮件模板的一些注意事项
之前用WordPress时,由于其生态系统非常完善,插件几乎无所不能,所以邮件这方面小问题都没有注意过。这次使用Typecho的邮件插件后,看到他的模板非常简单,所以萌生了根据之前WordPress的模板自己也写一套的想法,翻了几个大佬站点给我发的系统邮件,大概看了一下,貌似很简单啊,直接开写,然后...
发现问题
邮件模板都是HTML的,所以很简单,直接可以边预览边写,用的是平时常用的“Div模式”,刷刷刷就写完了。发个测试邮件,嗯,完美!...下班...回家。
到家后,在手机上的邮件客户端查看了几个邮件,然后顺便翻了翻今天发的测试邮件,然后我就懵逼了😨各种错位啊!
第二天到公司用电脑看了看,然后又搜索了一下,总结几个问题吧
- 邮件模板最好用
table
标签!兼容性好!(重要) - 样式使用
style=""
,不要用<style>
class
。 margin
最好别用,几乎不可用,padding
少用,尽量分开写(即padding: 0 5px;
最好写成padding-left: 5px;
padding-right: 5px;
)。- 由于↑上面的原因,所以空白地方最好用
<td style="font-size: 0px;height: 15px;color: #fff" colspan="Num"></td>
这种方式填充,注意font-size: 0px;
和color: #fff"
不要以为没用而删掉,有些邮箱服务器会在空白行填充一些你想不到的字😖。 - 每一行的样式尽量都要写出来(无视父级)
- 最后,再去熟悉一下
table
的写法规则,开始创作吧😂
以上几点如果能做到,基本上是没什么问题了,只不过实际操作起来会感觉很重复,很麻烦,没办法啊,兼容才是硬道理!
我的模板
最后送上我写的邮件模板(插件:CommentToMail)
由于我添加了几个参数,所以不是通用的,仅供参考!
访客邮件模板
<!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="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="background-color:#eee;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px">
<table style="background-color:#eee" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding:15px">
<center>
<table style="font-size:0px;background-color:#fff;border:solid 1px #d7d7d7" width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tbody>
<tr>
<td style="padding-left:30px;padding-right:30px">
<center>
<table style="font-size:0px;background-color:#fff" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<thead style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:0px;height:32px" align="left" valign="bottom">
<a href="{siteUrl}" style="height:32px" target="_blank">
<img style="height:32px" src="{logo}"/>
</a>
</td>
<td style="font-size:0px;height:32px" align="right" valign="bottom">
<a href="{siteUrl}" style="font-size:20px;color:#000;text-decoration:none" target="_blank">{siteTitle}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-bottom:solid 1px #d7d7d7" colspan="2"></td>
</tr>
</thead>
<tbody style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">您好,{author_p}</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">您在 {siteTitle}《{title}》的评论有了回复</td>
</tr>
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<center>
<table style="font-size:0px;background-color:#f7f7f7;border:solid 1px #d7d7d7;border-radius:3px" width="500" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
<tbody>
<tr>
<td style="padding-left:15px;padding-right:15px">
<center>
<table style="font-size:0px;background-color:#f7f7f7" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
<tbody>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">您的评论:</td>
</tr>
<tr>
<td style="font-size:0px;height:10px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#000;padding-left:10px;padding-right:10px" align="left">{text_p}</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-top:solid 1px #d7d7d7"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left"><span style="color:#000">{author}</span> 回复您:</td>
</tr>
<tr>
<td style="font-size:0px;height:10px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#000;padding-left:10px;padding-right:10px" align="left"><strong>{text}</strong></td>
</tr>
<tr>
<td style="font-size:0px;height:10px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">{time}</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">要查看原文,请打开下面的链接:</td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">
<a href="{permalink}" style="font-size:12px" target="_blank">{permalink}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
</tbody>
<tfoot style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-top:solid 1px #d7d7d7" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px;color:#999;max-width:538px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" align="left" colspan="2">
<img style="width:13px;height:13px;vertical-align:middle" src="{siteUrl}usr/plugins/CommentToMail/img/about.png"/> {siteTitle} - {description}
</td>
</tr>
<tr>
<td style="font-size:12px;color:#999" align="left" colspan="2">
<img style="width:13px;height:13px;vertical-align:middle" src="{siteUrl}usr/plugins/CommentToMail/img/remind.png"/> 请勿回复此邮件,如果有疑问,请联系
<a href="mailto:{contactme}" style="color:#999">{contactme}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
</tfoot>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
管理员邮件模板
<!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="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="background-color:#eee;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px">
<table style="background-color:#eee" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding:15px">
<center>
<table style="font-size:0px;background-color:#fff;border:solid 1px #d7d7d7" width="600" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tbody>
<tr>
<td style="padding-left:30px;padding-right:30px">
<center>
<table style="font-size:0px;background-color:#fff" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<thead style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:0px;height:32px" align="left" valign="bottom">
<a href="{siteUrl}" style="height:32px" target="_blank">
<img style="height:32px" src="{logo}"/>
</a>
</td>
<td style="font-size:0px;height:32px" align="right" valign="bottom">
<a href="{siteUrl}" style="font-size:20px;color:#000;text-decoration:none" target="_blank">{siteTitle}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-bottom:solid 1px #d7d7d7" colspan="2"></td>
</tr>
</thead>
<tbody style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">在《{title}》中有新的评论:</td>
</tr>
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<center>
<table style="font-size:0px;background-color:#f7f7f7;border:solid 1px #d7d7d7;border-radius:3px" width="500" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
<tbody>
<tr>
<td style="padding-left:15px;padding-right:15px">
<center>
<table style="font-size:0px;background-color:#f7f7f7" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#f7f7f7">
<tbody>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left"><span style="color:#000">{author}</span> 的评论:</td>
</tr>
<tr>
<td style="font-size:0px;height:10px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#000;padding-left:10px;padding-right:10px" align="left"><strong>{text}</strong></td>
</tr>
<tr>
<td style="font-size:0px;height:10px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">{time}</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-top:solid 1px #d7d7d7"></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">邮箱:<span style="color:#000">{mail}</span></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">URL:<a href="{url}" target="_blank">{url}</a></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">IP:<span style="color:#000">{ip}</span></td>
</tr>
<tr>
<td style="font-size:12px;color:#777" align="left">状态:<span style="color:#000">{status} [<a href="{manage}" target="_blank">管理评论</a>]</span></td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff"></td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>
<td style="font-size:0px;height:30px;color:#fff" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">要查看原文,请打开下面的链接:</td>
</tr>
<tr>
<td style="font-size:12px" align="left" colspan="2">
<a href="{permalink}" style="font-size:12px" target="_blank">{permalink}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
</tbody>
<tfoot style="font-size:0px;background-color:#fff" border="0" cellpadding="0" cellspacing="0" bgcolor="#fff">
<tr>
<td style="font-size:0px;height:15px;color:#fff;border-top:solid 1px #d7d7d7" colspan="2"></td>
</tr>
<tr>
<td style="font-size:12px;color:#999;max-width:538px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" align="left" colspan="2">
<img style="width:13px;height:13px;vertical-align:middle" src="{siteUrl}usr/plugins/CommentToMail/img/about.png"/> {siteTitle} - {description}
</td>
</tr>
<tr>
<td style="font-size:12px;color:#999" align="left" colspan="2">
<img style="width:13px;height:13px;vertical-align:middle" src="{siteUrl}usr/plugins/CommentToMail/img/remind.png"/> 请勿回复此邮件,如果有疑问,请联系
<a href="mailto:{contactme}" style="color:#999">{contactme}</a>
</td>
</tr>
<tr>
<td style="font-size:0px;height:15px;color:#fff" colspan="2"></td>
</tr>
</tfoot>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</body>
</html>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。