OFFODD关于邮件模板的一些注意事项
之前用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 国际许可协议 进行许可。