nunjucks简单上手

Nunjucks是Mozilla开发的一个纯JavaScript编写的模板引擎，既可以用在Node环境下，又可以运行在浏览器端

安装

npm install nunjucks

使用

渲染字符串

let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret = nunjucks.renderString('hello {{username}}',{username: 'leo'});
console.log(ret);

渲染文件

let nunjucks=require('nunjucks');
nunjucks.configure('views',{autoescape:true});
let ret2 = nunjucks.render('index.html',{name: 'leo'});
console.log(ret2);

express

在express中使用

let express=require('express');
const nunjucks=require('nunjucks');
const path=require('path');
let app=express();
nunjucks.configure(path.resolve(__dirname,'views'),{autoescape: true,express:app
});app.get('/',function (req,res) {res.render('index.html',{name:'leo'});
});
app.listen(8080);

语法

变量

变量会从模板上下文获取，如果你想显示一个变量可以：

{{ username }}

过滤器

过滤器是一些可以执行变量的函数，通过管道操作符 (|) 调用，并可接受参数。

let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
{{ names | join(",") }}
`,{names: ['name1','name2']});
console.log(ret);let ret2=nunjucks.renderString(`
{{word| replace("world", "there") | capitalize}}
`,{word:'hello world'});
console.log(ret2);

if

if 为分支语句，与 javascript 中的 if 类似。

let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
{% if score > 90 %}优
{% elseif score>80 %}良
{% elseif score>70 %}中
{% elseif score >60 %}及格
{% else %}不及格
{% endif %}
`,{score:79});
console.log(ret);

for

for 可以遍历数组 (arrays) 和对象 (dictionaries)。

let nunjucks=require('nunjucks');
nunjucks.configure({autoescape: true});
let ret=nunjucks.renderString(`
<ul>{% for item in items %}<li>{{loop.index}} {{item.id}}:{{item.name}}</li>{% endfor %}
</ul>
`,{items: [{id:1,name:'zfpx1'},{id:2,name:'zfpx2'}]});
console.log(ret);

loop.index: 当前循环数 (1 indexed)
loop.index0: 当前循环数 (0 indexed)
loop.revindex: 当前循环数，从后往前 (1 indexed)
loop.revindex0: 当前循环数，从后往前 (0 based)
loop.first: 是否第一个
loop.last: 是否最后一个
loop.length: 总数

模板继承

模板继承可以达到模板复用的效果，当写一个模板的时候可以定义 “blocks”，子模板可以覆盖他

同时支持多层继承。

index.js

let nunjucks=require('nunjucks');
const path=require('path');
nunjucks.configure(path.resolve(__dirname,'views'),{autoescape:true});
let ret2 = nunjucks.render('login.html',{name: 'leo'});
console.log(ret2);

layout.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>hello {{name}}
</body>
</html>

login.html

{% extends "layout.html" %}{% block content %}登录页面 {{name}}
{% endblock %}

包含

include 可引入其他的模板，可以在多模板之间共享一些小模板，如果某个模板已使用了继承那么 include 将会非常有用。

index.js

let nunjucks=require('nunjucks');
const path=require('path');
nunjucks.configure(path.resolve(__dirname,'views'),{autoescape:true});
let ret2=nunjucks.render('items.html',{items: [{id:1,name:'leo'},{id:2,name:'perter'}]});
console.log(ret2);

items.html

{% extends "layout.html" %}{% block content %}<ul>{% for item in items %}{% include "item.html" %}{% endfor %}  </ul>
{% endblock %}

item.html

<li>{{item.id}}:{{item.name}}</li>

nunjucks简单上手相关推荐

linux脚本量产,可玩性很高的量产键盘、套件 HEAVY SHELL KIRA 96简单上手
1.jpg (45.97 KB, 下载次数: 4) 可玩性很高的量产键盘.套件 HEAVY SHELL KIRA 96简单上手 2021-2-2 14:20 上传HEAVY SHELL Kira 96 ...
【有趣的Python小程序】Python多个简单上手的库制作WalkLattice 走格子游戏（思路篇）上
篇写上一个思路篇,那么今天我们就来完成这一项工作源代码和配套文件链接: https://caiyun.139.com/m/i?135ClY1yWrSKX 提取码:e4pq 复制内容打开中国移动云盘 ...
哈希宝-简单上手教程
闲来无事做点什么没有入场的不建议入场,使用已有设备,赚取额外收益即可随着kuang潮的兴起,越来越多人开始挖kuang,但是"正确的上网姿势".钱包.kuang池.币种等等让人 ...
红米note7找android,红米note7荣耀v20简单上手体验
红米note7&荣耀v20简单上手体验 2019-02-03 12:31:00 49点赞 22收藏 41评论起因是老爸说自己手机不太好用了,让我给买个新的,后来我老婆也表示现在用的小米6屏也 ...
STM32F429I-Discovery学习笔记--(1)简单上手和官方例程的下载与使用
STM32F429I-Discovery学习笔记–(1)简单上手和官方例程的下载与使用到手测试收到开发板后我们要首先检查一下外观有没有磕碰破损,排针是否发生弯折,重要的是看一下JP3和CN4处的跳 ...
python wxpy模块,python wxpy模块 (一)简单上手
简单上手登陆微信: 导入模块 from wxpy import * 初始化机器人,扫码登陆 bot = Bot() 找到好友: 搜索名称含有 "游否" 的男性深圳好友 my_fr ...
简单上手H5+CSS前端3D酷炫特效源代码
简单上手H5+CSS前端3D酷炫特效个人觉得是这个特效是入手自己做比较简单的一个前端特效代码十分少,也很容易看懂,记得点个关注效果图: H5部分 <!DOCTYPE html> & ...
Termux简单上手安装
Termux简单上手 Termux的安装一.更新包 apt update apt upgrade 二. 修改源 export EDITOR=vi apt edit-sources 在vi编辑器里把第 ...
头条号搬运项目，小白简单上手日入200+
头条号搬运项目,小白简单上手日入200+ 大家好,我是独孤求胜,公众号独孤思维.今天是原创日更84篇. 上次分享了一个头条号音频近期收益截图,很多粉丝跑来问我,头条居然还可以赚钱?居然还可以音频赚钱? ...

nunjucks简单上手

安装

使用

express

语法

变量

过滤器

if

for

模板继承

index.js

layout.html

login.html

包含

index.js

nunjucks简单上手相关推荐

最新文章

热门文章