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

我在人间贩卖青春

已于 2022-11-20 14:32:08 修改

阅读量309

点赞数

分类专栏： node.js 文章标签： node koa nunjucks

于 2022-11-20 00:08:05 首次发布

本文链接：https://blog.csdn.net/weixin_44178305/article/details/127943448

版权

node.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模板引擎

模板引擎：模板引擎是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", //.njk
    path:__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>