日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) >

Jade模板引擎教程

發(fā)布時(shí)間:2024/8/1 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Jade模板引擎教程 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、簡(jiǎn)介


jade是超高性能的node JavaScript模板引擎,有著非常強(qiáng)大的API和大量杰出的特性。它主要針對(duì)node的服務(wù)端。


下面是它的一些特性

●?客戶端支持
●?代碼高可讀
●?靈活的縮進(jìn)
●?塊展開(kāi)
●?混合
●?靜態(tài)包含
●?屬性改寫(xiě)
●?安全,默認(rèn)代碼是轉(zhuǎn)義的
●?運(yùn)行時(shí)和編譯時(shí)上下文錯(cuò)誤報(bào)告
●?命令行下編譯jade模板
●?html 5 模式 (使用 !!! 5 文檔類型)
●?在內(nèi)存中緩存(可選)
●?合并動(dòng)態(tài)和靜態(tài)標(biāo)簽類
●?可以通過(guò) filters 修改樹(shù)
●?模板繼承
●?原生支持 Express JS
●?通過(guò) each 枚舉對(duì)象、數(shù)組甚至是不能枚舉的對(duì)象
●?塊注釋
●?沒(méi)有前綴的標(biāo)簽
●?AST filters
●?過(guò)濾器
? ? ●?:sass 必須已經(jīng)安裝sass.js
? ? ●?:less 必須已經(jīng)安裝less.js
? ? ●?:markdown 必須已經(jīng)安裝markdown-js 或者node-discount
? ? ●?:cdata
? ? ●?:coffeescript 必須已經(jīng)安裝coffee-script
●?Vim Syntax
●?TextMate Bundle
●?Screencasts
●?html2jade 轉(zhuǎn)換器


jade中,分清什么是靜態(tài)的,什么是動(dòng)態(tài)的


?●? 靜態(tài)的原封不動(dòng)的表現(xiàn)在html中,動(dòng)態(tài)的會(huì)轉(zhuǎn)換表現(xiàn)
?? js代碼會(huì)執(zhí)行,js表達(dá)式會(huì)取值,標(biāo)簽會(huì)轉(zhuǎn)換,文本直接輸出
?? ? ? ??○?標(biāo)簽后是文本,文本可以單行和多行
?? ? ? ??○?文本中可嵌入jade表達(dá)式;使用#{},里面是后臺(tái)js表達(dá)式
?? ? ? ??○?-開(kāi)頭的,隨后是后臺(tái)js代碼
? ? ? ? ?○?幾個(gè)特定的jade關(guān)鍵詞,例如循環(huán)控制等,隨后的都是后臺(tái)表達(dá)式
? ? ? ? ?○?html標(biāo)簽緊跟著=,后面的是js表達(dá)式


jade中,分清什么是標(biāo)簽、文本和代碼


??jade的任何一段文本,都要區(qū)分是標(biāo)簽、文本和代碼
??jade以-開(kāi)頭的,隨后是后臺(tái)js代碼
??jade的格式總體是標(biāo)簽+文本,有三種
? ? ?○?標(biāo)簽(縮進(jìn)) :隨后的縮進(jìn)是文本
? ? ?○?標(biāo)簽=(縮進(jìn)):隨后的縮進(jìn)是js表達(dá)式
? ? ?○?標(biāo)簽. : 隨后的多行縮進(jìn)都是文本,不必使用|
jade的多行文本每行以|開(kāi)頭
jade的多行文本,每行又可以交叉使用=或者-(有bug)


二、安裝jade


通過(guò) npm安裝:


npm install -g jade




執(zhí)行上面的命令,全局安裝。



三、一個(gè)簡(jiǎn)單的例子



在D盤(pán)下創(chuàng)建一個(gè)myproject目錄。


通過(guò)命令行進(jìn)入該目錄下執(zhí)行: ?express 創(chuàng)建一個(gè)express項(xiàng)目(默認(rèn)創(chuàng)建的是jade的)




完整的目錄結(jié)構(gòu):




package.json的內(nèi)容為


