我遵循了一个教程，该教程允许我将Nodemailer用于我的联系表单，并使用contact.handlebars而不是contact.html链接到index.html
因此，我尝试将菜单中的<a href="contact.html">contact</a>替换为<a href="../dist/views/contact.handlebars"></a>
当我单击链接转到联系表格页面时，出现此错误“无法获取/views/contact.handlebars”
请有人可以帮助我了解如何将contact.handlebars链接为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" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-
5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/main.css" />
<title>Azmol Miah | Portofolio</title>
</head>
<body>
<header>
<div class="fullscreen-video-wrap">
<video src="video.mov" autoplay="true" loop="true"></video>
</div>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding"><div class="portrait"></div></div>
<ul class="menu-nav">
<li class="nav-item current">
<a href="/" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">Work</a>
</li>
<li class="nav-item">
<a href="../views/contact.handlebars" class="nav-link">Contact</a>
</li>
</ul>
</nav>
</header>
<main id="home">
<h1 class="lg-heading">Azmol<span class="text-secondary"> Miah</span></h1>
<h2 class="sm-heading">
Web Developer, Programmer, Designer & Entrepreneur
</h2>
<div class="social-icons">
<a href="#!"> <i class="fab fa-linkedin fa-4x"></i> </a>
<a href="#!"> <i class="fab fa-github fa-4x"></i> </a>
<a href="#!"> <i class="fab fa-youtube fa-4x"></i> </a>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>
Contact.js
const express = require("express");
const bodyParser = require("body-parser");
const exphbs = require("express-handlebars");
const path = require("path");
const nodemailer = require("nodemailer");
// Init app variables
const app = express();
// View engine setup
app.engine("handlebars", exphbs());
app.set("view engine", "handlebars");
// Static folder
app.use("/dist", express.static(path.join(__dirname, "dist")));
// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Route
app.get("/", (req, res) => {
res.render("contact");
});
app.post("/send", (req, res) => {
const output = `
<p>You have a new message</p>
<h3>Contact Details</h3>
<ul>
<li>Name: ${req.body.name}</li>
<li>Email: ${req.body.email}</li>
<li>Company: ${req.body.company}</li>
<li>Phone: ${req.body.phone}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: "example.example.co.uk",
port: 465,
secure: true, // true for 465, false for other ports
auth: {
user: "example@example.com", // generated ethereal user
pass: "example" // generated ethereal password
},
tls: {
rejectUnauthorized: false
}
});
// setup email data with unicode symbols
let mailOptions = {
from: '"Portfolio Contact" <hello@example.com>', // sender address
to: "examplel@gmail.com", // list of receivers
subject: "Portfolio Contact Request", // Subject line
text: "Hello world?", // plain text body
html: output // html body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log("Message sent: %s", info.messageId);
console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));
res.render("contact", { msg: "Email has been sent" });
});
});
app.listen(3000, () => console.log("Server started..."));
Contact.handlebars
<!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">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-
5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<link rel="stylesheet" href="../dist/css/main.css">
<title>Contact | Azmol Miah</title>
</head>
<body>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item "><a href="../dist/index.html" class="nav-
link">Home</a></li>
<li class="nav-item "><a href="../dist/about.html" class="nav-
link">About</a></li>
<li class="nav-item"><a href="../dist/work.html" class="nav-
link">Work</a></li>
<li class="nav-item current"><a href="#" class="nav-
link">Contact</a></li>
</ul>
</nav>
</header>
<main id="contact">
<h1 class="lg-heading">Ask<span class="text-secondary"> Me</span></h1>
<h2 class="sm-heading">How to reach me...</h2>
<div class="wrapper">
<div class="company-info">
<ul>
<i class="far fa-address-card fa-5x"></i>
<li>Oldham, Greater Manchester</li>
<li>azmol@azmolmiah.com</li>
<li>07708964303</li>
</ul>
</div>
<div class="contact">
{{msg}}
<form method="POST" action="send">
<p>
<label>Name</label>
<input type="text" name="name">
</p>
<p>
<label>Company</label>
<input type="text" name="company">
</p>
<p>
<label>Email</label>
<input type="email" name="email">
</p>
<p>
<label>Phone</label>
<input type="text" name="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5"></textarea>
</p>
<p class="full">
<button type="submit">Submit</button>
</p>
</form>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2018
</footer>
<script src="../dist/js/main.js"></script>
</body>
</html>
答案 0 :(得分：0)
好吧，我不确定这是否是正确的方法，但是我通过添加有效的<a href="../">Contact</a>来解决了问题。