如何从 hbs(handlebars) 页面重定向到 html 页面

Question

我正在做我的投资组合项目。我正在使用车把和 nodeJS。
我有一个名为项目的部分，其中我列出了 4 个不同的项目来展示。我有一个 index.js，我所有的路由都在这里完成。项目 1、3、4 工作得很好。这些都将从我的索引页面上的项目部分中单击。

但是，我对如何路由我的项目 2 感到迷茫。项目 1、3、4 都是车把 (.hbs)。但是我的项目 2 是一个 html 页面。如我的代码片段所示，html 存储在与我所有其他代码相同的 /public 文件夹下。但是，我仍然收到错误消息“无法在视图目录中查找视图“../public/views/fountainWebsite/html/home””。我不确定这需要怎么做？？

// === VARIABLES === //
var express = require('express');
var app = express();
var handlebars = require("express-handlebars");
var path = require("path");
var router = express.Router();  //creates a router object

 //===== view ENGINE SET UP =====//
app.set('view engine', 'handlebars');
app.engine(
    "hbs",
    handlebars({
      layoutsDir: path.join(__dirname, "/public/views/layouts"),
      partialsDir: path.join(__dirname, "/public/views/partials"), 
      extname: ".hbs", //expected file extension for handlebars files
      defaultLayout: "layout" //default layout for app, general template for all pages in app
    })
);
app.set("views", path.join(__dirname, "views"));
 
//thought this would maybe fix the error?? It didn't//
// app.set("fountainWebsite", path.join(__dirname, "fountainWebsite")); //

app.set("view engine", "hbs");
app.use("/public", express.static(path.join(__dirname, "public")));


//===== .GET PAGES =====//

app.get('/', (req, res, next) => { 
    res.render('../public/views/index', {title: 'Home Page', css:['../public/css/style.css'], js:['../public/js/navBar.js']});
});
app.use('/', router);

router.get('/project1', (req, res, next) => {
    res.render('../public/views/partials/project1', {title: 'Data Structures', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});

//error here//
router.get('/project2', (req, res, next) => {
    res.render('../public/views/fountainWebsite/html/home');
});

router.get('/project3', (req, res, next) => {
    res.render('../public/views/partials/project3', {title: 'This Portfolio', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});

router.get('/project4', (req, res, next) => {
    res.render('../public/views/partials/project4', {title: 'Dictionary', css:['../public/css/projects.css'], js:['../public/js/navBar.js']});
});

Answer 1

了解我们的代码在做什么很重要。让我们从 /project2:

的路由处理程序开始

router.get('/project2', (req, res, next) => {
    res.render('../public/views/fountainWebsite/html/home');
});

这是告诉 Express 侦听路径为 /project2 的请求并在 ../public/views/fountainWebsite/html/home 处呈现文件。

Handlebars 需要扩展名（如 .hbs），以便了解使用哪个视图引擎来呈现文件。由于我们从文件路径中省略了扩展名，Express 将假定扩展名是 .hbs 因为这是我们在调用 app.set("view engine", "hbs");

时告诉它要做的

我必须假设您的文件扩展名是 ../public/views/fountainWebsite/html/home.html，因为您已将它放在名为“html”的文件夹中。如果是这种情况，Handlebars 将不会找到此文件，因为它正在寻找 ../public/views/fountainWebsite/html/home.hbs 并且会抛出错误。

简单的解决方案是使用 .hbs 扩展名重命名此文件。这将至少允许 Express 找到文件并通过 Handlebars 视图引擎呈现它。

但是，这种方法的一个问题可能是该视图被包裹在您的 layout.hbs 文件中呈现，而您不希望这样。也许您希望此 HTML 文件不被处理并用作静态资产。

在这种情况下，您可以删除 /project2 路由处理程序并让 Express 将此文件作为静态资产提供。由于您已经通过调用 app.use("/public", express.static(path.join(__dirname, "public"))); 将 public/ 文件夹注册为静态资产文件夹，并且您的文件路径显示此 HTML 文件已经在 public/ 文件夹中，您应该能够直接从您的浏览器在路径 /public/views/fountainWebsite/html/home.html.

中请求此 HTML

如何从 hbs(handlebars) 页面重定向到 html 页面

How redirect from a hbs(handlebars) page to a html page

node.js

express

handlebars.js

express-handlebars

hbs