邮件书写探讨
作者:互联网
邮件书写探讨
经常碰到要写邮件模板,但是在实际开发中,不断碰壁。新的h5属性标签样式都不能使用。而且还不得不使用很老的 table
标签,而这就很痛苦,为了实现一些基本的内容,都有写够呛。因而前前后后看了许多关于这块的资料,终于有点像样的东西出来。
邮件书写的一些要求
- Doctype
<!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" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>
-
尽可能使用 table 标签来处理
-
HTML邮件开发的黄金规则就是:如果有属性,就用HTML不用CSS。
-
使用16进制颜色代码,因为如果只是3位的简写有时候会不工作。
<td style="color: #ffffff;">...</td>
-
padding: 10px 10px 8px 5px;,但是如果你发现它有任何的问题,你可能需要使用最长的一种方式把完整的表达式写出来,例如: padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;。
<td style="padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;">...</td>
-
padding用在td标签上但不要用在p或者div上会更安全
-
margin不被支持,可以使用
<td style="font-size: 0; line-height: 0;" width="20"> </td>
这样的方式来进行替代 -
img 需要添加
- border="0"
- display:block
- 需要设置好宽高
- 需要设置 alt 属性
<img width="100px" height="100px" border="0" alt="我是图片" src="..." />
email 框架
由于在上面的要求下,还是无法达到有效的样式。而且写一个邮件得不断地进行微调,很不方便。因而找了一写框架来辅助开发,这里着重介绍mjml
,没办法,谁叫人家的start最多呢。使用过程中,感觉不错。现在的开发都趋向于组件化,这样也符合现在开发的趋势。
一个简单的demo
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-carousel>
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />
<mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />
</mj-carousel>
</mj-column>
</mj-section>
</mj-body>
</mjml>
上面是一个类似tab切换的。说实话,这种效果,最初我以为直接是见光死的,感觉email都不会支持的。没想过有一些还算支持,意料中的意外吧。
效果图
虽然我在这里上了一个不是很好地案例,但是也从这里看到,这个得强大,写过邮件模板的内心都很清楚,连一些没有特效的静态页面兼容性都不理想,何况这种呢。而且还是响应式的,这个就更没话说了。同时也告诫自己,还是使用一些基本的效果,尽量不使用带一些特效的,这样可以避开一些兼容性。
在这个测试过程中,发现单纯打开浏览器复发送不显示了,因而又简单地研究了下 node如何发送邮件
nodemailer
在这里使用了qq邮箱作为发送
code
"use strict";
const nodemailer = require("nodemailer");
const smtpTransport = require('nodemailer-smtp-transport');
const fs = require('fs')
async function main() {
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport(smtpTransport({
host: "smtp.qq.com",
port: 465,
secure: true, // true for 465, false for other ports
auth: {
user: '**********@qq.com', // generated ethereal user
// 密码不是qq登录密码,而是进入qq邮箱生成的秘钥
pass: '**********' // generated ethereal password
}
}));
const html = await fs.readFileSync('../dist/input.html', 'utf-8')
// send mail with defined transport object
let info = await transporter.sendMail({
from: '"Fred Foo 标签:qq,书写,nodemailer,探讨,padding,html,Email,邮件
来源: https://www.cnblogs.com/sinosaurus/p/12819485.html