hbs 用于 Handlebars 的 Express 模板引擎包装器 - 文章教程

hbs 用于 Handlebars 的 Express 模板引擎包装器

发布于 2021-08-09 字数 3762 浏览 885 评论 0

安装

npm install hbs

使用

使用 hbs 作为默认模板引擎只需要在您的应用程序设置中编写一行代码。这将 .hbsres.render 调用时呈现文件。

app.set('view engine', 'hbs');

要为模板文件使用不同的扩展名(例如:html):

app.set('view engine', 'html');
app.engine('html', require('hbs').__express);

Helpers and Partials

hbs 从把手中公开 registerHelperregisterPartial 方法。

var hbs = require('hbs');
hbs.registerHelper('helper_name', function (options) { return 'helper value'; });
hbs.registerPartial('partial_name', 'partial value');

为方便起见,registerPartials提供了一种从特定目录加载所有部分的快速方法:

var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials', function (err) {});

从目录加载的部分根据其文件名命名,其中空格和连字符替换为下划线字符:

template.html      -> {{> template}}
template 2.html    -> {{> template_2}}
login view.hbs     -> {{> login_view}}
template-file.html -> {{> template_file}}

有关更多信息,请参阅 handlebars.js 文档。

注意:这个方法是异步的;这意味着该目录以非阻塞方式运行到应用程序启动。

将局部变量暴露为模板数据

hbs 能够在视图内的任何上下文中公开应用程序并请求本地人。要启用此功能,只需调用该localsAsTemplateData方法并传入您的 Express 应用程序实例。

var hbs = require('hbs');
var express = require('express');

var app = express();
hbs.localsAsTemplateData(app);

app.locals.foo = "bar";

然后可以使用以下@property语法访问本地数据:

top level: {{@foo}}
{{#each items}}
  {{label}}: {{@foo}}
{{/each}}

注意:在局部和模板中,可以不使用 @ 前缀访问本地数据。

handlebars

可以通过模块上的handlebars属性访问 hbs 需要使用的把手hbs

如果您希望使用像把手这样的方法,SafeString请在此属性上这样做。不要以这种方式注册助手或部分。

// hbs.handlebars is the handlebars module
hbs.handlebars === require('handlebars');

Recipes

不止一个实例

您可以使用create()模块对象上的函数创建 hbs 的隔离实例。

var hbs = require('hbs');

var instance1 = hbs.create();
var instance2 = hbs.create();

app.engine('html', instance1.__express);
app.engine('hbs', instance2.__express);

每个实例都具有与hbs模块对象相同的方法/属性。模块对象实际上只是自动为您创建的一个实例。

额外的脚本或样式

有时在页面上使用自定义脚本或样式表很有用。Handlebars 不提供导入或扩展模板的方法,但通过使用帮助程序,您可以创建类似的结果。

我们可以利用我们的正文模板在布局模板之前处理的事实。知道了这一点,我们可以创建两个助手 blockextend 它们可用于将自定义样式表或脚本“注入”到布局模板中。该 block 助手将充当早期 extend 助手中指定的值的占位符。

有关工作示例,请参阅示例/扩展。请注意 index.hbs 文件如何定义要注入布局的额外样式表和脚本。它们分别被放入头部和身体的末端。如果不这样做,样式表将在正文中,脚本将打印 foo bar 得太快。

有用的模块

  • hbs-utils:一个小型实用程序库,提供注册和编译部分的帮助程序,包括更改部分时的自动更新。

项目地址:https://github.com/pillarjs/hbs

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81899 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0