模板引擎jade學習

時間  2020-03-24
標籤 模板 引擎 jade 學習 欄目 Node.js 简体版
原文   原文鏈接

語言參考

標籤列表javascript

doctype

關於文檔的類型 默認是htmlhtml

doctype html
<!DOCTYPE html>

簡潔文檔類型標記java

xml
<?xml version="1.0" encoding="utf-8" ?>
transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
mobile
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

You can also use your own literal custom doctype:jquery

doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

標籤

默認，每行最開始的（或者在空格以後的（只有空格））表明一個html 標籤 ，能夠嵌入縮進，建立像html 文檔結構的樣式。緩存

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

jade 也知道那種標籤是能夠本身關閉的。markdown

img
<img/>

Block 擴展

jade 提供的支持內聯的嵌入標籤app

a: img
<a><img/></a>

屬性

標籤屬性看起來比較像html, 而後它們的值只是規則的javascript.less

a(href='google.com') Google
a(class='button', href='google.com') Google
<a href="google.com">Google</a>
<a class="button" href="google.com">Google</a>

普通的javascript擴展也能夠使用:ide

- var authenticated = true
body(class=authenticated?'authed':'anon')
<body class="authed"></body>

Boolean 屬性

input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />
doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')
<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

Class 屬性

類屬性只是簡單的字符串、 可是它們能夠表明一系列類名, 它們是從javascript中生成的.ui

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])
<a class="foo bar baz"></a>
<a class="foo bar baz bing"></a>

Class 字面名稱

就是html 標籤中class 屬性的名稱

a.button
<a class="button"></a>

默認的標示是div:

.content
<div class="content"></div>

ID 字面名稱

就是html 標籤中id屬性的名稱

a#main-link
<a id="main-link"></a>

默認是div

#content
<div id="content"></div>

存文本

Jade提供了三中方式.  、

Piped Text

使用 | 字符

| Plain text can include <strong>html</strong>
p
| It must always be on its own line
Plain text can include <strong>html</strong>
<p>It must always be on its own line</p>

內聯標籤

 

p Plain text can include <strong>html</strong>
<p>Plain text can include <strong>html</strong></p>

塊標籤

使用.  一個較好的例子就是script 和style.  爲了這樣作，你僅僅使用 . 在一個標籤以後（沒有空格）

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
<script>
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')
</script>

代碼

Jade 能夠進行javascript代碼的編寫.

非緩存代碼

Unbuffered 代碼以- 開始.

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

緩存代碼

緩存代碼以= 開始

p
= 'This code is <escaped>!'
<p>This code is &lt;escaped&gt;!</p>

 

p= 'This code is' + ' <escaped>!'
<p>This code is &lt;escaped&gt;!</p>

 

註釋

 

// just some paragraphs
p foo
p bar
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
//- will not output within markup
p foo
p bar
<p>foo</p>
<p>bar</p>

塊註釋

body
//
 As much text as you want
 can go here.
<body>
  <!--
  As much text as you want
  can go here.
  -->
</body>

條件

進行判斷

- var user = { description: 'foo bar baz' }
#user
if user.description
h2 Description
p.description= user.description
else
h1 Description
p.description User has no description
<div id="user">
  <h2>Description</h2>
  <p class="description">foo bar baz</p>
</div>
unless user.isAnonymous
p You're logged in as #{user.name}
if !user.isAnonymous
p You're logged in as #{user.name}

迭代

ul
each val in [1, 2, 3, 4, 5]
li= val
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

 

ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
<ul>
  <li>0: zero</li>
  <li>1: one</li>
  <li>2: two</li>
</ul>

 

ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
<ul>
  <li>1: one</li>
  <li>2: two</li>
  <li>3: three</li>
</ul>

 

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
<p>you have 10 friends</p>

Case Fall Through

- var friends = 0
case friends
when 0
when 1
p you have very few
default
p you have #{friends} friends
<p>you have very few friends</p>

Block 擴展

 

- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
<p>you have a friend</p>

過濾

 

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

混入

 

//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list()
+list()
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

 

mixin pets(pets)
ul.pets
- each pet in pets
li= pet
+pets(['cat', 'dog', 'pig'])
<ul class="pets">
  <li>cat</li>
  <li>dog</li>
  <li>pig</li>
</ul>

 

mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided

+article('Hello world')

+article('Hello world')
p This is my
p Amazing article
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>No content provided</p>
  </div>
</div>

<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>This is my</p>
    <p>Amazing article</p>
  </div>
</div>

 

mixin link(href, name)
a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")
<a class="btn" href="/foo">foo</a>

包含

 

// index.jade
doctype html
html
include includes/head
body
h1 My Site
p Welcome to my super lame site.
include includes/foot
// includes/head.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
// includes/foot.jade
#footer
p Copyright (c) foobar
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程