Express-Handlebars 多种布局

Question

我目前正在尝试使用可以轻松引用多个主题/布局的车把。 例如，我的意图是，在呈现新页面时我可以选择哪种布局。 每个布局都链接到一组不同的 JS/CSS 文件。 例如：我可以这样做：

router.get('/bootstrap', function (req, res){ 
   res.render('general', {layout: bootstrap, data: variables});   
});
                     ---or --
router.get('/semantic', function(req,res){
   res.render('general', {layout: semantic, data: variables});

我认为这可以通过简单地在我的/views/layouts目录中创建这样的 (bootstrap/semantic.hbs) 模板并键入来轻松实现

res.render('general', {layout: 'bootstrap', data: variables});

然而这似乎不起作用

// bootstrap_layout.hbs

<html>
<head>
<link ref....to bootstrap css>
<body>
   {{{body}}}

<script src...to jquery>
<script src...to bootstrap js>
{{> Footer }}
</body>
<html>

我的 app.js 文件如下所示：

var express = require('express');
var exphbs  = require('express-handlebars');

var app = express();
var hbs = exphbs.create({
   layoutsDir: /views/layouts });

// Register `hbs.engine` with the Express app.
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

问题是当我尝试这样做时，在 {layout: bootstrap} 或 {layout: semantic} 中调用布局/模板时，我似乎无法加载它。 与其他 ENOENT 错误相比，我遇到了无法找到布局的错误。 我也尝试改变这个：

Remove: var hbs = exphbs.create({
   layoutsDir: /views/layouts });
--------------------------------
Remove: hbs. engine, and replace with exphbs: 

app.engine('handlebars', exphbs({layoutDir: __dirname+'/views/layouts'}));
app.set('view engine', 'handlebars');

我没有运气弄清楚为什么我在调用新布局时遇到如此困难。 有没有人对我可能出错的地方或者我是否遗漏了一些重要的东西有任何建议？

谢谢！

Answer 1

在调用 render 方法时选择的布局名称中使用单引号：

res.render('general', {layout: 'bootstrap', data: variables});

Answer 2

如果您将 [bootstrap/semantic] 布局存储在视图/布局下，它将起作用。 所以，

app.set('view engine', 'handlebars');
app.set('views', './views');

然后

res.render('general', {layout: 'bootstrap', data: variables});

Answer 3

我的一个建议是布局文件的扩展名与您的配置不兼容。

您已指定您的布局具有类似views/layouts/semantic.hbs的路径。 但是，我相信express-handlebars默认需要扩展名“.handlebars”。 （您可以在exphbs.create中覆盖它，例如exphbs.create({ extname: '.hbs' }) ）

总之，请尝试为您的视图文件使用“.handlebars”扩展名。 结果路径如下所示：

./views/general.handlebars
./views/layouts/bootstrap.handlebars
./views/layouts/semantic.handlebars

快递代码的一个基本示例是：

const express = require("express");
const exphbs = require("express-handlebars");
const path = require("path");

const app = express();
const port = 3000;

const hbs = exphbs.create({
  layoutsDir: path.join(__dirname, "/views/layouts"),
});

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

const variables = {
  foo: "bar",
};

app.get("/bootstrap", function (req, res) {
  res.render("general", { layout: "bootstrap", data: variables });
});

app.get("/semantic", function (req, res) {
  res.render("general", { layout: "semantic", data: variables });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Express-Handlebars 多种布局

问题描述

3 个解决方案

解决方案1
0 2020-04-28 16:30:50

解决方案2
0 2023-01-28 10:21:46

解决方案3
0 2023-01-31 20:41:50

Express-Handlebars 多种布局

问题描述

3 个解决方案

解决方案1 0 2020-04-28 16:30:50

解决方案2 0 2023-01-28 10:21:46

解决方案3 0 2023-01-31 20:41:50

解决方案1
0 2020-04-28 16:30:50

解决方案2
0 2023-01-28 10:21:46

解决方案3
0 2023-01-31 20:41:50