时间戳

首页 > 解决方案 > Sending template email with nodemailer, broken styles

html - Sending template email with nodemailer, broken styles

问题描述

trying to send a template email using nodemailer and making the template with handlebars.

The email does send but the styling of the email is not right. It looks like this

enter image description here

I have attached what I've written in my handlebars template

<!DOCTYPE html>
<html>
    <head>
    <title>Welcome to</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Cabin');
        body { margin: 0; padding: 0; left: 0; top: 0; background-color: white; }
        h1 { font-family: 'Cabin'; font-weight: 600; color: rgba(5,45,84,1); margin-left: 2px;}
        p { font-family: 'Cabin'; font-weight: 400; font-size: 11pt; color: rgba(5,45,84,1); margin-left: 2px; }
        h3 {
            margin-top: 50px;
            color: rgba(5,45,84,.25);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
            width: 80vw;
        }
        h2 {
            text-align: center;
            margin-top: 25px;
            margin-bottom: 10px;
            color: rgba(5,45,84,1);
            font-family: 'Cabin'; 
            font-weight: 400; 
            font-size: 10pt;
        }
        h3 > a { color: rgba(118,146,255,1); }
        h3 > a:hover { cursor: pointer; }
        h3 > a:active { opacity: .75; }
        .page-container { width: 80vw; margin-left: 10vw; }
        .logo { margin-left: 2px; height: 30px; margin-top: 20px; margin-bottom: 20px; }
        .divider { height: 1px; width: 100%; background-color: rgba(5,45,84,.1); margin-bottom: 40px; }
        .button-container {
            width: 100%;
            height: 50px;
            margin-top: 25px;
            margin-bottom: 25px;
            display: flex;
            flex-direction: column;
        }
        .cta {
            transition: all 200ms; 
            -webkit-transition: all 200ms; 
            -moz-transition: all 200ms; 
            -o-transition: all 200ms;
            -ms-transition: all 200ms;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 46px;
            color: white;
            font-size: 11pt;
            font-family: 'Cabin';
            font-weight: 500;
            padding-left: 20px;
            padding-right: 20px;
            background-color: #7692FF;
            border-radius: 5px;
            margin-top: 0px;
            margin-bottom: 4px;
            box-shadow: 0px 4px rgba(118,146,255,.25);
        }
        .cta:hover {
            cursor: pointer;
        }
        .cta:active {
            margin-top: 4px;
            margin-bottom: 0px;
            box-shadow: 0px 0px rgba(118,146,255,.25);
        }
        .footer-container {
            width: 100%;
            margin-top: 50px;
            padding-bottom: 10px;
            background-color: rgba(5,45,84,.04);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    </head>
    <body>
        <div class="page-container">
        <div class="divider"></div>
        <h1>Welcome to</h1>
        <p>
            Hi Matthew, thanks for signing up for. We're so happy to have you! almost ready to join your first group. Click the link below to verify your email.
        </p>
        <div class="button-container">
            <div class="cta">
            GET STARTED
            </div>
        </div>
        <p>
            We'll reach out again when we're ready for you to start using. Just reply to this email if you have any questions.
        </p>
        <p>
            - Team Something
        </p>
        </div>
        <div class="footer-container">
        <h3 class="footer">
            If you need help, respond to this message. If this message was sent to you by mistake and you did not sign up for an account with us, we apologize.
        </h3>
        <h2>a9 Something 2018</h2>
        </div>
    </body>
</html>

It seems to me that there are certain styles that don't apply, the imported font from google, the centering of the word on the button and the box shadow. Does flex work with handlebars??

标签： htmlhandlebars.jsnodemailerexpress-handlebars

解决方案

电子邮件客户端因显示问题而臭名昭著。始终建议使用嵌套表和一些基本元素，但主要是表。

使用内联样式，并尽可能保持基本。大多数 HTML5 都不会得到完全支持。

推荐阅读