JADE基本使用教學:規則、文字、繼承、匯入、函式寫法

梅問題-JADE基本使用教學:規則、文字、繼承、匯入、函式寫法
  先前已分享過Jade的編譯工具,以及讓Sublime Text也可撰寫Jade,但應該有不少朋友,還是不太明白Jade 到底是啥東東,以及要如何撰寫Jade,所以梅干就整理了一下,平常所用到的Jade功能與大家來分享,其實Jade html本身提供了許多的功能,就跟SCSS一樣,也有繼承、匯入、函式..甚至也有for迴圈與if判斷式,最大差別則在於SCSS寫完編譯後是CSS,而Jade編譯完畢後,則是變成html,透過Jade html可快速的開發網頁的版型,甚至還有繼承模版的功能,這對於平常在製作靜態頁面的朋友,會到相當的方便,因此接下來梅干就一一的來跟大家分享,Jade常用的基本寫法,因此身為網設的朋友,也一塊來看看囉!

Jade基本規則:
Jade的基本規則寫法很簡單,只要向後退一格,就表示該標籤則是在它的下層,基本上它看起來就像是一個樹狀結構,同時只需寫起始標籤就好,當經由編譯工具後,就會自動將標籤給包覆起來,因此以下是簡單的小示範。
basic.jade
doctype html
html
  head
    title helloJade
  body
    h1 Jade Basic
    p 這是Jade基本寫法

basic.html
<!DOCTYPE html>
<html>
  <head>
    <title>helloJade</title>
  </head>
  <body>
    <h1>Jade Basic</h1>
    <p>這是Jade基本寫法</p>
  </body>
</html>

Jade文字(Plain Text):
在Jade中,當要輸入文字時,共有三種方式。
txt-1.jade
第一種寫法:直接在標籤後方加入空一格後,加入文字。
p 這是Jade基本寫法

txt-1.html
<p>這是Jade基本寫法</p>

第二種寫法:在標籤斷行後方加入|。
txt-2.jade
p 
 | 這是Jade基本寫法

txt-2.html
<p>這是Jade基本寫法</p>

第三種寫法:在標籤後方加入.,這種通常運用於多行文字時使用。
txt-3.jade
p.
   這是Jade基本寫法
   支援多行文字
   就不用一直加入|

txt-3.html
<p>這是Jade基本寫法支援多行文字就不用一直加入|</p>

Jade繼承(Extends):
光聽繼承這二字應該完全感受不到它是啥東東,其實它就像Dreamweaver網頁模版的概念,透過已製作好的模版後,再針對活動內容加以修改裡面的元素,如此一來就能讓網頁版型重覆再利用,同時可加快網頁的製作時間。
在製作模版時,當可替換的元素,則用block標示。
tpl.jade
doctype html
html
  head
    block webtitle
      title 無標題
  body
    block h1title
      h1 梅問題講堂
    block postcontent
      div 內容

使用已製作模版,當要引用時,則用extends,並指向佈景名稱,要替換元素時,一樣用block,就可將剛所設定的區塊給替換所需的內容,當不輸入時,就會依照版型的預設值。
extends.jade
extends ./tpl.jade
block webtitle
  title 梅問題講堂
block postcontent
  div.container
    | 內容

extends.html
<!DOCTYPE html>
<html>
  <head>
    <title>梅問題講堂</title>
  </head>
  <body>
    <h1>梅問題講堂</h1>
    <div class="container">內容</div>
  </body>
</html>

Jade匯入(Includes):
匯入這功能,就像一般的php或是apsx一樣,可以將內容直接匯入進來,就像拷貝貼上一樣,而這以前大部分都用iframe來製作,但現有了匯入後,就能將版型拆成多隻後,再把它合併起來,因此當要修改時就更方便了。
head.jade
head
	meta(chartset='utf-8')
	meta(name='description',content='梅問題講堂')
	link(href='style.css',rel='stylesheet')
	title jade includes

footer.jade
#footer
	p copyright (c) 2014-10-31

include.jade
doctype html
html
	body
		header 梅問題
		#content 內容
		include ./footer.jade

include.html
<html>
  <head>
    <meta chartset="utf-8">
    <meta name="description" content="梅問題講堂">
    <link href="style.css" rel="stylesheet">
    <title>jade includes</title>
  </head>
  <body>
    <header>梅問題</header>
    <div id="content">內容</div>
    <div id="footer">
      <p>copyright (c) 2014-10-31</p>
    </div>
  </body>
</html>

Jade函式(Mixins):
而Jade的函式,就跟SCSS一樣,當函式裡面寫了什麼內容,Jade函式則是完整的將內容給列出來,使用上也相當的簡單。
mixins.jade
mixin link(url,linkname,linkclass)
	a(href=url,class=linkclass)=linkname
+link('https://minwt.com','梅問題','btn')
+link('http://google.com','google','btn')

mixins.html
<a href="https://minwt.com" class="btn">梅問題</a>
<a href="http://google.com" class="btn">google</a>

  以上這五大類,是在製作版型中,常會使用到Jade的功能,而最讓梅干感覺到方便的是,它的繼承跟匯入的功能,只要善用這二組功能,就等於在製作一個小型的網站,當按下儲存的同時,所有的文件都會編譯過一次,立即就有更新所有的內容,相當的方便,因此有興趣的朋友不妨也可試試看,有任何問題也歡迎隨時討論。

延伸文章

網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS

網設必備《Prepros》免再安裝其它軟體即可編譯Jade/SASS

《CodePen》開啟瀏覽器就可開發網頁與即使預覽(jade、SCSS、jQuery)

《CodePen》開啟瀏覽器就可開發網頁與即使預覽(jade、SCSS、jQuery)

網設必學《Jade》網頁HTML快速產生器(Sublime Text2)

網設必學《Jade》網頁HTML快速產生器(Sublime Text2)


相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。