Jade入門學習筆記

時間 2019-11-16

標籤 jade 入門學習筆記欄目 Node.js 简体版

原文原文鏈接

jade是超高性能的node JavaScript模板引擎，有着很是強大的API和大量傑出的特性。它主要針對node的服務端。因爲商標的緣由，改成Pug，哈巴狗。Pug有它自己的缺點——可移植性差，調試困難，性能並不出色，但使用它能夠加快開發效率。javascript

標籤嵌套

使用縮進來表示標籤間的嵌套關係，這樣能夠構建一個 HTML 代碼的 樹狀結構 語法html

ul
    li item A
    li item B

爲了節省空間， Pug 嵌套標籤提供了一種 內聯式 語法java

a: img

Pug知道哪些元素是自閉合的，爲了語法的完整性，也能夠經過在標籤後加上 / 來明確聲明此標籤是 自閉合 的node

img
img/
input 
input/

HTML5的 DOCTYPE 書寫以下jquery

doctype html

固然，也能夠自定義一個 doctype 字面值。json

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"

內容

Pug 提供了三種經常使用的方式來放置內容緩存

【管道文本】
這是最簡單的向模板添加純文本的方法。只須要在每行前面加一個 | 字符，這個字符在類 Unix 系統下經常使用做「管道」功能，所以得名

| 純文本固然也能夠包括 <strong>HTML</strong> 內容。
p
  | 但它必須單獨起一行。

【標籤內文本】
這其實是最多見的狀況，文本只須要和標籤名隔開一個空格便可.

p 純文本 <strong>HTML</strong> 內容

【嵌入大段文本】
有時可能想要寫一個大段文本塊。好比嵌入腳本或者樣式。只需在標籤後面接一個 .便可。注意：不能有空格

script.
    if (usingPug)
        console.log('請用Pug')
    else 
        console.log('傻不拉幾')

屬性

標籤屬性和 HTML 語法很是類似，它們的值就是普通的 JavaScript 表達式。能夠用逗號做爲屬性分隔符，也能夠不加逗號
若是有不少屬性，能夠把它們分幾行寫
若是有一個很長的屬性，而且JavaScript運行時引擎支持ES2015模板字符串，能夠使用它來寫屬性值

// 1. 
a(href='baidu.com') 百度
= '\n'
a(class='button' href='baidu.com') 百度
= '\n'
a(class='button', href='baidu.com') 百度

// 2. 
input(
  type='checkbox'
  name='agreement'
  checked
)

// 3. 
input(data-json=`
  {
    "很是": "長的",
    "數據": true
  }
`)

默認狀況下，全部的屬性都通過轉義（即把特殊字符轉換成轉義序列）來防止諸如跨站腳本攻擊之類的攻擊方式。若是要使用特殊符號，須要使用 != 而不是 =

注意：未經轉義的緩存代碼十分危險。必須正確處理和過濾用戶的輸入來避免跨站腳本攻擊app

div(escaped="<code>")
div(unescaped!="<code>")

在Pug中，布爾值屬性是通過映射的，這樣布爾值(true和false)就能接受了。沒有指定值時，默認是true

input(type='checkbox' checked)
= '\n'
input(type='checkbox' checked=true)
= '\n'
input(type='checkbox' checked=false)
= '\n'
input(type='checkbox' checked=true.toString())

style（樣式）屬性能夠是一個字符串（就像其餘普通的屬性同樣）還能夠是一個對象

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

標籤嵌入

[標籤名(標籤屬性) 標籤內容]

空格調整
Pug 默認會去除一個標籤先後的全部空格，而標籤嵌入功能能夠在須要嵌入的位置上處理先後空格

p
  | 若是我不用嵌入功能來書寫，一些標籤好比
  strong strong
  | 和
  em em
  | 可能會產生意外的結果。
p.
  若是用了嵌入，在 #[strong strong] 和 #[em em] 旁的空格就會讓我舒服多了。

效果，前者strong先後無空格，後者有空格。（啦strong啦啦，啦 strong 啦）性能

註釋

// 註釋
//- 註釋不輸出，即不會出如今結果中
// 
    塊註釋
    繼續寫塊註釋

ps：全部以 < 開頭的行都會被看成純文本，所以直接寫一個 HTML 風格的條件註釋也是沒問題的網站

<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->

使用=或#{}來進行變量的真實值替換
在 #{ 和 } 裏面的代碼也會被求值、轉義，並最終嵌入到模板的渲染輸出中.Pug 足夠聰明來分辨到底哪裏纔是嵌入表達式的結束，因此不用擔憂表達式中有 }，也不須要額外的轉義;使用!{}嵌入沒有轉義的文本進入模板中

變量

變量來源有三種，分別是pug文件內部、命令行參數和外部JSON文件。

// 文件內部
-var val = "aaaa";
p= val

// 命令行
pug test.pug -P -w --obj '{val: "fldasj"}'

// 外部json文件
pug test.pug -P -w -O test.json

include

包含（include）功能容許把另外的文件內容插入進來,被包含的若是不是 Pug 文件，那麼就只會看成文本內容來引入

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 個人網站
    p 歡迎來到我這簡陋得不能再簡陋的網站。
    include includes/foot.pug

//- includes/head.pug
head
  title 個人網站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
  
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

繼承

Pug 支持使用 block 和 extends 關鍵字進行模板的繼承。一個稱之爲「塊」（block）的代碼塊，能夠被子模板覆蓋、替換。這個過程是遞歸的。

複製代碼
//- layout.pug
html
  head
　　 meta(charset="UTF-8")
    title 個人站點 - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p 一些頁腳的內容

//- page-a.pug
extends layout.pug

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  - var pets = ['貓', '狗']
  each petName in pets
    include pet.pug

//- pet.pug
p= petName  // 或者 p #{petName}

值得注意的是，由於這裏的 foot 塊沒有被重定義，因此會依然輸出「一些頁腳的內容」