{"name": "myproject","version": "0.0.0","private": true,"scripts": {"start": "node ./bin/www"},"dependencies": {"body-parser": "~1.15.2","cookie-parser": "~1.4.3","debug": "~2.2.0","express": "~4.14.0","jade": "~1.11.0","morgan": "~1.7.0","serve-favicon": "~2.3.0"} }
views/index.jade的內(nèi)容為


extends layoutblock contenth1= titlep Welcome to #{title}

測(cè)試:

先安裝依賴:npm install




再運(yùn)行項(xiàng)目: npm start




訪問(wèn):?http://localhost:3000/




修改index.jade為


doctype htmlheadtitle= pageTitlescript(type='text/javascript').function showCityEx(city){return city + " & " + city;}body//--@test轉(zhuǎn)義;以下幾個(gè)字符有特殊意義;如果當(dāng)做文本,必須使用|轉(zhuǎn)義//--@test轉(zhuǎn)義1: - ,jade代碼的開(kāi)頭//--@test轉(zhuǎn)義2: | ,jade多好文本的開(kāi)頭//--@test轉(zhuǎn)義3: / ,jade注釋的開(kāi)頭//--@test轉(zhuǎn)義4: = ,jade代碼表達(dá)式的開(kāi)頭|- i begin at "-" (use |-prefix in jade)<br/>||- i begin at "|"(use |-prefix in jade)<br/>|//--i begin at "//"(use |-prefix in jade)<br/>|=i begin at "="(use |-prefix in jade)h1 #{h1}#container.colif name=='liuchuanchuan'p You are owner!elsep You are #{name},and you are not owner!//--@test_后臺(tái)js代碼,特別注意縮進(jìn)相當(dāng)于括號(hào),以 - 開(kāi)頭---var a=new Array() -for(var i=0; i<citys.length; i++) - a.push(citys[i])- a[a.length-1] = a[a.length-1] + "_1" p old:#{a.length},#{a}-a.push('qingdao')p new:#{a.length},#{a}p|I had ever goto lots of citys(more than #{a.length}).<br/>-a.push('chengdu') //--這里的縮進(jìn)影響是否會(huì)新添加一個(gè)<P>;這種語(yǔ)法有點(diǎn)扯淡=(a.length+10) + " "|is my dream!<br/>|I had ever goto lots of citys(#{a}).|I like to travel!|do you?p.i had go top= "now length = " + a.length|<br/>hahaulfor city in citysli= cityelseli sorry, no city!//--@test_后臺(tái)jade代碼,特別注意循環(huán)的使用--p this is an example of table.table(border=1)trth helloth world,citys.count=#{cscores.length + 3}th countfor city,index in citystrtd= indextd welcome to #{city}(#{city.substr(0,4)})td= cscores[index]div over!

index.js修改為


var express = require('express'); var router = express.Router(); var jade = require('jade');// Compile a function var fn = jade.compile('hello world #name', {});// Render the function var html = fn({name:'liu'}); console.log(html);// 渲染字符串 var rtn = jade.render('.csser.com hello,#{name}', { name: 'liuchuanchuan' }); console.log(rtn);// 渲染文件 var city_names = ['wuhan','tianjin','beijing','shanghai' ];var city_scores = ['60','62','80','70' ];/* GET home page. */ router.get('/', function(req, res, next) {res.render('index', { citys: city_names, cscores: city_scores, name:'liuchuanchuan',h1:'who are you'}); });module.exports = router;

重新啟動(dòng)項(xiàng)目,刷新瀏覽器,輸入如下




完整的demo:?http://download.csdn.net/detail/u011781521/9707783


四、Jade語(yǔ)法規(guī)則


官方文檔:?https://pugjs.org/api/getting-started.html


文檔聲明和頭尾標(biāo)簽的定義在jade中直接使用向下面的語(yǔ)法


1.Doctype 文檔類型


常用的有這么幾種格式


doctype html ??

生成的是這種類型 <!DOCTYPE html>


doctype xml ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

<?xml version="1.0" encoding="utf-8" ?>

