javascript - 在 Node.JS 中导入 HTML 文件并将变量传递给它

标签 javascript html node.js

我正在创建一个电子邮件系统,并向用户发送激活码。要定义要发送给用户的 msg 对象,它必须遵循以下结构:


    const msg = {
              to: req.body.email,
              from: "anakin@empire.net",
              subject: "Welcome to the Empire!",
              text: `Here is your access code! Shh, don't tell anyone - ${randomNum}`,
              html: CodeActivation <---
            };

对于 CodeActivation HTML 文件,我想将 randomNum 传递给它,这意味着我需要将此文件实际导入到 Javascript 中以接受变量,然后返回 HTML (我已经包含了下面的 HTML 文件)。

这提出了另一个障碍,我有一个长度的 HTML 文件,我不能简单地把它包装成一个字符串。

任何建议都会很棒!感谢您抽出时间。

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<!--[if gte mso 9]>
	<xml>
		<o:OfficeDocumentSettings>
		<o:AllowPNG/>
		<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml>
	<![endif]-->
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="format-detection" content="date=no" />
	<meta name="format-detection" content="address=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="x-apple-disable-message-reformatting" />
	<!--[if !mso]><!-->
	<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&display=swap" rel="stylesheet" />
	<!--<![endif]-->
	<title>Email Template</title>
	<!--[if gte mso 9]>
	<style type="text/css" media="all">
		sup { font-size: 100% !important; }
	</style>
	<![endif]-->
	<!-- body, html, table, thead, tbody, tr, td, div, a, span { font-family: Arial, sans-serif !important; } -->
	

	<style type="text/css" media="screen">
		body { padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none }
		a { color:#0047ab; text-decoration:none }
		p { padding:0 !important; margin:0 !important } 
		img { margin: 0 !important; -ms-interpolation-mode: bicubic; /* Allow smoother rendering of resized image in Internet Explorer */ }

		a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
		
		.btn-16 a { display: block; padding: 15px 35px; text-decoration: none; }
		.btn-20 a { display: block; padding: 15px 35px; text-decoration: none; }

		.l-white a { color: #ffffff; }
		.l-black a { color: #282828; }
		.l-pink a { color: #0047ab; }
		.l-grey a { color: #6e6e6e; }
		.l-purple a { color: #9128df; }

		.gradient { background: linear-gradient(to right, #388BFF 0%,#0047ab 100%); }

		.btn-secondary { border-radius: 10px; background: linear-gradient(to right, #9028df 0%,#0047ab 100%); }

		.cke_editable,
		.cke_editable a,
		.cke_editable span,
		.cke_editable a span { color: #282828 !important; }
		.tpl-content { padding: 0 !important; }
		.mcnPreviewText { display: none !important; }
				
		/* Mobile styles */
		@media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {
			.mpx-10 { padding-left: 10px !important; padding-right: 10px !important; }

			.mpx-15 { padding-left: 15px !important; padding-right: 15px !important; }

			u + .body .gwfw { width:100% !important; width:100vw !important; }

			.td,
			.m-shell { width: 100% !important; min-width: 100% !important; }
			
			.mt-left { text-align: left !important; }
			.mt-center { text-align: center !important; }
			.mt-right { text-align: right !important; }
			
			.me-left { margin-right: auto !important; }
			.me-center { margin: 0 auto !important; }
			.me-right { margin-left: auto !important; }

			.mh-auto { height: auto !important; }
			.mw-auto { width: auto !important; }

			.fluid-img img { width: 100% !important; max-width: 100% !important; height: auto !important; }

			.column,
			.column-top,
			.column-dir-top { float: left !important; width: 100% !important; display: block !important; }

			.m-hide { display: none !important; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; min-height: 0 !important; }
			.m-block { display: block !important; }

			.mw-15 { width: 15px !important; }

			.mw-2p { width: 2% !important; }
			.mw-32p { width: 32% !important; }
			.mw-49p { width: 49% !important; }
			.mw-50p { width: 50% !important; }
			.mw-100p { width: 100% !important; }

			.mmt-0 { margin-top: 0 !important; }
		}

		
				/**
				* @tab Page
				* @section Body Background
				* @tip Set the styling for email background.
				* @style Body Background
				*/
				.background-body {
					/*@editable*/ background-color: #f2f5f7;
				}

				/**
				* @tab Page
				* @section Footer Background
				* @tip Set the styling for Footer background.
				* @style Footer Background
				*/
				.background-footer {
					/*@editable*/ background-color: #0047ab;
				}

				/**
				* @tab Page
				* @section Link Color
				* @tip Set the styling for link color.
				* @style Link Color
				*/
				a {
					/*@editable*/ color: #0047ab;
				}

				/**
				* @tab Page
				* @section Button Background
				* @tip Set the styling for Buttons background.
				* @style Button Background
				*/
				.btn-16 {
					/*@editable*/ background-color: #0047ab;
				}
				</style>
</head>
<body class="body" style="padding:0 !important; margin:0 auto !important; display:block !important; min-width:100% !important; width:100% !important; background:#f2f5f7; -webkit-text-size-adjust:none;">
	<center>
		<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;" bgcolor="#f2f5f7" class="gwfw">
			<tr>
				<td style="margin: 0; padding: 0; width: 100%; height: 100%;" align="center" valign="top">
					<table width="600" border="0" cellspacing="0" cellpadding="0" class="m-shell">
						<tr>
							<td class="td" style="width:600px; min-width:600px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal;">
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td class="mpx-10">
											<!-- Top -->
											<table width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td class="text-12 c-grey l-grey a-right py-20" style="font-size:12px; line-height:16px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; color:#6e6e6e; text-align:right; padding-top: 20px; padding-bottom: 20px;">
															<a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="text-decoration:none; color:#6e6e6e;">View this email in your browser</span></a>
														</td>
													</tr>
												</table>											<!-- END Top -->
											
											<!-- Container -->
											<table width="100%" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td class="gradient pt-10" style="border-radius: 10px 10px 0 0; padding-top: 10px;" bgcolor="#f3189e">
														<table width="100%" border="0" cellspacing="0" cellpadding="0">
															<tr>
																<td style="border-radius: 10px 10px 0 0;" bgcolor="#ffffff">
																	<!-- Logo -->
																	<table width="100%" border="0" cellspacing="0" cellpadding="0">
																		<tr>
																			<td class="img-center p-30 px-15" style="font-size:0pt; line-height:0pt; text-align:center; padding: 30px; padding-left: 15px; padding-right: 15px;">
																				<a href="#" target="_blank"><img src="../HTML/img/stemuli_logo@2x.png" width="112" height="43" mc:edit="image_1" style="max-width:112px;" border="0" alt="" /></a>
																			</td>
																		</tr>
																	</table>
																	<!-- Logo -->
											
																	<!-- Main -->
																	<table width="100%" border="0" cellspacing="0" cellpadding="0">
																		<tr>
																			<td class="px-50 mpx-15" style="padding-left: 50px; padding-right: 50px;">
																				<!-- Section - Intro -->
																				<table width="100%" border="0" cellspacing="0" cellpadding="0">
																					<tr>
																						<td class="pb-50" style="padding-bottom: 50px;">
																							<table width="100%" border="0" cellspacing="0" cellpadding="0">
																								<tr>
																									<td class="fluid-img img-center pb-50" style="font-size:0pt; line-height:0pt; text-align:center; padding-bottom: 50px;">
																										<img src="https://www.psd2newsletters.com/templates/purple/images/img_intro_5.png" width="264" height="300" border="0" alt="" />
																									</td>
																								</tr>
																								<tr>
																									<td class="title-36 a-center pb-15" style="font-size:36px; line-height:40px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-bottom: 15px;">
																										<strong>Access Code</strong>
																									</td>
																								</tr>
																								<tr>
																									<td class="text-16 lh-26 a-center pb-25" style="font-size:16px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 26px; text-align:center; padding-bottom: 25px;">
																										Click on the button below to activate code, this is your requested account key code to log in with your email address (name@mail.com)
																									</td>
																								</tr>
																								<tr>
																									<td class="pb-30" style="padding-bottom: 30px;">
																										<table width="100%" border="0" cellspacing="0" cellpadding="0">
																											<tr>
																												<td class="title-22 a-center py-20 px-50 mpx-15" style="border-radius: 10px; border: 1px dashed #b4b4d4; font-size:22px; line-height:26px; color:#282828; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; text-align:center; padding-top: 20px; padding-bottom: 20px; padding-left: 50px; padding-right: 50px;" bgcolor="#f2f5f7">
																													<strong>CODE : <span class="c-purple" style="color:#9128df;">PURPLE123</span></strong>
																												</td>
																											</tr>
																										</table>
																									</td>
																								</tr>
																								<tr>
																									<td align="center">
																										<!-- Button -->
																										<table border="0" cellspacing="0" cellpadding="0" style="min-width: 200px;">
																											<tr>
																												<td class="btn-16 c-white l-white" bgcolor="#f3189e" style="font-size:16px; line-height:20px; mso-padding-alt:15px 35px; font-family:'PT Sans', Arial, sans-serif; text-align:center; font-weight:bold; text-transform:uppercase; border-radius:25px; min-width:auto !important; color:#ffffff;">
																													<a href="#" target="_blank" class="link c-white" style="display: block; padding: 15px 35px; text-decoration:none; color:#ffffff;">
																														<span class="link c-white" style="text-decoration:none; color:#ffffff;">ACTIVATE CODE</span>
																													</a>
																												</td>
																											</tr>
																										</table>
																										<!-- END Button -->
																									</td>
																								</tr>
																							</table>
																						</td>
																					</tr>
																				</table>
																				<!-- END Section - Intro -->
																			</td>
																		</tr>
																	</table>
																	<!-- END Main -->
																</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
											<!-- END Container -->
											
										<!-- Footer -->
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td class="background-footer p-50 mpx-15" bgcolor="#0047ab" style="border-radius: 0 0 10px 10px; padding: 50px;">
															<table width="100%" border="0" cellspacing="0" cellpadding="0">
																<tr>
																	<td align="center" class="pb-20" style="padding-bottom: 20px;">
																		<!-- Socials -->
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
																					<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_facebook.png" width="34" height="34" mc:edit="image_6" style="max-width:34px;" border="0" alt="" /></a>
																				</td>
																				<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
																				<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
																					<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_instagram.png" width="34" height="34" mc:edit="image_7" style="max-width:34px;" border="0" alt="" /></a>
																				</td>
																				<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
																				<td class="img" width="34" style="font-size:0pt; line-height:0pt; text-align:left;">
																					<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/ico_twitter.png" width="34" height="34" mc:edit="image_8" style="max-width:34px;" border="0" alt="" /></a>
																				</td>
																				
																			</tr>
																		</table>
																		<!-- END Socials -->
																	</td>
																</tr>
																<tr>
																	<td class="text-14 lh-24 a-center c-white l-white pb-20" style="font-size:14px; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 24px; text-align:center; color:#ffffff; padding-bottom: 20px;">
																		<div mc:edit="text_12">
																		
																			<br />
																			<a href="tel:+17384796719" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(738) 479-6719</span></a> - <a href="tel:+13697181973" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;">(369) 718-1973</span></a>
																			<br />
																			<a href="mailto:info@website.com" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a> - <a href="www.website.com" target="_blank" class="link c-white" style="text-decoration:none; color:#ffffff;"><span class="link c-white" style="text-decoration:none; color:#ffffff;"></span></a>
																		</div>
																	</td>
																</tr>
																<tr>
																	<td align="center">
																		<!-- Download App -->
																		<table border="0" cellspacing="0" cellpadding="0">
																			<tr>
																				<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
																					<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_appstore.png" width="117" height="40" mc:edit="image_10" style="max-width:117px;" border="0" alt="" /></a>
																				</td>
																				<td class="img" width="15" style="font-size:0pt; line-height:0pt; text-align:left;"></td>
																				<td class="img" width="117" style="font-size:0pt; line-height:0pt; text-align:left;">
																					<a href="#" target="_blank"><img src="https://www.psd2newsletters.com/templates/purple/images/btn_gplay.png" width="117" height="40" mc:edit="image_11" style="max-width:117px;" border="0" alt="" /></a>
																				</td>
																			</tr>
																		</table>
																		<!-- END Download App -->
																	</td>
																</tr>
															</table>
														</td>
													</tr>
												</table>				<!-- END Footer -->
															</table>											<!-- END Footer -->
																				<!-- END Footer -->
											
											<!-- Bottom -->
											<table width="100%" border="0" cellspacing="0" cellpadding="0">
													<tr>
														<td class="text-12 lh-22 a-center c-grey- l-grey py-20" style="font-size:12px; color:#6e6e6e; font-family:'PT Sans', Arial, sans-serif; min-width:auto !important; line-height: 22px; text-align:center; padding-top: 20px; padding-bottom: 20px;">
															<a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">UNSUBSCRIBE</span></a> &nbsp;|&nbsp; <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">WEB VERSION</span></a> &nbsp;|&nbsp; <a href="#" target="_blank" class="link c-grey" style="text-decoration:none; color:#6e6e6e;"><span class="link c-grey" style="white-space: nowrap; text-decoration:none; color:#6e6e6e;">SEND TO A FRIEND</span></a>
														</td>
													</tr>
												</table>											<!-- END Bottom -->
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</center>
</body>
</html>

最佳答案

选择一个template languagenunjucks ,然后在模板中放置一条输出指令:

<p>Your random number is {{randomNum}}</p>

...然后通过模板库运行模板:

const html = nunjucks.render('template.html', { randomNum: get_a_random_number() });

关于javascript - 在 Node.JS 中导入 HTML 文件并将变量传递给它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60098414/

相关文章:

javascript - 无法获得 JS 验证以响应

javascript - 使用 jquery 获取不是直接同级、父级等的前一个元素

javascript - onclick 函数不能用于 .append?

html - 在父 Div 内水平居中放置 2 个 Div 按钮

java - 套接字 IO 事件多次触发 NodeJS

javascript - 防止点击动画过多的超时功能

JavaScript 日期差异 - 一小时太多

javascript - 如何为所有包含文本的元素添加特定的 CSS 属性

node.js - 我有很多损坏的 Homebrew 符号链接(symbolic link),我该怎么办?

node.js - 使用 nodemailer 从 node.js 应用程序发送电子邮件