Handlebars 模板引擎,及在 node 项目中使用
程序员文章站
2022-06-19 11:58:15
...
Handlebars 模板引擎,及在 node 项目中使用
说明
Handlebars,是一个语义化的模板,它看起来和 HTML 一样,只是嵌入了 handlebars 表达式。
1. 在 node 项目中的使用
1. express 项目文件配置
yarn add express # 4.16.2
yarn add express-handlebars # 3.0.0
const express = require('express');
const http = require('http');
const path = require('path');
const app = express();
const exphbs = require('express-handlebars'); // 引入 hanlebars 解析
// 设置模板为 handlebars
app.set('views', path.join(__dirname, 'views'));
const hbs = exphbs.create({
extname: '.hbs', // 设置文件后缀
layoutsDir: ['views/'] // 设置模板文件的目录
})
app.engine('hbs', hbs.engine); // 设置其模板引擎,名称为 'hbs'
app.set('view engine', 'hbs'); // 将当前默认模板引擎设置为 ’hbs‘
app.all('/', function (req, res, next) {
res.render('home', {name: 'xxx'}); // 传入变量数据,也可以设置为 app.locals 的值
})
const server = http.createServer(app);
server.listen('8456', function () {
console.log('\nexpress server start at http://localhost:' + 8456);
})
2. koa 项目文件配置
yarn add koa # 2.4.1
yarn add koa-router # 7.3.0
yarn add koa-views # 6.1.3
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views'); // 用来处理各种模板编译
const path = require('path');
const app = new Koa();
const router = new Router();
// 添加处理模板的中间件
app.use(views(path.join(__dirname, 'views'), {
map: {hbs: 'handlebars'}
}))
router.get('/', async (ctx, next) => {
await ctx.render('home.hbs', {name: 'yyy'}); // 也可以使用 ctx.state 的数据
})
app.use(router.routes());
app.use(router.allowedMethods())
app.listen('7654', function () {
console.log('server in http://localhost:' + 7654);
})
2. API 详解
静态的代码与 HTML 一致
1. 渲染变量
- Handlebars 通过
{{expression}}
双大括号渲染变量,并且变量会经过编码 - 如果不希望编码可以使用
{{{expression}}}
三个大括号
<div>
转码后 {{script}}
</div>
<div>
未转码渲染为标签 {{{script}}}
</div>
2. 渲染列表 each helper
-
this
表示当前上下文,用来访问当前项 -
@index
表示当前列表的索引 -
else
用来定义没有数据时的显示 -
@key
当遍历的是对象时,@key
表示属性名this
为属性值
<ul>
{{#each members}}
<li>member is {{this}},index is {{@index}}</li>
{{else}}
<li>this is empty</li>
{{/each}}
<p> ==== === ==== ===== ===== </p>
{{!-- list: [{name: '', age: ''}] --}}
{{#each list}}
<li>name: {{name}}, age: {{age}}</li>
{{else}}
<li>this is empty</li>
{{/each}}
{{!-- obj: {name: '', age: '', tel: ''} --}}
{{#each obj}}
<li>{{this}} -- {{@key}}</li>
{{/each}}
</ul>
3. 渲染对象 with helper
with 可以改变当前上下文
<div>
{{!-- obj: {name: '', age: '', tel: ''} --}}
{{#with obj}}
<p>{{name}} : {{age}} : {{tel}}</p>
{{/with}}
</div>
4. 条件渲染 if helper
- if true 渲染
- unless false 渲染
<div>
{{!-- name: '' --}}
{{#if name}}
<p>name is {{name}}</p>
{{else}}
<p>empty</p>
{{/if}}
</div>
<div>
{{!-- name: '' --}}
{{#unless name}}
<p>name is {{name}}</p>
{{else}}
<p>empty</p>
{{/unless}}
</div>
5. 路径
Handlebars 支持简单的嵌套路径,便于属性查找
<div>
{{!-- content: {body: {link: '', members: []}} --}}
{{content.body.link}}
{{!-- with 者部分作用是让 members 所在作用域对应的对象位置为 body 内部 --}}
{{#with content.body}}
{{#each members}}
<p>name: {{name}}</p>
<p>currentLink: {{this.link}}</p>
<p>link: {{../link}}</p>
{{/each}}
{{/with}}
</div>
6. 注释
<div>
{{! 这种注释不会出现在编译后的 HTML 中 }}
<!-- 这种注释会出现在编译后的 HTML 中 -->
{{!--
这种注释是多行注释
--}}
</div>
上一篇: 缓存雪崩、缓存穿透、缓存击穿、缓存预热、缓存更新、缓存降级梳理
下一篇: 如何安全地创建嵌套目录?
推荐阅读
-
在Linux系统中安装使用恶意软件扫描工具及杀毒引擎的教程
-
art-template模板引擎在node.js中的使用
-
Handlebars 模板引擎,及在 node 项目中使用
-
在SpringBoot中如何使用模板引擎thymeleaf
-
php smarty模版引擎中变量操作符及使用方法_php模板
-
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例_php实例
-
使用thymeleaf模板引擎在springboot中页面跳转访问不了静态资源问题?
-
在php中配置使用smarty模板引擎
-
在php中配置使用smarty模板引擎
-
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例_php实例