我有一个基于 Node Js-Express 的应用程序,并使用车把模板来设计 Nodemailer HTML 正文的结构。我尝试以多种方式包含 CSS 文件,但仍然没有任何样式应用于 HTML。
我当前的项目结构是这样的:
- backend
- src
- helpers
- templates
- emailTemplate.handlebars
- public
- styles.css
- app.js
app.js 被定义为使用这样的把手:
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, '/public')));
车把模板是这样的:
<html>
<head>
<title>Update Project Details</title>
{{#each css}}
<link rel="stylesheet" href="../../public/{{this}}">
{{/each}}
</head>
<body>
<h1>{{headerMessage}}</h1>
<p>{{message}}</p>
<p>
{{bodyText}}
<div class="row">
<div class="side">
<button class="edit"> Edit Details </button>
</div>
<div class="main">
<button class="archive"> Archive Product </button>
</div>
</div>
</body>
</html>
当 Nodemailer 运行并接收邮件时,HTML 内容将从邮件正文内的 HandleBar 模板呈现,但没有任何 CSS 或样式。
我还尝试将 CSS 文件保存在与模板相同的文件夹中,但没有成功。不知道我哪里错了。任何解决相同问题的帮助将不胜感激。
我在这里看到的唯一问题是样式表与 DOM 的实际链接。如果您查看 app.js 中的
app.use
,其中显示:
app.use(express.static(path.join(__dirname, '/public')));
这意味着任何所谓的“公共”文件、图像、本地js、样式都存储在公共文件夹中,这是所有标头的新相对路径。因此,无论您的 ejs 或 html 文件位于何处,样式表的相对路径始终是从您的公共文件夹的顶层开始。这使得它更加动态,你唯一需要改变的是:
<link rel="stylesheet" href="../../public/{{this}}">
至:
<link rel="stylesheet" href="{{this}}">
就这么简单。希望这是有道理的,编码愉快!
我使用内部风格。我将CSS代码放在它起作用的头部部分。