我要让我的 Email 像 Octopress 一样漂亮

自定义信纸,让 Email 像 Octopress 一样!

这个想法在我的脑子里一闪而过,

但是就像马云说的,梦想还是要有的,如果实现了呢?

那就来实现一下吧!

首先,把 Octopress 的主页抠出来。。。

删掉所有脚本、博客内容,把背景之类的简化一下,在尾注上加上 Email 专用版标志。。。

然后最终我们就得到了这样一个丑陋东西。。。

然后把这些HTML代码复制到邮件里去就可以了!

然而现实永远没有那么简单,绝对不要高估 Email 对 HTML 代码的支持能力!

那怎么办,似乎还是要用图片来解决了。。。

把这个方框截成图片,把脚注分开截(这样要延长的话就会方便一些),再把空白的地方截下来,延长时比较方便,就像这样

(当时一脑残截成了三个部分,后来一想确实不应该这样)

最后还有一张方便随时延长:

然后,到QQ邮箱里,打开写信模式,把图片上的链接用<map>标签加上去,然后加上各种样式(简写样式自动展开好评),另外还得一步一步地查看效果以保证样式不会被服务器吞掉。

最后,代码变成了这个样子:(QQ邮箱把所有标签都弄成大写简直差评!)

Octopress Special Edition for Email
<DIV style="PADDING-BOTTOM: 50px; PADDING-TOP: 20px; PADDING-LEFT: 20px; LEFT: 0px; TOP: 0px; PADDING-RIGHT: 100px; BACKGROUND-COLOR: #262c33">
    <IMG style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; POSITION: relative; OUTLINE-STYLE: none; BORDER-LEFT: 0px; TOP: 0px" src="http://www.caoyue.com.cn/images/email/email-head.jpg">
    <DIV style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; POSITION: relative; OUTLINE-STYLE: none; BORDER-LEFT: 0px; TOP: 0px">
        <IMG style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; POSITION: relative; OUTLINE-STYLE: none; BORDER-LEFT: 0px; TOP: -4px" src="http://www.caoyue.com.cn/images/email/email-main.jpg" useMap=#sidebar>
        <MAP name=sidebar>
            <AREA href="http://www.caoyue.com.cn/" target=_blank coords=795,41,983,214>
            <AREA href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=t9TW2M7C0vfU1tjOwtKZ1NjamdTZ" target=_blank coords=765,345,915,365>
            <AREA href="http://sighttp.qq.com/authd?IDKEY=5b5a3f4dc7bf41522c3f7fa176667e2036fd9ce5e235bdd0" target=_blank coords=767,379,866,395>
        </MAP>
        <DIV style="WIDTH: 650px; POSITION: absolute; LEFT: 50px; Z-INDEX: 2; TOP: -5px">
            <P style="FONT-FAMILY: sans-serif; FONT-WEIGHT: bold">
                收件人:
            </P>
            <P style="FONT-FAMILY: sans-serif; POSITION: relative; TOP: 5px">
                正文
            </P>
            <P style="POSITION: relative; FONT-WEIGHT: bold; TEXT-ALIGN: right; TOP: 10px" align=right>
                发件人
                <BR>
                ****年**月**日
            </P>
        </DIV>
    </DIV>
    <IMG style="BORDER-TOP: 0px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px; POSITION: relative; OUTLINE-STYLE: none; BORDER-LEFT: 0px; TOP: -8px" src="http://www.caoyue.com.cn/images/email/email-foot.jpg" useMap=#footer>
    <MAP name=footer>
        <AREA href="http://www.caoyue.com.cn/" target=_blank coords=165,20,216,35>
        <AREA href="http://www.caoyue.com.cn/blog/2015/07/29/wo-yao-rang-wo-de-email-xiang-octopress-[%3F]-yang-piao-liang/index.html" target=_blank coords=226,20,367,35>
        <AREA href="http://octopress.org" target=_blank coords=493,20,554,35>
    </MAP>
</DIV>  

这是中国特色版的,以后还会有其他语言版本的应该。

最终效果在 QQ邮箱 和 网易邮箱表现还不错(当然要开显示图片)。。。

(除了加载慢出翔以外)

美中不足的是:由于用的样式比较复杂,十分符合垃圾邮件的特征,于是。。。

另外,对手机的支持也是一个问题。。。

如果您对这个项目感兴趣,欢迎发送一封主题中包含 reply-code=emailproject_2ds4k2m2k3 的邮件到 haruue@caoyue.com.cn ,我们将把一封样件发给您。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章