模板引擎

模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合。
常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；
使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单。

nunjucks +http模块

app.js

const http = require('http');
const fs = require('fs');
const nunjucks = require('nunjucks');const tpl = new nunjucks.Environment(// 模板存放路径new nunjucks.FileSystemLoader('template')
);const server = http.createServer( (req, res) => {let content = '';if(req.url === '/){res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});let tempTitle = 'nunjucks + http';let data =  [{"id": 5,"title": "世界冠军发言紧张到搓手抿嘴 网友：太可爱了0","imgUrl":"http://d.ifengimg.com/w144_h80_q70/x0.ifengimg.com/ucms/2019_43/E188C7C5E98BAFE69BE281B925E99AC4513C833F_w750_h376.jpg","from": "环球网","newTime": "今天 21:58"},{"id": 6,"title": "此时此刻，美军官怂恿日本政府向国民宣扬“中国威胁”0",   "imgUrl":"http://d.ifengimg.com/w144_h80_q70/x0.ifengimg.com/ucms/2019_43/22DB248F5A6D4B1FAD1FAFC67504C0840A02E4C0_w750_h376.jpg","from": "观察者网","newTime": "今天 21:51"}]// content = tpl.renderString(//     fs.writeFileSync('./template/index.html'),//     {//         tempTitle//     }// );content = tpl.render('index.html', {tempTitle,data}); } else {res.writeHead(404, {'Content-Type': 'text/html;charset=utf-8'});content = `<h1>404-什么也没找到</h1>`;}res.write(content);res.end();
});
server.listen(8081);

index.html

<!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><h1>{{tempTitle}}</h1><ul>{%for d in data%}<li>{{d.title}}</li>{%endfor%}</ul>
</body>
</html>

nunjucks模板引擎在koa中的应用

使用nunjucks

const nunjucks = require('koa-nunjucks-2');
app.use(nunjucks({ext:"html",   //指定模板后缀path:path.join(__dirname,'views'), //指定视图目录nunjucksConfig:{trimBlocks:true   //开启转义，防止xss漏洞}
}))

推荐使用”.njk“后缀名

nunjucks的语法使用

变量：{{username}}
注释：

 {# Loop through all the users #}

 {% if hungry %}I am hungry{% elif tired %}I am tired{% else %}I am good!{% endif %}

   <h1>Posts</h1><ul>{% for item in items %}<li>{{ item.title }}</li>{% else %}<li>This would display if the 'item' collection were empty</li>{% endfor %}</ul>

过滤器

{{ foo | replace("foo", "bar") | capitalize }}

模板继承block/extends

定义父类模板

<h1>我是公共模板</h1><div class="leftContent">{% block left %}这边是左侧的内容{% endblock %}{% block right %}这边是右侧的内容{% endblock %}{% block somevalue %}我是一些数据{% endblock %}
</div>

继承父类模板

  {% extends "common.html" %}{% block left %}我是左侧的内容1111{% endblock %}{% block right %}我是右侧的内容11111{% endblock %}{% block somevalue %}{{ super() }}{% endblock %}

Macro（宏标签）可以定义可复用的内容，类似与编程语言中的函数

定义

{% macro pet(animalName,name="小白") %}<div>这里是一只{{animalName}};他的名字是{{name}}</div>{% endmacro %}

调用

 {{pet("狗狗")}}

include/import

include 引入文件

  {% include "footer.html" %}

import 导入文件
- 定义

      {% macro pet(animalName) %}<p>这是一只{{animalName}}</p>{% endmacro %}{% macro book(bookName) %}<p>这是一本书，名字叫{{bookName}}</p>{% endmacro %}

调用

    {% import 'somemodule.html' as fn %}{{fn.pet("狗狗")}}{{fn.book("nodejs从入门到实践")}}

demo

index.js

const Koa = require("koa");
const Router = require("koa-router");
const nunjucks = require("koa-nunjucks-2");
let app = new Koa();
let router = new Router();
app.use(nunjucks({ext:"html", //.njkpath:__dirname+"/views",nunjucksConfig:{trimBlocks:true //防止Xss漏铜；}
}))
router.get("/",async ctx=>{// ctx.body = "hello";await ctx.render("index",{username:"张三",num:2,arr:[{name:"张三",age:20},{name:"李四",age:28}],str:"hello world"});
})
router.get("/son",async ctx=>{await ctx.render("son");
})router.get("/import",async ctx=>{await ctx.render("import");
})
app.use(router.routes())
app.listen(8000);

index.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><h1>我是标题</h1><p>用户名是：{{username}}</p><!-- 我是注释 -->{# 我是nunjucks注释 #}{% if num>3 %}<p>num值大于三</p>{% elseif num<3 %}<p>num值小于三</p>{% else %}<p>num值等于三</p>{% endif %}<ul>{% for item in arr %}<li>姓名是：{{item.name}}；年龄是：{{item.age}};</li>{% endfor %}</ul>{{str | replace("world","世界") | capitalize}}<!-- macro:宏标签 -->{% macro pet(name="狗",sex) %}<p>我是一只{{name}},我的性别是{{sex}}</p>{% endmacro %}{% macro person(name="小明",sex) %}<p>我是{{name}},我的性别是{{sex}}</p>{% endmacro %}{{pet("小狗","公")}}{{pet("小猫","公")}}{% include 'footer.html' %}
</body>
</html>

footer.html

<h1>我是公共底部</h1>

parent.html

<div><p>我是父级模板</p>{% block left %}<p>左边内容</p>{% endblock %}{% block right %}右边内容{% endblock %}{% block somevalue %}一些数据{% endblock %}
</div>

son.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>{% extends 'parent.html' %}{% block left %}我是son里左侧内容{% endblock %}{% block right %}我是son里右侧侧内容{% endblock %}{% block somevalue %}{{super()}}{% endblock %}
</body>
</html>

import.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>{% import 'index.html' as obj %}{{obj.pet("公")}}{{obj.person("男")}}
</body>
</html>

http+nunjucks模板引擎、koa+nunjucks模板引擎相关推荐

Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
koa + pug模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
由浅入深：自己动手开发模板引擎——解释型模板引擎
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
由浅入深：自己动手开发模板引擎——置换型模板引擎（四）
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
由浅入深：自己动手开发模板引擎——置换型模板引擎（三）
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
由浅入深：自己动手开发模板引擎——置换型模板引擎（二）
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
由浅入深：自己动手开发模板引擎——置换型模板引擎（一）
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
由浅入深：自己动手开发模板引擎——解释型模板引擎（二）
受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术.本系列文章将会带您由浅入深的全面认识模板引擎的概念.设计.分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎.关于 ...
php 模板引擎优点,Smarty模板引擎的优点
Smarty模板引擎的优点时间:2015-11-17 对PHP语言熟悉的程序员就会知道有个Smarty的名词,那么这个具体是什么呢?smarty是一个使用PHP编写的PHP模板引擎,是目前业务最著名 ...

http+nunjucks模板引擎、koa+nunjucks模板引擎

模板引擎

nunjucks +http模块

nunjucks模板引擎在koa中的应用

nunjucks的语法使用

demo

http+nunjucks模板引擎、koa+nunjucks模板引擎相关推荐

最新文章

热门文章