Node.js + Express + Handlebars.js + 局部视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16385173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Node.js + Express + Handlebars.js + partial views
提问by Artem Yarulin
I am trying to make a simple HelloWorld project with Node.js|Express using Handlebars.js as a server template engine.
我正在尝试使用 Handlebars.js 作为服务器模板引擎，使用 Node.js|Express 制作一个简单的 HelloWorld 项目。
The problem is that I couldn't find any examples of using such chain, especially with multiple view.
问题是我找不到任何使用这种链的例子，尤其是多视图。
For example I would like to define header view:
例如我想定义标题视图：
<header>
<span>Hello: {{username}}</span>
</header>
And use it in every page with other views.
并在具有其他视图的每个页面中使用它。
Maybe I am thinking about this views in a wrong way, I thought that view is kind of control that I can reuse on any page inside any other view.
也许我以错误的方式考虑这个视图，我认为该视图是一种控件，我可以在任何其他视图中的任何页面上重用它。
I appreciate any link to the tutorial or (much better) open source project that I can lear from.
我感谢任何指向本教程或（更好的）开源项目的链接，我可以从中学习。
回答by Tristan Isfeld
I know this had been asked a long time ago, but no one has shown an answer in this post. So I will do so here. To ensure everyone is on the same page, I will be verbose in my answer. I apologize in advance if it seems overly simplistic.
我知道很久以前就有人问过这个问题，但没有人在这篇文章中给出答案。所以我会在这里这样做。为确保每个人都在同一页面上，我将在回答中详细说明。如果它看起来过于简单，我提前道歉。
In your server.js file (or app.js, wherever you defined handlebars as your view engine). Depending on what you are using as your npm package, such as hbs or express-handlebars etc. it may look different, but similar to this. Note: I'm using express-handlebars in this example.
在您的 server.js 文件（或 app.js，您将把手定义为视图引擎的任何地方）中。根据您用作 npm 包的内容，例如 hbs 或 express-handlebars 等，它可能看起来不同，但与此类似。注意：我在这个例子中使用了 express-handlebars。
file: server.js
文件：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' );
...
and your file structure should look something like this:
你的文件结构应该是这样的：
| /views/
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- ... etc.
|--- index.hbs
| server.js
And your main.hbs file should look like this:
您的 main.hbs 文件应如下所示：
file: main.hbs
文件：main.hbs
...
{{> header }}
...
<span> various other stuff </span>
...
{{> footer }}
To denote a partial you use this syntax: {{> partialsNames }}.
要表示部分，请使用以下语法：{{> partialsNames }}.
回答by fmsf
Using https://www.npmjs.org/package/hbs| https://github.com/donpark/hbs
使用https://www.npmjs.org/package/hbs| https://github.com/donpark/hbs
Let's assume you have:
让我们假设你有：
+ views
- index.hbs
+ partials
- footer.hbs
You need to register which folder contains your partials:
您需要注册哪个文件夹包含您的部分：
hbs.registerPartials(__dirname + '/views/partials');
The partials will have the exact name that the file has. You can also register specific names for your partials by using:
部分将具有文件的确切名称。您还可以使用以下方法为您的部分注册特定名称：
hbs.registerPartial('myFooter', fs.readFileSync(__dirname + '/views/partials/footer.hbs', 'utf8'));
Then you access it like this:
然后你像这样访问它：
First example: {{> footer }}
Second example: {{> myFooter }}
Full example here: https://github.com/donpark/hbs/tree/master/examples/partial
完整示例：https: //github.com/donpark/hbs/tree/master/examples/partial
回答by Andrew Waterman
I'm currently using ericf's implementation of "handlebars-express", and find it to be excellent:
我目前正在使用 ericf 的“handlebars-express”实现，并发现它非常好：
https://github.com/ericf/express3-handlebars
https://github.com/ericf/express3-handlebars
The key thing to remember is that on express, as opposed to the within the browser, handlebars gets activated during the view render phase. The client code will end up being just plain HTML, as if you'd used mustache within a PHP context.
要记住的关键是，在 express 上，与在浏览器中相反，把手在视图渲染阶段被激活。客户端代码最终将只是普通的 HTML，就好像您在 PHP 上下文中使用了 mustache。
回答by Troy
You need to use partials.
您需要使用部分。
See https://github.com/donpark/hbs/tree/master/examples/partialfor a good example of using partials.
有关使用部分的一个很好的例子，请参阅https://github.com/donpark/hbs/tree/master/examples/partial。
Here's another example http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
这是另一个例子http://blog.teamtreehouse.com/handlebars-js-part-2-partials-and-helpers
回答by Harsh Gehlot
If your current directory is something like this then,
如果您当前的目录是这样的，那么
| /public/
| /views/
|--- /layouts/
|----- main.hbs
|--- /partials/
|----- header.hbs
|----- footer.hbs
|----- sidebar.hbs
|--- index.hbs
| app.js
Then the structure of app.js will be
那么 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}`));
Set the main.hbs as follows
设置main.hbs如下
const express = require('express');
{{> header}}
{{> sidebar}}
<p>Your Content(static) or you can use {{{body}}} </p>
{{> footer}}
