更新于

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

发布于 / 分类: Node / 暂无评论 / 阅读量: 37

安装

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>

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有545条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局