模板引擎

模板引擎：模板引擎是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")headmeta(charset="UTF-8")meta(name="viewport", content="width=device-width, initial-scale=1.0")meta(http-equiv="X-UA-Compatible", content="ie=edge")title Documentstyle..mydiv{width:200px;height:200px;background:red;}bodyh1 我是标题div 我是divdiv(class="mydiv") 我是类名为mydiv的divspan 我是span.mydiv2(style={width:"100px",height:"100px",background:"blue"}) 我是div2#myid 我是id为myid的div//- 我是pug注释//- 我是第一行我是第二行// 我是html注释//我是第一行我是第二行div| hello- let str = "你好"p #{str}p #{data}uleach item,index in usersli 姓名是：#{item.name};年龄是：#{item.age};身高是：#{item.height};索引是：#{index}- for(let i=0;i<4;i++)span 我是循环出来的数据#{i}- let num = 1case numwhen 1p num 是一when 2p num 是二defaultp num 是其他值mixin mydivdiv 我是非常常用的div+mydiv+mydivmixin pet(name,sex)p 这是一只#{name};它的性别是#{sex}+pet("狗狗","公")+pet("猫","母")include common.pugscript(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);

koa + pug模板引擎相关推荐

Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
pug模板引擎基本用法
一.pug模板引擎基本用法 Pug是jade的新版,jade由于商标已被注册,所以更名为pug. 缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代 ...
http+nunjucks模板引擎、koa+nunjucks模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
github项目学习--Vue结合Pug模板引擎
今天看到github上面一个vue项目,用的是Pug模板写的,很多人不知道Pug是什么,但要说到jade,相信很多人反应过来了.没错,Pug前身就叫jade,但是由于商标等问题,改名为Pug,当然,语 ...
lang=pug模板引擎之pug模板语法
今天看到同事的项目 <template lang="pug"> .d-flex.align-center.line-progressdiv(style='width: ...

koa + pug模板引擎

模板引擎

pug模板引擎使用

安装pug

pug常用语法

demo

koa + pug模板引擎相关推荐

最新文章

热门文章