jade 中文文檔

時間 2020-03-24

標籤 jade 中文文檔欄目 Node.js 简体版

原文原文鏈接

文本輸出：css

最簡單的方式：在一個元素打一個空格表示後面的是文本的內容，用時也支持原HTML輸出html

div 這是<b>一段</b>文本

輸出：
<div>這是<b>一段</b>文本</div>

JS代碼標籤形式輸出：(也就是script後面加個. 後面和正常同樣，注意縮進)數組

script.
　　var a = 'demo';
   console.log(a);

輸出：
<script>
var a = 'demo';
console.log(a);
</script>

在模板中直接使用JS：app

用 " - " 號表示開始，但僅在當前這行有效，下一行表示要操做的內容，下面的例子能夠看出 4 個知識點google

1. 多行JS，須要每一行都要打一個 " - " 號spa

2. if 那行不用帶 - 號，由於if是jade的關鍵字，因此不用。code

3. 在文本中如何調用JS變量，須要用 #{ 變量 }xml

四、一個JS模塊的範圍是靠依靠縮進: 下面的li是在for的"子級"，因此是for範圍內，ul和for循環是同級關係，因此不在for的範圍內。htm

- for (var x = 0; x < 3; x++) 
　　-console.log(x); 
　　if(x == 2) 
　　　　span 個人索引是 #{x} 
　　li item ul 我是UL

輸出：
<li>item</li>
<li>item</li>
<li>item</li> 
<ul>我是UL</ul>

css樣式輸出對象

style.
     #id {display:none}
     .abc{display:block}

輸出：
<style>
　　#id {display:none}
　　.abc{display:block}
</style>

屬性寫法：

·描述：用jade寫html的行內屬性，使用()，注意()要緊貼元素名,不然當普通文本處理

a(href='google.com', order_id=123) Google
a(class='button', href='google.com') Google

輸出：
<a href="google.com" order_id=123>Google</a>
<a href="google.com" class="button">Google</a>

class、id屬性的快速寫法：(#表明id，.表明class，能夠連寫)

a#abc.btn.btn-red

輸出：
<a id="abc" class="btn btn-red"></a>

屬性內容用數組寫入

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
a.bing(class=classes class=['bing'])

輸出：
<a class="foo bar baz"></a>
<a class="bing foo bar baz bing"></a>

讀取外部屬性結構：&attributes 是關鍵字，相似JQ的attr

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

輸出：
<div id="foo" data-bar="foo" data-foo="bar"></div>

段落式寫法：

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

輸出：
<input type="checkbox" name="agreement" checked="checked">

屬性真假值寫法：

input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())
input(type='checkbox', checked=undefine)


輸出：
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">
<input type="checkbox">
<input type="checkbox" checked="true">
<input type="checkbox">

行內屬性使用JS：

-var a = {}
-a.status = 0
h1(data =(a.status == 0 ? "零" : "非零"))

輸出：
<h1 data="零"></h1>

模板控制流：

控制流就是各類判斷操做，其中控制流也是模板的關鍵字。控制流有如下4種：

if...else

case ...when...default

while....

each... in ...

下面給出各個例子：

if...else

-var a = false
    if a
        div 存在
    else
        div 不存在

輸出
<div>不存在</div>

case(變量)...when(預想值)...default(全都不中值) (這個相似js 的 switch，只不過是多了個when，case換了個位置)

 - var friends = 1
    case friends
      when 0: p 零
      when 1: p 一
      default: p 其餘

輸出：
<p>一</p>

while(判斷條件)... （當循環）

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

輸出：
<ul>
　　<li>0</li>
　　<li>1</li>
　　<li>2</li>
　　<li>3</li>
</ul>

each... in ... （也就是for循環，使用起來比較方便，主要寫法有3種）

一、沒有key值

ul
  each val in [1, 2]
    li= val

輸出:
<ul>
　　<li>1</li>
　　<li>2</li>
</ul>
ps : 這種是沒有key值

二、循環一個數組

ul
  each val, key in ['zero', 'one', 'two']
    li= key + ': ' + val

輸出
<ul>
　　<li>0: zero</li>
　　<li>1: one</li>
　　<li>2: two</li>
</ul>

三、循環一個對象

ul
　　each val, key in {one:'一',two:'二'}
   li= key + ': ' + val

輸出：
<ul>
　　<li>one: 一</li>
　　<li>two: 二</li>
</ul>

文件引用操做：(jade的文件引用主要有)

includes ... (直接引入)

extends...block...（這個也就是看詞填空）

extends...block append/prepend (向後或向前插入，相似JQ的append/prepend)

includes ... (引入文件，則是填寫路徑，支持css，js等文本)

doctype html
    html
      head
        style
          include style.css
      body
        h1 My Site
        p Welcome to my super lame site.
        script
          include script.js
   
    //- style.css
    h1 { color: red; }
    
    //- script.js
    console.log('You are awesome');

輸出：

<!doctype html> <html> <head> <style> h1 { color: red; } </style> </head> <body> <h1>My Site</h1> <p>Welcome to my super lame site.</p> <script> console.log('You are awesome'); </script> </body> </html>

extends...block...例子：

步驟：一、在layout.jade設好要填的空（設key）

　　　二、在index.jade先引入layout.jade，再把layout.jade的空填上，至關於key和val的關係（設val）

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

//- index.jade
extends ./layout.jade
block title
  title Article Title
block content
  h1 My Article


輸出：
<!doctype html>
<html>
  <head>
    <title>Article Title</title>
  </head>
  <body>
    <h1>My Article</h1>
  </body>
</html>

註釋：(註釋有3種)

// 行註釋

輸出：
<!-- 行註釋 -->

//
    塊註釋
    第二行
輸出：
 <!--
    塊註釋
    第二行
 -->

//- 不輸出到頁面
輸出爲空

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

doctype 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

doctype basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

doctype mobile

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。