结果：

Question

我在Express Node.js应用程序中使用Handlebars。我的layout.html文件包含<head>部分。如何针对不同的页面使<head>部分不同？（例如，我可以仅在一个页面中引用JavaScript文件，并为每个页面改变<title>。）

layout.html看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src='/public/ajsfile.js'></script>
    <link type='text/css' href="/public/style.css" rel="stylesheet">
  </head>
  <body>
    {{{body}}}
  </body>
</html>

（我想象的是<head>内容与上面{{{body}}}类似的内容，但{{{head}}}更新。）

Answer 1

这是一个很好的问题，在我看来，Express的视图模型中存在一个明显的弱点。幸运的是，有一个解决方案：使用Handlebars 阻止帮助。这是我用于此目的的助手：

helpers: {
    section: function(name, options){
        if(!this._sections) this._sections = {};
        this._sections[name] = options.fn(this);
        return null;
    }
}

然后，在您的布局中，您可以执行以下操作：

<head>
    {{{_sections.head}}}
</head>
<body>
    {{{body}}}
</body>

在你看来：

{{#section 'head'}}
    <!-- stuff that goes in head...example: -->
    <meta name="robots" content="noindex">
{{/section}}

<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>

Answer 2

您可以进行以下操作：

layout.hbs

<head>
    <title>{{title}}</title>
    {{#each css}}
        <link rel="stylesheet" href="/css/{{this}}" />
    {{/each}}
</head>

app.js

router.get('/', function (req, res, next) {
    res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});

结果：

<head>
    <title>MyApp</title>
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/custom.css" />
</head>

Answer 3

也许，你可以使用节助手的这个实现：https://github.com/cyberxander90/express-handlebars-sections

您只需要安装并启用它：

yarn add express-handlebars-sections # or npm

const expressHandlebarsSections = require('express-handlebars-sections');

app.engine('handlebars', expressHandlebars({
    section: expressHandlebarsSections()
}));

希望它有所帮助。

尤尼斯

Answer 4

我知道这是一个较老的问题，但我想指出一个明确的替代方案来解决你所问的问题（我不完全确定为什么这些年来没有其他人谈论它）。当你把{{{{}}}中的内容放在{{{{}}}中时，你实际上得到了你正在寻找的答案，但我想你需要帮助理解如何使其发挥作用。

此页面上的大部分答案似乎都适用于Node＆＃34; Sections＆＃34;因为您说的是您希望更改的布局文件中包含的HTML的不同部分。＆＃34;章节＆＃34;每个人都在谈论这个线程似乎是一种技术，虽然我可能会弄错，源于微软的Razor模板引擎。更多信息：https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm

无论如何，章节适用于您的问题，因此可以＆＃34; Partials＆＃34;从理论上讲（虽然它实际上可能不是最好的选择）。有关Partials的更多信息： https://www.npmjs.com/package/express-partial

但是，您只是想要一种方法来改变Handlebars中模板布局的HTML标记内容，并假设我们正在讨论HTML头标记，您需要做的就是替换模板布局中的内容HTML带有其中一个的头标签（我使用3个括号，因为它似乎包含了HTML，你不希望它被转义）：

<head> 
{{{headContent}}}
</head>

然后，您只需通过您在app.js文件中创建的路径动态传递您想要的任何数据到＆＃34;得到＆＃34;像这样的页面（我主要是提供代码@Fabricio已经提供，所以我没有必要重写这个）：

router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});

现在当你加载你的页面时，＆＃34;我就这么做了！＆＃34;将是你期望它出现的地方。

带Express的把手：不同页面的不同html头

4 个答案:

layout.hbs

app.js

结果：