doctype transitional ? ? ? ? ? ? ? ? ? ? ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">


doctype strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


doctype frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


2.標(biāo)簽


默認(rèn)情況下,在一行的開(kāi)頭的文本(或空格后)代表了一個(gè)HTML標(biāo)簽??s進(jìn)標(biāo)記嵌套,形成樹(shù)形結(jié)構(gòu)的HTML。


在 Jade 中創(chuàng)建一個(gè)列表:


ul
? li Item A
? li Item B
? li Item C


生成的 HTML:


<ul>
? <li>Item A</li>
? <li>Item B</li>
? <li>Item C</li>
</ul>


像這種img 標(biāo)簽必須被正確地關(guān)閉


img


生成的 HTML:


<img/>


2.1塊擴(kuò)張


為了節(jié)省空間,jade為嵌套標(biāo)簽提供了一個(gè)內(nèi)聯(lián)的語(yǔ)法。


a: img


生成的 HTML:


<a><img/></a>


2.2自關(guān)閉的標(biāo)簽


標(biāo)簽,比如img,元,和鏈接會(huì)自動(dòng)自閉(除非你使用XML文檔類型)。你也可以顯式地自我關(guān)閉標(biāo)簽通過(guò)附加/字符。


foo/
foo(bzr='baz')/

生成的 HTML:


<foo/>
<foo bar= />


3.注釋


Jade 支持兩種注釋:單行注釋和多行注釋。每種注釋支持兩種模式:輸出到源文件和不輸出到源文件。


在 Jade 中創(chuàng)建一個(gè)單行輸出注釋和單行不輸出注釋:


// 這個(gè)單行注釋會(huì)輸出到編譯后的文件中
p 單行輸出注釋


//- 這個(gè)單行注釋不會(huì)輸出到編譯后的文件中
p 單行不輸出注釋


生成的 HTML:


<!-- 這個(gè)單行注釋會(huì)輸出到編譯后的文件中-->
<p>單行輸出注釋</p>
<p>單行不輸出注釋</p>


由上可見(jiàn),輸出和不輸出的差別就在于多了一個(gè) -


相比起單行注釋,多行注釋的內(nèi)容要在注釋符號(hào)的下一行,以相同的縮進(jìn)來(lái)編寫(xiě)。多行注釋的輸出和不輸出模式和單行注釋相同,需要使用 - 標(biāo)記:


//?
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
p 多行輸出注釋


//-?
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
p 多行不輸出注釋


生成的 HTML:


<!--?
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
-->
<p>多行輸出注釋</p>
<p>多行不輸出注釋</p>



4.屬性


在 Jade 中填寫(xiě)屬性,基本上和 HTML 保持了一致:


input(type='checkbox', checked)
input(
? type='checkbox'
? name='agreement'
? checked
)


生成的 HTML:


<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>


還可以根據(jù)條件設(shè)置屬性


- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About


生成的 HTML:


<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active">


對(duì)于頻繁使用到的類名和 ID 名,Jade 提供了兩種字面量:類名字面量和 ID 字面量——非常類似 Emmet 的用法。

如果不在字面量前邊指定標(biāo)簽名,則默認(rèn)使用 div :



.link
a.link
#button
a#button


生成的 HTML:


<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>


另一個(gè)常常會(huì)被 JavaScript 修改的屬性就是 style 。為了更方便地修改該屬性,Jade 接收一個(gè)類似 JavaScript 對(duì)象類型的參數(shù):


a(style={color: 'red', background: 'green'})


生成的 HTML:


<a style="color:red;background:green"></a>


為了更方便地添加其他自定義屬性,jade 特意增加了一個(gè)語(yǔ)法格式 &attributes:


- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)


生成的 HTML:


<div id="foo" data-bar="foo" data-foo="bar"></div>


5.文本


Jade 支持三種文本輸出方式:單行文本、管道文本和多行文本:


