木灵鱼儿

2020年07月27日阅读：808

最后更新：2020/07/28/ 11:11:47

jade模板库安装配置基础高级语法

安装

npm install jade

jade是一个破坏性的模板，根据缩进来规定层级，属性放在圆括号里面，多个属性用逗号分隔。内容写空格后面，而且必须要一行内写。

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!=content

const 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>

文章分类