koa + pug模板引擎
卓俊晖
模板引擎
- 模板引擎：模板引擎是web应用中动态生成html的工具，负责将数据和模板结合。
- 常见模板引擎有：ejs、jade（现更名为pug）、Handlebars、Nunjucks、Swig等；
- 使用模板引擎可以是项目结构更加清晰，结构更加合理，让项目维护变得更简单；
pug模板引擎使用
安装pug
npm i pug -g
pug常用语法
- pug语法：通过缩进关系，代替以往html的层级包含关系，注意要统一使用tab或者空格缩进，不要混用
- 内联书写层级,a: img
- style属性：div(style={width:”200px”,color:”red”})
- 使用”-”来定义变量，使用“=”把变量输出到元素内；
- 通过 #{variable} 插 相应的变量值
- html 元素属性通过在标签右边通过括号包含（可以通过判断来添加）
- 文本通过在 字前 添加竖线符号“|”可让 jade 原样输出内容 在html标签标记后 通过空格隔开 本内容 在html标签标记后通过添加引号“.”添加块级文本
- 注释：可以通过双斜杠进 注释，jade有3种注释 式，可以分别对应输出html 注释、 输出html注释、块级html注释
- 循环：each val in [1,2,3]
- 判断语句：”if else” case when default
- mixin：混合模式
- include common/footer.pug 通过include引入外部文件
demo
- index.pug
<!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
style.
.mydiv{
width:200px;
height:200px;
background:red;
}
body
h1 我是标题
div 我是div
div(class="mydiv") 我是类名为mydiv的div
span 我是span
.mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2
#myid 我是id为myid的div
//- 我是pug注释
//-
我是第一行
我是第二行
// 我是html注释
//
我是第一行
我是第二行
div
| hello
- let str = "你好"
p #{str}
p #{data}
ul
each item,index in users
li 姓名是：#{item.name};年龄是：#{item.age};身高是：#{item.height};索引是：#{index}
- for(let i=0;i<4;i++)
span 我是循环出来的数据#{i}
- let num = 1
case num
when 1
p num 是一
when 2
p num 是二
default
p num 是其他值
mixin mydiv
div 我是非常常用的div
+mydiv
+mydiv
mixin pet(name,sex)
p 这是一只#{name};它的性别是#{sex}
+pet("狗狗","公")
+pet("猫","母")
include common.pug
script(type="text/javascript").
console.log(1111);
- common.pug
h2 我是公共模板
- 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=>{
// ctx.body = "hello";
let users = [{name:"张三",age:20,height:"178cm"},{name:"李四",age:25,height:"179cm"},{name:"王五",age:26,height:"180cm"}]
await ctx.render("index.pug",{
data:"我是数据",
users
});
});
app.use(router.routes());
app.listen(3000);
类似资料：