テンプレートエンジンjade学習
41589 ワード
言語リファレンス
ラベルリスト
doctype
ドキュメントのタイプについてはhtmlがデフォルトです
簡潔なドキュメントタイプタグ
xml
transitional
strict
frameset
1.1
basic
mobile
You can also use your own literal custom doctype:
タブ
デフォルトでは、各行の最初の(またはスペースの後の(スペースのみ))は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もそのラベルが自分で閉じることができることを知っています.
img<img/>
Block拡張
JAdeが提供するインライン対応埋め込みラベル
a: img<a><img/></a>ツールバーの
ラベル属性はhtmlのように見えますが、値はルールのjavascriptにすぎません.
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拡張機能も使用できます.
- 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" />
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">
Class属性
クラス属性は単純な文字列にすぎないが、javascriptから生成された一連のクラス名を表すことができる.
- 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>テキストを保存
ジェイドは三中方式を提供した. 、
Piped Text
|文字の使用| Plain text can include <strong>html</strong>
p
| It must always be on its own linePlain 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です.このようにするには、
.を1つのラベルの後に使用します(スペースはありません)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 <escaped>!</p>
p= 'This code is' + ' <escaped>!'<p>This code is <escaped>!</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
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