一尘不染

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

node.js

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

问题是我找不到使用此类链的任何示例,尤其是在使用多视图时。

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

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

并将其与其他视图一起用于每个页面。

也许我在以错误的方式考虑这些视图,我认为该视图是一种控件,可以在任何其他视图内的任何页面上重用。

我感谢我可以从中获得的指向教程或(更好)开源项目的任何链接。


阅读 223

收藏
2020-07-07

共1个答案

一尘不染

我知道这个问题是很久以前提出来的,但是没有人在这篇文章中给出答案。所以我将在这里进行。为确保每个人都在同一页面上,我的回答会很冗长。如果这看起来过于简单,我事先表示歉意。

在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 }}

2020-07-07