我正在尝试使用 Node.js|Express 使用 Handlebars.js 作为服务器模板引擎制作一个简单的 HelloWorld 项目。
问题是我找不到任何使用这种链的例子，尤其是多视图。
例如我想定义标题视图：
<header>
<span>Hello: {{username}}</span>
</header>
并在具有其他视图的每个页面中使用它。
也许我以错误的方式考虑这些视图，我认为该视图是一种可以在任何其他视图内的任何页面上重用的控件。
我感谢任何指向教程或（更好的）我可以从中学习的开源项目的链接。
我知道很久以前就有人问过这个问题，但没有人在这篇文章中给出答案。所以我会在这里这样做。为了确保每个人都在同一页面上，我的回答会很冗长。如果它看起来过于简单，我提前道歉。
在您的 server.js 文件（或 app.js，您将把手定义为视图引擎的任何位置）中。根据您使用的 npm 包，例如 hbs 或 express-handlebars 等，它可能看起来不同，但与此类似。注意：我在这个例子中使用了快速车把。
文件：server.js
...
var express = require( 'express'),
hbs = require( 'express-handlebars' ),
app = express();
...
app.engine( 'hbs', hbs( {
extname: 'hbs',
defaultLayout: 'main',
layoutsDir: __dirname + '/views/layouts/',
partialsDir: __dirname + '/views/partials/'
} ) );
app.set( 'view engine', 'hbs' );
...
你的文件结构应该是这样的：
| /views/
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js
您的 main.hbs 文件应如下所示：
文件：main.hbs
...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}
要表示部分，请使用以下语法：{{> partialsNames }}.
使用https://www.npmjs.org/package/hbs | https://github.com/donpark/hbs
假设您有：
+ views
- index.hbs
+ partials
- footer.hbs
您需要注册哪个文件夹包含您的部分：
hbs.registerPartials(__dirname + '/views/partials');
部分将具有文件的确切名称。您还可以使用以下方法为您的部分注册特定名称：
hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8'));
然后你像这样访问它：
First example: {{> footer }}
Second example: {{> myFooter }}
此处的完整示例：https ://github.com/donpark/hbs/tree/master/examples/partial
我目前正在使用 ericf 的“handlebars-express”实现，发现它非常棒：
https://github.com/ericf/express3-handlebars
要记住的关键是，在 express 上，与在浏览器中相反，handlebars 在视图渲染阶段被激活。客户端代码最终将只是纯 HTML，就像您在 PHP 上下文中使用 mustache 一样。
您需要使用部分。
请参阅https://github.com/donpark/hbs/tree/master/examples/partial以获得使用部分的一个很好的例子。
这是另一个例子http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
如果您当前的目录是这样的，那么，
| /public/
| /views/
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- sidebar.hbs
|--- index.hbs
| app.js
那么 app.js 的结构就是
const express = require('express');
const app = express();
const port = 3001;
const path = require('path');
const handlebars = require('express-handlebars');
app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', '.hbs');
app.engine('.hbs', handlebars({
layoutsDir: __dirname + '/public/views/layouts',
defaultLayout: 'main',
extname: 'hbs',
//for partial directory
partialsDir : __dirname+'/public/views/partials',
}));
app.set('views', path.join(__dirname, '/public/views'));
app.get('/', (req, res) => {
res.render('index');
});
app.listen(port, () => console.log(`App listening to port ${port}`));
如下设置main.hbs
const express = require('express');
{{> header}}
{{> sidebar}}
<p>Your Content(static) or you can use {{{body}}} </p>
{{> footer}}