// 單行文本內(nèi)容直接跟在標(biāo)簽名后面
p 這里是單行文本內(nèi)容
// 管道文本使用管道符
p?
| 這是一行管道文本,行數(shù)無(wú)限制
| 這是一行管道文本,行數(shù)無(wú)限制
| 這是一行管道文本,行數(shù)無(wú)限制
| ……
// 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)
p.
這是多行文本,注意縮進(jìn)
這是多行文本,注意縮進(jìn)
這是多行文本,注意縮進(jìn)


生成的 HTML:


<!-- 單行文本內(nèi)容直接跟在標(biāo)簽名后面-->
<p>這里是單行文本內(nèi)容</p>
<!-- 管道文本使用管道符-->
<p>
? 這是一行管道文本,行數(shù)無(wú)限制
? 這是一行管道文本,行數(shù)無(wú)限制
? 這是一行管道文本,行數(shù)無(wú)限制
? ……
</p>
<!-- 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)-->
<p>
? 這是多行文本,注意縮進(jìn)
? 這是多行文本,注意縮進(jìn)
? 這是多行文本,注意縮進(jìn)
</p>


6.代碼嵌入


將 JavaScript 嵌入到 Jade 中,一共有三種方法。第一種方式是使用 - ,代碼中的特殊字符不會(huì)被轉(zhuǎn)義:


- for (var x = 0; x < 3; x++)
? li <a></a>


生成的 HTML:


<li><a></a></li>
<li><a></a></li>
<li><a></a></li>


第二種方法是使用 = ,代碼中的特殊字符將會(huì)被轉(zhuǎn)義:


p
? = 'This code is <escaped>!'


生成的 HTML:


<p>This code is <escaped>!</p>


第三種方法是使用 != ,代碼中的特殊字符不會(huì)被轉(zhuǎn)義:


p
? = 'This code is <escaped>!'


生成的 HTML:


<p>This code is <escaped>!</p>


7.條件語(yǔ)句


if ... else if ... else 這個(gè)經(jīng)典的條件判斷,它也是 Jade 最基本的條件語(yǔ)句:


- var user = { description: 'foo bar baz' }
- var authorised = false
#user
? if user.description
? ? h2 Description
? ? p.description= user.description
? else if authorised
? ? h2 Description
? ? p.description.
? ? ? User has no description,
? ? ? why not add one...
? else
? ? h1 Description
? ? p.description User has no description


生成的 HTML:


<div id="user">
? <h2>Description</h2>
? <p class="description">foo bar baz</p>
</div>


此外,Jade 還提供了一個(gè) unless 條件語(yǔ)句。如果說(shuō) if 可以通過(guò)判斷 給定條件是否符合要求 來(lái)執(zhí)行下一步,那么 unless 完全是相反的一件事,它會(huì)判斷 給定條件是否不符合要求 ,如果不符合,就執(zhí)行下一步。


- var con = false
unless con
? p Hello, World


生成的 HTML:


<p>Hello, World</p>


8.分支語(yǔ)句


當(dāng)需要 if 判斷的條件過(guò)多時(shí),其他語(yǔ)言會(huì)提供類似 switch 的分支判斷語(yǔ)句。在 Jade 中,也提供了類似的語(yǔ)法—— case :


- var friends = 10
case friends
? when 0
? ? p you have no friends
? when 1
? ? p you have a friend
? default
? ? p you have #{friends} friends


生成的 HTML:


<p>you have 10 friends</p>


在 Jade 中并沒(méi)有提供類似 break 的語(yǔ)法,對(duì)于所有的條件默認(rèn)只有一種輸出結(jié)果,如果沒(méi)有符合條件的就輸出 defualt 中的內(nèi)容。但是,有一個(gè)特例:


- var friends = 0
case friends
? when 0
? when 1
? default
? ? p you have #{friends} friends


生成的 HTML:


<p>you have very 0 friends</p>


9.遍歷語(yǔ)句


Jade 使用 each 對(duì)數(shù)組和對(duì)象遍歷,用法與 JavaScript 大同小異。


// 遍歷數(shù)組
ul
? each val, index in ['zero', 'one', 'two']
? ? li= index + ': ' + val


