Express 和 Handlebars：实现多个默认布局

Question

我的项目 nodejs（销售点）需要两个默认布局，第一个：用于身份验证页面和新用户（收银员）的注册（使用他自己的 CSS 代码），第二个对于仪表板（pos 界面以及产品添加页面...）（也有自己的 CSS 代码）。

我的代码结构应该是：

views/
   layouts/
    mainDashboard.hbs
    mainLogin.hbs
   dashboard.hbs
   addProduct.hbs
   login.hbs
   register.hbs

我在 server.js 中的代码（只设置一个 DefaultLayout）：

const express = require("express");
const exphbs = require("express-handlebars");
const app = new express();

// view enginge
app.engine(
  "handlebars",
  exphbs({
    defaultLayout: "mainlogin" ,
  })
);
app.set("view engine", "handlebars");

现在我想用不同的 CSS 代码制作两个不同的布局，我找到但我不明白解决方案（我指定我是 node.js 的初学者并且该站点是我的第一个项目所以我需要更多详细信息）

Answer 1

要解释 post 中发生的事情，您需要了解一些基本知识：

1) res.render 是一个用于呈现视图（如 .hbs、.ejs 等）的快速函数。通常你如何使用渲染函数是这样的：

res.render('index.hbs')

其中 returns 一些 html 并将其写入浏览器。

2) app.use 用于向中间件链中添加中间件（不过是具有 3 个参数的函数）。

app.use(middleware1);
app.use(middleware2);

对于上面的示例，每个 http 请求都将通过 middleware1，然后是 middleware2，然后是像 app.get 或 app.post 这样的处理程序。

所以基本上创建了一个中间件来覆盖res.render函数

现在，要使用此处显示的代码，

为两个主题在视图中创建两个文件夹。例如，

views/
   theme1/
       index.hbs
   theme2/
       index.hbs

在index.js文件中应该是正常的express代码然后添加中间件：

const express = require("express");
const app = express();

...
...
...

app.use(function(req, res, next) {
  // cache original render
  var _render = res.render;

  res.render = function(view, options, done) {
    // custom logic to determine which theme to render
    var theme = getThemeFromRequest(req);
    // ends up rendering /themes/theme1/index.hbs
    _render.call(this, 'themes/' + theme + '/' + view, options, done);
  };
  next();
});

function getThemeFromRequest(req) {
  // in your case you probably would get this from req.hostname or something
  // but this example will render the file from theme2 if you add ?theme=2 to the url
  if(req.query && req.query.theme) {
    return 'theme' + req.query.theme;
  }
  // default to theme1
  return 'theme1';
}
app.listen(8080, ()=>console.log("Started"));

现在假设您制定了一条路线：

app.get('/', (req, res) =>{
    res.render('index.hbs');
});

现在转到，http://localhost:8080/ 它将呈现 theme1/index.hbs 如果你这样做 http://localhost:8080/?theme=theme2 它将呈现 theme2/index.hbs。

希望您能理解我的解释。

Express 和 Handlebars：实现多个默认布局

Express and Handlebars: Implementing multiple Defaultlayouts

node.js

express

express-handlebars