Jade學習筆記

時間 2019-11-16

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

原文原文鏈接

　　初學nodejs，折騰過用handlebars作模板，後來隔了一段從新學習，用了jade，真心簡潔……記錄一些學習筆記，以備複習。css

　　jade是基於縮進的，因此tab與space不能混用；html

　　屬性的設置：link(rel='stylesheet', href='/stylesheets/style.css');node

　　變量的定義：- var users = ["Sally","Joseph","Sam","Mike"] 不要var也能夠；安全

　　內容賦值：p= user 或 p ${user} 前者經常使用於內容就是變量，後者經常使用於拼接'Hello ' + ${user} , p Hello World 則是後者直接爲內容；服務器

　　條件語句：markdown

//case語句
- num = 10
case num
    when 0
        p you have no friends
    when 1 : p you have friends
    default
        p you have #{num} friends

//if語句
- options = { description : 'reference conditionals' }
- flag = false
#user
    if options.description
        h2 Description
        p.description= options.description
    else if flag
        h2 Description
        p.description.
            User has no description,
            why not add one...
    else
        h1 Description
        p.description User has no description.

- opts = { flag : false }
#sum
// ! 與 unless 同理
    if !opts.flag
        h2 Hello!
        p= options.description
    unless opts.flag
        h2 World!
        p= options.description

　　循環語句：app

- for (var i=0;i<3;i++)
    li shit

- var users = ["Sally","Joseph","Sam","Mike"];
- each user in users
    p= user

- addrs = ['BeiJing','GuangZhou','DongGuan']
- for addr in addrs
    p #{addr}

- names = {xing:'ye',ming:'renming'};
- each val,key in names  
    li #{key} : #{val}

　　多行輸出：less

p 
    | You are sleeping.
    | No I just have a rest.
p.
    Second function.
    Just for testing.    
script.
    console.log('Hello world');
    console.log('Hello life');
script
    |console.log('Hello world');
    |console.log('Hello life');

　　註釋：ide

//
　　註釋塊
　　'//-'是服務器端註釋

　　轉義與非轉義：學習

//- 默認和!=是不轉義，不安全（標籤直接執行）； = 則會轉義 安全（標籤轉字符串）
p What's up <escaped> 1
p= 'What s' + ' up <escaped> 2'
p
    = 'What s up <escaped> 3'
p!= 'What s' + ' up <escaped> 4'
p
    != 'What s up <escaped> 5'

　　IE條件註釋：

<!--[if IE 8]>
    p This is IE 8
<![endif]-->

　　extends ：

//- layout.jade
doctype html
html
  head
    block title
      title Default 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>

　　filters　：

filters是編譯時候運行，因此不能使用動態內容，在服務器端編譯。（須要先安裝markdown模塊）

:markdown
  # Markdown

  I often like including markdown documents.
script
  :coffee
    console.log 'This is coffee script'
<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>console.log('This is coffee script')</script>

　　include :

include ./includes/foot.jade 
include:markdown article.md
//能夠是js css等文件 也能夠是Filtered Text

　　Mixins : 建立可重複使用的jade塊

mixin article(title)
    .article
        .article-wrapper
        h1= title
                if block    //block關鍵字，就是塊
                    block
                else
                    p No content provide
+article('Hello world')
+article('Hello DongGuang')
    p This is my 
    p Hometown

mixin link(href, name)
  //- attributes == {class: "btn"}
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

　　直接輸出文本： 前面加 | 例如：|Plian text can include <strong>html<strong> 不然會把Plian當作標籤<Plian></Plian>

　　子集標籤除了縮進，還支持a: span: em 這種寫法，冒號後面必須加空格。

相關標籤/搜索

每日一句

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