// 遍歷對(duì)象
ul
? each val, index in {1:'one',2:'two',3:'three'}
? ? li= index + ': ' + val


生成的 HTML:


<!-- 遍歷數(shù)組-->
<ul>
? <li>0: zero</li>
? <li>1: one</li>
? <li>2: two</li>
</ul>
<!-- 遍歷對(duì)象-->
<ul>
? <li>1: one</li>
? <li>2: two</li>
? <li>3: three</li>
</ul>



10.循環(huán)語(yǔ)句


Jade 使用 while 實(shí)現(xiàn)循環(huán),用法還是中規(guī)中矩的與 JavaScript 相似:


- var n = 0
ul
? while n < 4
? ? li= n++


生成的 HTML:


<ul>
? <li>0</li>
? <li>1</li>
? <li>2</li>
? <li>3</li>
</ul>


11.includes


實(shí)現(xiàn)高度復(fù)用的另一種方式就是將代碼片段保存到不同文件中,然后在需要的地方導(dǎo)入這些片段,為此,Jade 提供了 include 指令,下面是一個(gè) index 頁(yè)面:


//- index.jade
doctype html
html
? include ./includes/head.jade
? body
? ? h1 My Site
? ? p Welcome to my super lame site.
? ? include ./includes/foot.jade


head 代碼片段:


//- includes/head.jade
head
? title My Site
? script(src='/javascripts/jquery.js')
? script(src='/javascripts/app.js')


footer 代碼片段:


//- includes/foot.jade
#footer
? p Copyright (c) foobar


生成的 HTML:


<!doctype html>
<html>
? <head>
? ? <title>My Site</title>
? ? <script src='/javascripts/jquery.js'></script>
? ? <script src='/javascripts/app.js'></script>
? </head>
? <body>
? ? <h1>My Site</h1>
? ? <p>Welcome to my super lame site.</p>
? ? <div id="footer">
? ? ? <p>Copyright (c) foobar</p>
? ? </div>
? </body>
</html>


12.繼承

Jade 中使用 extends 來(lái)繼承代碼片段,與 include 本本分分地引用代碼段不同,繼承可以修改代碼片段。
首先,在 layout 頁(yè)面使用 block 標(biāo)識(shí)符,設(shè)置一個(gè)可修改的代碼片段,緊跟 block 標(biāo)識(shí)符之后的是該代碼片段的名字:


//- layout.jade
doctype html
html
? head
? ? block title
? ? ? title Default title
? body
? ? block content


然后,在 index 頁(yè)面繼承 layout ,并可以根據(jù)代碼片段的名字修改相關(guān)代碼:


//- index.jade
extends ./layout.jade


block title
? title Article Title


block content
? h1 My Article


生成的 HTML:


<!doctype html>
<html>
? <head>
? ? <title>Article Title</title>
? </head>
? <body>
? ? <h1>My Article</h1>
? </body>
</html>


上述這種繼承方式,會(huì)抹除原來(lái)代碼片段的部分,如果想要追加代碼片段,可以使用 append 和 prepend 指令。 append 用于在原有代碼片段之后追加, prepend 用于在原有代碼片段之前追加。一個(gè)初始頁(yè)面:


//- layout.jade
html
? head
? ? title Layout
? body
? ? block content
? ? ? p Hello


使用 append :


extend layout


block append content
? ? p World


生成的 HTML:


<html>
? <head>
? ? <script src="/vendor/jquery.js"></script>
? ? <script src="/vendor/caustic.js"></script>
? </head>
? <body>
? ? <p>Hello</p>
? ? <p>World</p>
? </body>
</html>


使用 prepend :


extend layout

block prepend content
? ? p World


生成的 HTML:


<html>
? <head>
? ? <script src="/vendor/jquery.js"></script>
? ? <script src="/vendor/caustic.js"></script>
? </head>
? <body>
? ? <p>World</p>
? ? <p>Hello</p>
? </body>
</html>



總結(jié)

以上是生活随笔為你收集整理的Jade模板引擎教程的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。