Как перенаправить со страницы 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

Важно понимать, что делает наш код. Начнем с обработчика маршрута для:

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

Это говорит Express о том, что нужно прослушивать запрос с указанием пути и отображать файл по адресу ../public/views/fountainWebsite/html/home.

Для Handlebars требуется расширение (например), чтобы знать, какие механизмы просмотра использовать для рендеринга файла. Поскольку мы не указали расширение в пути к файлу, Express будет считать, что это расширение связано с тем, что мы сказали ему, когда вызывали 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"))); и ваш путь к файлу показывает, что этот HTML-файл уже находится в public/ папку, вы должны иметь возможность запрашивать этот HTML-код прямо из браузера по пути /public/views/fountainWebsite/html/home.html.