html 电子邮件通知无法正常工作
html email notification not working properly
我正在实施 Nodemailer
从 Node.Js
发送电子邮件。但是,HTML
页面没有正确响应。
我的 index.js
:
const nodemailer = require('nodemailer');
const fs = require('fs');
const handlebars = require('handlebars');
const transporter = nodemailer.createTransport({
host: "smtp.mailtrap.io",
port: 2525,
auth: {
user: "xxxx",
pass: "xxxx"
}
});
const readHTMLFile = (path, callback) => {
fs.readFile(path, {encoding: 'utf-8'}, (err, html) => {
if(err){
callback(err);
}
else{
callback(null,html);
}
});
}
readHTMLFile('index.html', (err, html) => {
const template = handlebars.compile(html);
const replacements = {
username: 'Bob'
};
const htmlToSend = template(replacements);
const message = {
from: 'testxxxx@example.com',
to: 'to@xxxx.com',
subject: 'No reply',
html: htmlToSend
}
transporter.sendMail(message, (error, info) => {
if(error){
console.log(`error: ${JSON.stringify(error)}`);
}
else{
console.log('Email sent: ' + info.response);
}
});
});
我的index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Notification</title>
</head>
<body>
<div>
<h3>Hey! {{username}}!!</h3>
<form action="https://www.google.com">
<input type="submit" value="Go to Google" />
</form>
<h4><a href="https://www.whosebug.com">Go to Whosebug</a></h4>
</div>
现在,用户会收到电子邮件,并且用户可以单击转到 Whosebug link 并被重定向到 Whosebug 网站。然而,当用户点击按钮 Go to Google 时,没有任何反应。我希望用户单击一个按钮并重定向到该网站。请帮我解决这个问题。
问题是您正在使用表单。一些电子邮件客户端不接受表格。有关详细说明,请参阅 https://www.sitepoint.com/forms-in-email/。
相反,如果您想要 link,请像您的其他示例一样使用 <a>
。
如果您希望它看起来像一个按钮,为了获得最佳效果(即为了在所有不同的电子邮件客户端上呈现最佳效果),您需要使用 table 方法:
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;border-collapse:collapse;">
<!-- START CENTERED BUTTON -->
<center>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#D90432" width="200" style="-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; border: none; line-height:20px;color:#ffffff;">
<a href="https://www.google.com.au" style="text-decoration: none;color:#ffffff;display:block;">Read more</a>
</td>
</tr>
</tbody>
</table>
</center>
<!-- END CENTERED BUTTON -->
</td>
</tr>
</table>
我正在实施 Nodemailer
从 Node.Js
发送电子邮件。但是,HTML
页面没有正确响应。
我的 index.js
:
const nodemailer = require('nodemailer');
const fs = require('fs');
const handlebars = require('handlebars');
const transporter = nodemailer.createTransport({
host: "smtp.mailtrap.io",
port: 2525,
auth: {
user: "xxxx",
pass: "xxxx"
}
});
const readHTMLFile = (path, callback) => {
fs.readFile(path, {encoding: 'utf-8'}, (err, html) => {
if(err){
callback(err);
}
else{
callback(null,html);
}
});
}
readHTMLFile('index.html', (err, html) => {
const template = handlebars.compile(html);
const replacements = {
username: 'Bob'
};
const htmlToSend = template(replacements);
const message = {
from: 'testxxxx@example.com',
to: 'to@xxxx.com',
subject: 'No reply',
html: htmlToSend
}
transporter.sendMail(message, (error, info) => {
if(error){
console.log(`error: ${JSON.stringify(error)}`);
}
else{
console.log('Email sent: ' + info.response);
}
});
});
我的index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Email Notification</title>
</head>
<body>
<div>
<h3>Hey! {{username}}!!</h3>
<form action="https://www.google.com">
<input type="submit" value="Go to Google" />
</form>
<h4><a href="https://www.whosebug.com">Go to Whosebug</a></h4>
</div>
现在,用户会收到电子邮件,并且用户可以单击转到 Whosebug link 并被重定向到 Whosebug 网站。然而,当用户点击按钮 Go to Google 时,没有任何反应。我希望用户单击一个按钮并重定向到该网站。请帮我解决这个问题。
问题是您正在使用表单。一些电子邮件客户端不接受表格。有关详细说明,请参阅 https://www.sitepoint.com/forms-in-email/。
相反,如果您想要 link,请像您的其他示例一样使用 <a>
。
如果您希望它看起来像一个按钮,为了获得最佳效果(即为了在所有不同的电子邮件客户端上呈现最佳效果),您需要使用 table 方法:
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;border-collapse:collapse;">
<!-- START CENTERED BUTTON -->
<center>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center" bgcolor="#D90432" width="200" style="-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; border: none; line-height:20px;color:#ffffff;">
<a href="https://www.google.com.au" style="text-decoration: none;color:#ffffff;display:block;">Read more</a>
</td>
</tr>
</tbody>
</table>
</center>
<!-- END CENTERED BUTTON -->
</td>
</tr>
</table>