时间戳

首页 > 解决方案 > 与显示同一页面的 hbs 路由

html - 与显示同一页面的 hbs 路由

问题描述

我将路由设置为主页，其他路由设置显示其他页面，但是每当我运行主页以外的其他路由时，它仍然显示主页

这是我的意见目录设置

views
    -partials
            -header.hbs
            -footer.hbs
            -navigation.hbs
            -index.hbs
    -main.hbs
    -portfolio.hbs
    -graphicsDisplay.hbs

主文件

{{!-- header partial file --}}
{{>header}}

{{!-- navigation partial file --}}
{{>navigation}}

{{!-- index partial file --}}
{{>index}}
 
{{!-- footer partial file --}}
{{>footer}}

投资组合.hbs

{{!-- header partial file --}}
{{>header}}

{{!-- navigation partial file --}}
{{>navigation}}

{{!-- footer partial file --}}
{{>footer}}

根文件夹中的 index.js 具有以下用于 hbs 设置的代码

const hbs = require("express-handlebars");
app.set("view engine", "hbs");
app.engine(
  "hbs",
  hbs({
    extname: "hbs",
    defaultView: "default",
    layoutsDir: path.join(__dirname, "views"),
    partialsDir: path.join(__dirname, "views/partials"),
  })
);

//calling router
app.use("/", require("./server/router/router.js"));

app.listen(3002);
console.log("listening to port 3002");

和路由器

router.get("/portfolio", (req, res) => {
  res.render("portfolio", {
    pageTitle: "MickyDesigns - Welcome to my portfolio showroom",
  });
});

router.get("/graphics", (req, res) => {
  const image = await UploadModel.find();
  res.render("graphicsDisplay", { images: image });
});

router.get("/", (req, res) => {
  res.render("main", {
    pageTitle:
      "MickyDesigns - Brand Management and Software development Projects",
  });
});

但是所有路由都会呈现主页。请帮忙谢谢

标签： htmlnode.jsexpressexpress-handlebars

解决方案

 app.set("view engine", "hbs");

const handleEngine = hbs.create({
  defaultLayout:'main',
  extname:".hbs",
  layoutsDir: path.join(__dirname, "views/"),
  partialsDir:path.join(__dirname, "views/partials")
})

app.engine(
  "hbs",
  handleEngine.engine
);

像这样设置你的引擎。似乎您没有提供正确的默认布局名称，您可能还希望像这样向控制器添加布局

exports.graphicsDisplay = async (req, res) => {
  ......
  res.render("graphicsDisplay",  { images: image , layout:'graphicsDisplay' });
};

推荐阅读