html邮件模板编写实践

Author Avatar
carvenzhang 9月 01, 2016
  • 在其它设备中阅读本文章

编写邮件模板

最近在写业务开发的时候,需要去写邮件通知的模板。
积累了一些邮箱编写经验呀呀。

邮件html编写要求

邮件编写参照的是 阮一峰大神的HTML Email 编写指南

里面大致提了

使用table 布局
外链除了图片全部失效
css使用行内样式为佳

各邮件对css的支持

实验

行内样式写起来很痛苦,所以,一开始我打算写的是<style></style>标签。
写完后,我向各个主邮箱发送了测试

gmail.com
163.com
qq.com
tencent.com

结果如图

图上可见,QQtencent163<style>的支持尚可,但是gmail已经完全把<style>过滤掉了。

所以需要改用 行内样式 做实验

可以看到,样式完全支持了

如何写行内样式

如果让自己手动写行内样式,那么就是太痛苦了。
那么,有没有办法自动将自己的样式转成行内样式呢?

一开始,我的想法是,使用js遍历所有dom,获取css值,然后写在dom的style属性里。
可是这个办法我探索了一晚上,没有找到一个函数,只获取css声明过的样式,只能获得所有样式的值。

后台直接google了一下gulp-inline,结果搜索出一个gulp-inline-css插件,可以将css转成 inline-css,即行内样式,
用法如下

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
                applyStyleTags: true,
                applyLinkTags: true,
                removeStyleTags: true,
                removeLinkTags: true
        }))
        .pipe(gulp.dest('build/'));
});

完美。

顺便提一下,gmail不支持 position样式,我发现各个邮箱,就gmail的限制比较多。

结尾

有了合适的插件,编写邮件就方便多了。