jade模板库 安装 配置 基础 高级语法
安装
npm install jadejade是一个破坏性的模板，根据缩进来规定层级，属性放在圆括号里面，多个属性用逗号分隔。内容写空格后面，而且必须要一行内写。
style和class除了传统的写在圆括号里，style支持使用对象键值对书写，class支持数组书写
而且还可以使用编辑器的那种快捷语法创建元素
使用attributes可以写对象键值对的形式书写元素属性
模板语法
html
head
style(href="1.css",rel="stylesheet")
script(src="a.js")
body
a(href="xxx") 官网
a(href="xxx") 官网
div(style={width:"200px",height:"200px"})
div(class=["aaa","left-nav","active"])
div.box
div#div1
div&attributes({title:"aaa",id:"div2"})两种使用方式
jade.render("模板字符");
jade.renderFile("模板字符文件.jade");基本使用
const jade = require("jade");
var str = jade.renderFile("./views/1.jade,{prettr:true});
console.log(str);{prettr:true}表示美化输出，默认是一行显示的。
高级语法
|符号
一般内容是要求写在空格后面，一行显示，如果不想这样写，可以使用|符号
div
| 内容
| 内容.符号
script元素里面书写js的话，使用|符号就有点太麻烦了，所以，使用.符号进行书写。该符号的作用是后面子级的内容全部原样输出。
script.
window.onload = function(){
const btn = document.getElementById("btn");
}include引入
和scss那些差不多效果，引入文件，渲染的时候就直接书写出来的。
script
include a.js#{name}
变量，模板里使用变量名，而jade方法里面传入对应的变量数据
body
div 我的名字: #{name}const jade = require("jade");
console.log(jade.renderFile("./views/1.jade"),{pretty:true,name:"张三"})最后渲染，就会得到：我的名字：张三
在{}花括号里面我们还能进行一些简单的算法，a+b这种
特殊的style和class，这两个可以不用#{}的方式使用变量
body
div(style=json)
div(class=arr)const jade = require("jade");
console.log(jade.renderFile("./views/1.jade"),{pretty:true,json:{width:"200px",height:"200px",background-color:"red"},
arr:["aaa","left","nav"]
})最后渲染：
<body/>
<div style="width:200px;height:200px;background-color:red;"></div>
<div class="aaa left nav"></div>
</body>对于class支持多个，自动合并
body
div(style=json)
div(class=arr class="active")<body/>
<div class="aaa left nav active"></div>
</body>-var a = 5 模板里创建变量
body
-var a = 12;
-var b = 5;
div 结果是: #{a+b}渲染：
<body/>
<div>结果是：17</div>
</body>=简写赋值变量
每次使用变量都要用#{}符号，有点太麻烦了，可以直接使用=简写形式
body
span=a
span=b这两个span和下面的方式是等价的
body
span #{a}
span #{b}for循环输出
利用for循环遍历输出重复元素，不同的内容
body
-for(var i = 0;i<arr.length;i++)
div=arr[i];const jade = require("jade");
console.log(jade.renderFile("./views/1.jade"),{pretty:true,arr:["内容1","内容2","内容3"]})!=渲染变量中的html标签
有时候变量里面会存有html标签，但是jade会自动将标签的字符转换，这样以防止恶意攻击，但是如果你不需要jade自动转码，使用!=
body
div!=contentconst jade = require("jade");
console.log(jade.renderFile("./views/1.jade"),{pretty:true,content:"<h2>测试标题</h2>"})if判断
写法和js里面的写法差不多，jade里面还可以省略书写if的圆括号
body
-var a = 12;
-if(a%2 ==0)
div(style={background:"red"}) 偶数
-else
div(style={background:"green"}) 奇数switch循环
这个和js写法不同，要调整一下
body
-var a = 12;
case a
when 0
div aaa
when 1
div bbb
when 2
div ccc
defaule
|不靠谱用的case开头不是switch，并且原来的case为when，不用书写brank
而且这里没有给js代码加上-短横线，原因是jade有一个特性，如果开头有一个-短横线了，后面跟着的也都是js代码，那么就可以省略这个短横线了。
例子
const jade = require("jade");
const fs = require("fs");
var str = jade.renderFile('./views/index.jade',{pretty:true});
fs.writeFile('./bulid/index.html',str,function(err){
if(err)
console.log("编译失败");
else
console.log("编译成功");
});为了减少服务器每次请求都渲染一次，利用fs模块在第一次渲染时直接写入磁盘一个html文件，静态化处理。
doctype
html
head
meta(charset="utf-8")
title jade测试页面
style.
div {width:100px;height:100px;background:#ccc;text-align:center;line-height:100px;float:left;margin:10px auto;}
div.last {clear:left};
body
-var a = 0;
while a<12
if a%4==0 && a!=0
div.last #{a++}
else
div #{a++}渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jade测试页面</title>
</head>
<style>
div {width:100px;height:100px;background:#ccc;text-align:center;line-height:100px;float:left;margin:10px auto;}
div.last {clear:left};
</style>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="last">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="last">8</div>
<div>9</div>
<div>10</div>
<div>11</div>
</body>
</html>本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
评论