浅记 nunjucks - 模板引擎

果冻与布丁

2020-12-28 1,651 阅读2分钟

前言

Nunjucks 是 Mozilla 开发的一个纯JavaScript编写的模板引擎，既可以用在Node环境下，又可以运行在浏览器端。但是，主要还是运行在Node环境下，因为浏览器端有更好的模板解决方案，例如MVVM框架
当数据碰到 html 时，拼接字符串等操作会让我们非常繁琐，挺累的
模板引擎就是基于模板配合数据构造出字符串输出的一个组件
以前的 WEB 项目大多会采用后台 MVC 模式，这样做有利于 SEO，并且与前端请求接口的方式相比，少了个 HTTP 请求，理论上加载速度可能会稍微快些。但是缺点也非常明显，前端写完静态页面，要让后台去「套模板」，每次前端稍有改动，后台对应的模板页面同时也需要改动，非常麻烦

快速上手

安装

npm install nunjucks

配置/初始化 nunjucks

因为 nunjucks 可用于 Node 端，也可以用于浏览器端，所以 nunjucks 需要通过 Environment 初始化

// 引入 nunjucks
const nunjucks = require('nunjucks');

// 根据不同环境
const tpl = new nunjucks.Environment(
    // 在 node 端使用 FileSystemLoader 加载模板
    // 参数：模板存放根路径
    new nunjucks.FileSystemLoader('template')
);

渲染一个字符串

renderString
他会通过模板语法替换内容

tpl.renderString('Hello {{ username }}', { username: 'James' }); // Hello James

渲染加载的模板

render
与 renderString 类似，但如果时用 renderString 需要先加载 html ，再进行替换，render直接省略
参数：
1. 文件路径（基于 FileSystemLoader 根目录下）
2. 需替换的内容
3. 回调函数（错误时会抛错）

tpl.render('1.html', { username: 'James' }); // <h1>{{username}}</h1> -> <h1>James</h1>

模板提供语法

模板语法大多使用 {% %} 的形式
for

var content = tpl.render('1.html', {
    datas: [{
        title: 1
    }, {
        title: 2
    }]
});

<ul>
    {% for data in datas %}
    <li>{{data.title}}</li>
    {% endfor %}
</ul>

更多可查看模板

友情链接：