使用hbs显示相同页面的路由

Question

我将路由设置为主页，而其他路由集则显示其他页面，但每当我运行与主页不同的路由时，它仍然显示主页。

这是我的视图目录设置

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

main.hbs

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

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

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

portfolio.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",
  });
});

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

Answer 1

 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' });
};

Answer 2

您应该通过在呈现时添加layout: false来禁用默认布局，如

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

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",
    layout: false
  });
});