我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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>
评论(0)