介绍

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。

hbs是一个运行在Express上，对Handlerbars模板引擎再次封装的视图引擎。

安装

npm i koa-hbs@next -S

使用

创建一个views文件夹，并在该文件夹下创建.hbs模板文件，然后配置该文件夹目录为视图根目录。

router.js

//导入 hbs
const hbs = require('koa-hbs');

//注册模板引擎中间件并配置
app.use(hbs.middleware({
    viewPath: __dirname + '/views', //视图根目录
    defaultLayout: 'layout', //配置默认布局页面 layout.hbs
    partialsPath: __dirname + '/views/partials', //配置子模板目录
    disableCache: true, //开发阶段不缓存
}));

index.js

router.get('/', async (ctx, next) => {
    //渲染页面
    await ctx.render('index', {
        name: 'holo'
    });
})

index.hbs

在该模板中通过{{}}取值

{{name}}

layout.hbs默认布局页面

在该模板中通过固定写法分别导入其他模板和partials目录下的子模板

{{>nav}}导入partials目录下的nav子模板
{{{body}}}导入主体内容，默认的index.hbs模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    {{!-- 导航栏，插入 partials目录下的子模板 --}}
    {{>nav}}
    {{!-- 主体内容 固定写法，插入子模板主体的固定写法 --}}
    {{{body}}}
    {{!-- 脚部 --}}
    {{>footer}}
</body>

</html>

常用语法

渲染数据

在所有的.hbs模板页面中都能访问到.

    //模拟从mongodb获取模型数据
    const data = {
        title: 'hbs教程',
        subtitle: 'hello hbs',
        htmlStr: '<h2>hello Tom</h2>',
        isShow: true,
        username: 'holo',
        users: [{
            name: 'tom',
            age: 18
        }, {
            name: 'jerry',
            age: 16
        }, {
            name: 'jhon',
            age: 19
        }, {
            name: 'mary',
            age: 20
        }]
    }

    //渲染页面
    await ctx.render('index', data);

插值

{{!-- 插值绑定 --}}
<div>{{subTitle}}</div>
{{!-- 插html --}}
{{{htmlStr}}}
{{!-- 条件判断，下载插件 Handlebars --}}
{{#if isShow}}
    <p>{{username}}，欢迎您！</p>
{{else}}
    <a href="http://localhost:3000/login">请登录</a>
{{/if}}
{{!-- 循环 --}}
<ul>
    {{!-- as 起别名 --}}
    {{#each users as |alias|}}
        <li>{{name}}-{{age}}</li>
    {{/each}}
</ul>

hbs的帮助方法

hbs中对于像Date()这样的数据，无法处理成我们想要的格式，此时，需要通过注册帮助方法来进行处理.

创建一个utils文件夹，在文件夹中创建要添加的帮助方法的js文件 date-helpers.js

const hbs = require('koa-hbs');
//安装并导入  cnpm i moment -S，处理日期插件
const moment = require('moment');
//处理时间的帮助方法
hbs.registerHelper('date', (currentDate, pattern) => {
    if (currentDate) {
        return moment(currentDate).format(pattern);
    } else {
        return '';
    }
})

在router.js入口文件中导入const dateHelpers = require('./utils/date-helpers');
在模板中使用

<ul>
    {{!-- as 起别名 --}}
    {{#each users as |alias|}}
    {{!-- 方法名(date) 数据(birthday) 格式('YYYY/MM/DD') --}}
        <li>{{name}}-{{age}}-{{date birthday 'YYYY/MM/DD'}}</li>
    {{/each}}
</ul>

使用handlebars-helpers

更多帮助方法

安装

cnpm install --save handlebars-helpers

使用

date-helpers.js

//导入
const helpers = require('handlebars-helpers');
//handlebars-helpers库中的所有方法都能使用
helpers.comparison({
    handlebars: hbs.handlebars
})

index.hbs

{{!-- 导入 handlebars-helpers --}}
<div>
    {{!-- a和b都为 true 才显示 --}}
    {{#and a b}}
    a and b is true
    {{/and}}
</div>
<div>
    {{!-- 判断数组中是否有 e --}}
    {{#contains arr 'e'}}
    在数组中
    {{else}}
    不在数组中
    {{/contains}}
</div>

代码搬家

js

模板引擎

{{!-- js --}}
{{#contentFor 'jquery'}}
<script>
    $(function(){
        console.log('content for jquery');
    })
</script>
{{/contentFor}}

在layout默认布局页面中引入

    {{!-- js 块 --}}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    {{!-- 相当于模板引擎中定义的js，搬运到了下面的block中 --}}
    {{#block 'jquery'}}{{/block}}

css

模板引擎

{{!-- css --}}
{{#contentFor 'indexCss'}}
<style>
    p{
        font-size: 30px;
        color: green;
    }
</style>
{{/contentFor}}

在layout默认布局页面中引入

    {{!-- 在引入css文件的位置引入 --}}
    {{#block 'indexCss'}}{{/block}}

10.模板引擎-hbs

介绍

安装

使用

常用语法

hbs的帮助方法

使用handlebars-helpers

安装

使用

代码搬家

js

css