Express和Handlebars:实现多个Defaultlayouts [英] Express and Handlebars: Implementing multiple Defaultlayouts

问题描述

我需要为我的项目nodejs(销售点)提供两个defaultlayout，第一个:用于身份验证页面和新用户(出纳)的注册(带有他自己的CSS代码)，第二个用于仪表板(pos接口)以及产品添加页面...)(也有其自己的CSS代码).

i need two defaultlayout for my project nodejs (point of sale), the first: for the authentication page and the registration of a new user (cashier) (with his own CSS code), the second for the dashboard (pos interface as well as the product addition page ...) (with its own CSS code too).

我的代码的结构应为:

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

我在server.js中的代码(只需设置一个DefaultLayout):

My code in server.js (make juste one 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的初学者，并且该站点是我的第一个项目，所以我需要更多详细信息)

Now i want to make two different layout with different CSS Code, I find this post but I do not understand the solution (I specify that I am a beginner in node.js and that site is my first project So I need more detail please)

推荐答案

要解释帖子中发生的情况，您需要了解一些基本知识:

To explain what is happening in the post you need to know some basic things:

1) res.render 是一种快速函数，用于渲染视图(如.hbs，.ejs等).通常，您如何使用渲染功能是这样的:

1) res.render is a express function which is used to render views(like .hbs, .ejs etc etc). Typically how you use render function is like this:

res.render('index.hbs')

哪个会返回一些html并将其写入浏览器.

Which returns some html and writes it to browser.

2)app.use用于将中间件(除了具有3个参数的函数之外)添加到中间件链.

2) app.use is used to add middlewares(which is nothing but functions with 3 params) to the middleware chain.

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

对于上面的示例，每个http请求都将通过Middleware1 THEN middleware2 THEN这样的处理程序，例如app.get或app.post.

For the above example every http request will go through middleware1 THEN middleware2 THEN the handler like app.get or app.post.

因此基本上可以创建一个中间件来覆盖res.render函数

So basically a middleware is created to overwrite the res.render function

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

Now, to use the code shown there,

在视图内为两个主题制作两个文件夹.例如，

Make two folders inside views for two themes. For example,

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

在index.js文件中，它应该是普通的快速代码，然后添加中间件:

In the index.js file it should be normal express code then add the middlwares:

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"));

现在让我们说一条路线:

Now let's say you make a route:

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

现在转到http://localhost:8080/，如果您执行http://localhost:8080/?theme=theme2，它将渲染theme1/index.hbs.

Now go to, http://localhost:8080/ it will render the theme1/index.hbs if you do http://localhost:8080/?theme=theme2 it will render the theme2/index.hbs.

希望您能理解其中的解释.

Hope you understood the explanation.

这篇关于Express和Handlebars:实现多个Defaultlayouts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！