之前用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>
文章目录