模板引擎

2023-10-04 01:41| 来源: 网络整理| 查看: 265

模板引擎一、模板引擎是什么？二、pug模板引擎1. 安装插件2. 注释3. 转意4. 定义变量5. 使用变量6. 循环判断- 方法一：each in- 方法二: for- 方法三： case when 7. 混入- 混入模块及使用-混入类函数及使用 8. include 混入文件三、nunjucks模板引擎1. 下载插件2. 注释3. 判断语句4. 循环语句5. 过滤器6. 宏标签函数功能7. import 文件里的macro部分8. include 引入其它文件9. extends 继承模板

一、模板引擎是什么？

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

二、pug模板引擎 1. 安装插件创建项目命令行 npm i koa koa-router koa-views pug -S

下载需要用的插件 koa koa-router koa-views pug

index.js

const Koa = require('koa') const Router = require('koa-router') const views = require('koa-views') let app = new Koa() let router = new Router() app.use(views(__dirname + '/views', { map: { html: 'pug' } })) router.get('/',async ctx => { let users = [{name:'joy', age: 18},{name:'tom', age: 20},{name:'sam', age: 15}] // 第二个参数用来传参 await ctx.render('index.pug',{ data: 'hello world', users }) }) app.use(router.routes()) app.listen(8800) koa是基于nodejs的web框架__dirname表示当前目录

views/index.pug

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 style. .mybox{ width: 100px; height: 100px; background-color: red; } body h1 我是标题 div(class='mybox') hello world span you know me .yellowBox(style={width:'200px',height:'200px',background:'yellow'}) yellowbox 缩进表示一个小模块空格用来分割标签名和内容style=({width:'200px'})用来写行间样式style标签样式，后面要加.直接类名，默认生成指定类名的div标签 2. 注释 //- 我是pug的注释 //- 我是pug的第一行注释我是pug的第二行注释 // 我是html的注释 // 我是html的第一行注释我是html的第二行注释 //- 表示不显示在html上，只显示在pug内// 表示显示也显示在html上 3. 转意 div | hello 使用| 4. 定义变量 - let str = '你好' -来定义变量 5. 使用变量 p #{str} 使用插值表达式来使用变量 6. 循环判断 - 方法一：each in ul each item, index in users li myname is #{item.name},im #{item.age} years old - 方法二: for -for(let i = 0; i name}, it is #{sex} //- 使用类函数 +pet('dog', 'girl') +pet('cat', 'boy') 8. include 混入文件 include 1.html 三、nunjucks模板引擎

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会更好 // 路径是当前文件夹下面的views文件 path: __dirname + '/views', nunjucksConfig:{ trimBlocks: true // 防止Xss漏洞 } })) router.get('/', async ctx => { // 传参 await ctx.render('index',{ username: 'joy', num: 4, person: [{ name: 'joy', age: 17 },{ name: 'tom', age: 15 }], str: 'hello world' }) //ctx.body='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发生改变，但是index.js没有发生改变，刷新页面不会更新，因为nodemon只监听了index.js，需要重启nodemon才能更新数据 1. 下载插件

命令行

npm i koa koa-router koa-nunjucks-2 -S 2. 注释

nunjucks注释

{# 我是nunjucks注释 #}

html注释

3. 判断语句 {% if num % else %} num equal to 3 {% endif%} 4. 循环语句 {% for item in person%} my name is {{item.name}}, im {{ item.age }} years old {% endfor%} 5. 过滤器 {{ str | replace('world','世界') | capitalize}}

过滤器可以自己写，也可以用官方定义的，可以连写

6. 宏标签函数功能 {% macro pet(name='monkey', sex) %} its {{ name }}, it is a {{ sex }} {% endmacro %} {{ pet('dog', 'girl') }} {{ pet('cat', 'boy') }}

可以定义默认值，name='monkey'

7. import 文件里的macro部分

import.html

{% import 'index.html' as obj%} {{ obj.pet('girl')}}

在这里插入图片描述

8. include 引入其它文件 {% include '1.html' %}

1.html

hello world 9. extends 继承模板

parent.html

{% block left %} 左边内容 {% endblock %} {% block right %} 右边内容 {% endblock %} {% block someValue %} something {% endblock %}

son.html

{% extends 'parent.html' %} {% block left%} 我是son的左边部分 {% endblock %} {% block right%} 我是son的右边部分 {% endblock %} {% block someValue %} {{ super() }} {% endblock %}

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章