Node.js + Express + Handlebars.js +部分视图

我正在尝试使用Handlebars.js作为服务器模板引擎,使用Node.js | Express制作一个简单的HelloWorld项目。

问题是我找不到使用这样的链的任何例子,特别是有多个视图。

例如,我想定义标题视图:

<header> <span>Hello: {{username}}</span> </header> 

并在每个页面使用它与其他意见。

也许我正在以一种错误的方式思考这个观点,我认为这个观点是可以在任何其他视图内的任何页面上重复使用的一种控制。

我感谢任何链接到我可以学习的教程或(更好)开源项目。

使用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

我知道很久以前就有这个问题了,但是这个post没有人回答。 所以我会在这里这样做。 为了确保每个人都在同一页面上,我将在我的答案中详细说明。 如果看起来过于简单,我先提前道歉。

在你的server.js文件(或者app.js,无论你把handlebars定义为视图引擎的地方)。 根据你使用的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 }}

我目前正在使用ericf的“handlebars-express”的实现,并发现它是优秀的:

https://github.com/ericf/express3-handlebars

关键要记住的是,在expression式上,与浏览器内部相反,在视图渲染阶段,handlebars被激活。 客户端代码将最终只是纯HTML,就像在PHP上下文中使用胡子一样。