Jadeテンプレートエンジン使用

32723 ワード

Expressでjadeテンプレートエンジン

を呼び出す

jade変数呼び出し

if判定

サイクル

Case選択

テンプレートで他の言語を呼び出す

再利用可能なjadeブロック(Mixins)

テンプレートは

を含む

テンプレート参照(Extends)

Expressでjadeテンプレートエンジンを呼び出す

var express = require('express'); var http = require('http'); var app = express(); app.set('view engine', 'jade'); //        app.set('views', __dirname); //         (      ) app.get('/', function(req, res) { res.render('test'); //          test.jade    }) var server = http.createServer(app); server.listen(3002); console.log('server started on http://127.0.0.1:3002/');

test.jade

p hello jade

上のjadeテンプレートは

<p>hello jade</p>

通常、node.jsコードを変更した後、変更を表示するために再起動する必要がありますが、jadeエンジンはこの列には表示されません.動的にロードされているので、jadeファイルを変更した後、直接ページをリフレッシュして効果を表示することができます.
テキストが長い場合は

p | foo bar baz | rawr rawr

または

p. foo bar baz rawr rawr

どちらの場合も

<p>foo bar baz rawr rawr</p>

JAde変数呼び出し
JAdeの変数呼び出しには3つの方法があります

#{ }

=式

!=式

注:シンボル-の先頭はjadeでサービス側が実行するコードに属する

- console.log('hello'); //            - var s = 'hello world' //             p #{s} p= s

レンダリングされます

<p>hello world</p> <p>hello world</p>

次のコードの効果は同じです.

- var s = 'world' p hello #{s} p= 'hello' + s

方式1は各地方を自由に埋め込むことができる方式2は式の値=と方式3!=を返す.同じように、前者は文字列を符号化すると言われていますが、例えばがになると後者はできませんが、ブロガーは何が起こっているのか試していません.
jadeテンプレートで直接変数を定義する以外に、expressでres.renderメソッドを呼び出すときに変数をテンプレートの空間に一緒に渡すのが一般的です.たとえば、次のようにします.

res.render(test, { s: 'hello world' });

テンプレートを呼び出す場合、jadeテンプレートでは上のようにsという変数を直接呼び出すこともできます
if判断

方式1

- var user = { description: '    ' } - if (user.description) h2    p.description= user.description - else h1    p.description

結果:

<div id="user"> <h2>  </h2> <p class="description">    </p> </div>

方式2

上記の方式には省略表記があります

- var user = { description: '    ' } #user if user.description h2    p.description= user.description else h1    p.description

方式3

Unlessを使用してifに似た式を追加しました!に逆らう

- var user = { name: 'Alan', isVip: false } unless user.isVip p     #{user.name}      VIP

結果

<p>    Alan      VIP</p>

このunlessはjadeが提供するキーワードであり、実行するjsコードではないことに注意してください.
ループ

forサイクル

- var array = [1,2,3] ul - for (var i = 0; i < array.length; ++i) { li hello #{array[i]} - }

結果

<ul> <li>hello 1</li> <li>hello 2</li> <li>hello 3</li> </ul>

each
同じjadeは循環液に対して「-」のマイナス記号を省略した書き方を提供しています

ul each val, index in ['  ', '  ', '  '] li= index + ': ' + val

結果

<ul> <li>0:   </li> <li>1:   </li> <li>2:   </li> </ul>

この方法はjsonデータにも適用できる

ul each val, index in {1:'  ',2:'  ',3:'   '} li= index + ': ' + val

結果:

<ul> <li>1:   </li> <li>2:   </li> <li>3:    </li> </ul>

Case
switchの結果に似ていますが、ここのcaseはcaseの貫通をサポートしていません.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>

簡単な書き方:

- 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           MarkDown    script :coffee console.log '    coffee script'

結果:

<h1>Markdown   </h1> <p>       MarkDown   </p> <script>console.log('    coffee script')</script>

再利用可能なjadeブロック(Mixins)

//-         mixin list ul li foo li bar li baz //-    +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>

Mixinsはjadeブロックへの外部転送もサポートします

mixin article(title) .article .article-wrapper h1= title //- block   jade             if block block else p         +article('Hello world') +article('Hello Jade') p           p

結果:

<div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>       </p> </div> </div> <div class="article"> <div class="article-wrapper"> <h1>Hello Jade</h1> <p>         </p> <p>    </p> </div> </div>

Mixinsはまた、外部から属性を取得することもできます.

mixin link(href, name) a(class!=attributes.class, href=href)= name +link('/foo', 'foo')(class="btn")

結果:

<a href="/foo" class="btn">foo</a>

テンプレートの内容(Includes)
Includesを使用して、テンプレートに他のテンプレートの内容を含めることができます.PHPのincludeのようです.index.jade

doctype html html include includes/head body h1      p         。 include includes/foot

includes/head.jade

head title      script(src='/javascripts/jquery.js') script(src='/javascripts/app.js')

includes/foot.jade

#footer p Copyright (c) foobar

index.jadeを呼び出した結果:

<!doctype html> <html> <head> <title>    </title> <script src='/javascripts/jquery.js'></script> <script src='/javascripts/app.js'></script> </head> <body> <h1>    </h1> <p>        。</p> <div id="footer"> <p>Copyright (c) foobar</p> </div> </body> </html>

テンプレート参照(Extends)
Extendsで外部のjadeブロックを参照できるのでincludeよりも使いやすいと思いますlayout.jade

doctype html html head title      meta(http-equiv="Content-Type",content="text/html; charset=utf-8") link(type="text/css",rel="stylesheet",href="/css/style.css") script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript") body block content

article.jade

//- extends      layout.jade extends ../layout block content h1      p          :         p   :"   "              p      ：             p        45   1  1  2

res.render(‘article’)の結果:

<html> <head> <title>    </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <link type="text/css" rel="stylesheet" href="/css/style.css"></head> <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script> </head> <body> <h1>    </h1> <p>         :        </p> <p>  :"   "             </p> <p>     ：            </p> <p>       45   1  1  2    </p> </body> </html>

もう1発運んで、原文の住所:http://www.lellansin.com/Jade-テンプレートエンジン使用.html

LruCacheの原理

JDBCリモートmysqlサーバへの接続