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

如何解决使用 hbs 显示同一页面的路由

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

这是我的视图目录设置

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",res) => {
  const image = await UploadModel.find();
  res.render("graphicsdisplay",{ images: image });
});

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

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

解决方法

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

,

您应该在渲染时添加 layout: false 来停用默认布局

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

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

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