Jadeテンプレートエンジン入門チュートリアル

13942 ワード

テンプレートエンジン

Jadeは高性能で分かりやすいテンプレートエンジンで、JadeはHamlのJavascriptで実現され、サービス側(NodeJS)やクライアントでサポートされています.
機能

クライアントは

をサポートする.

超強力な可読性

柔軟で使いやすいインデント

ブロック拡張

コードは、セキュリティを強化するためにデフォルトで符号化処理される

コンパイルおよび実行時のコンテキストエラーレポート

コマンドラインコンパイルサポート

HTML 5モード(使用!!!5ドキュメントタイプ)

オプションメモリキャッシュ

動的および静的タグクラス

を結合する

フィルタ解析ツリーによる処理

はExpress JS

をサポートする.

each透明なループobjectsを用いてarraysはオブジェクト

を列挙することもできない.

ブロック注釈

タグプレフィックス

は不要である.

ASTフィルタ

フィルタ

:sassはsass.js

をインストールする必要があります.

:lessはless.js

をインストールする必要があります.

:markdownはmarkdown-jsまたはnode-discount

をインストールする必要があります.

:cdata

:coffeescript coffee-script

をインストールする必要があります.

Vim構文ファイル

TextMateパッケージ

Screencasts

その他の言語実装

php

Scala

Ruby

インストール
npm経由:

npm install jade

ブラウザのサポート
jadeは、次のコマンドでクライアントブラウザに互換性のあるファイルにコンパイルできます.

$ make jade.js

または、npmでuglifyjs(npminstalluglify-js)をインストールした場合は、次のコマンドで2つのファイルを同時に作成できます.

$ make jade.min.js

公開API

var jade = require('jade');



//      

jade.render('.csser.com    ', { options: 'here' });



//     

jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){

   //    options    

   //              

});



//       

var fn = jade.compile('string of jade', options);

fn.call(scope, locals);

Options

実行役割ドメイン(this)scope

ローカル変数オブジェクトlocals

異常およびキャッシュ処理時にfilename

を使用

Javascriptをファイル名でメモリにキャッシュするcache

出力生成されたタグと関数体debug

jadeデフォルトコンパイルエンジンcompiler

を置き換える
構文
行末
解析前にCRLFとCRをLFに変換する.
マーク
タグは行の最初の単語です.

html

タグにはidもあります.

div#container

これは

としてレンダリングされます.
クラスの処理方法

div.user-details

レンダー:

複数のclass?しかもid?

div#foo.bar.baz

レンダー:

総書きdivは確かにうるさいので、省略できます.

#foo

.bar

出力:

タグテキスト
テキストの内容をタグの後ろに置くだけです.

p wahoo!

wahoo!.
クールですが、大きなテキストをどのように処理しますか?

p

  | foo bar baz

  | rawr rawr

  | super cool

  | go jade go

foo bar baz rawrとしてレンダリング.....

内挿法?はい、両方のタイプのテキストは内挿法を使用できます.{locals:{name:{1回',email:'xianlihua[at]gmail.com}}に転送すると、次のようにできます.

#user #{name} &lt;#{email}&gt;

出力:

1回<xianlihua[at]gmail.com>

何らかの理由で#{}を出力する必要がありますか?転義の:

p \#{CSSer,   Javascript  }

これにより,

#{CSSer,Javascript技術に注目}

反転義変数も使用できます!{html}次のコードはscriptタグを出力します.

- var html = "<script></script>"

| !{html}

テキストを含むネストされたタグは、テキストブロックを使用することもできます.

label

  | Username:

  input(name='user[name]')

または、タグテキストを直接使用します.

label Username:

  input(name='user[name]')

script、style、textareaなどの純粋なテキストのタグのみを受け入れるには、先頭の|文字は必要ありません.たとえば、次のようにします.

  html

    head

      title CSSer,   Web    

      script

        if (foo) {

          bar();

        } else {

          baz();

        }

代替案として、ポイント記号'.'を使用できます.などのテキストブロックを表します.

  p.

    foo asdf

    asdf

     asdfasdfaf

     asdf

    asd.

出力:

    <p>foo asdf

    asdf

      asdfasdfaf

      asdf

    asd

    .

    </p>

点呼するとタグとの間にスペースがあり、Jadeが解析すると無視され、テキストとして処理されます.

p .

出力:

<p>.</p>

コメント
一方通行注釈は現在Javascriptと一致しているように見えます.つまり、一方通行注釈の内容は同じ行に配置する必要があります.

//     

p foo

p bar

次のように出力されます.

<!--      -->

<p>foo</p>

<p>bar</p>

Jadeは、横棒を1つ追加するだけで、非バッファコメントもサポートします.

//-                   

p foo

p bar

出力:

<p>foo</p>

<p>bar</p>

ブロックコメント
ブロックコメントは、インデントに基づいて処理されます.

  body

    //

      #content

        h1 CSSer,  Web

出力:

<body>

  <!--

  <div id="content">

    <h1>CSSer,  Web    </h1>

  </div>

  -->

</body>

Jadeは、次のような条件コメントもサポートします.

body

  /if IE

    a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox

出力:

<body>

  <!--[if IE]>

    <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>

  <![endif]-->

</body>

ネスト
Jadeは、ネストによって自然にタグを定義することをサポートします.

ul

  li.first

    a(href='#') foo

  li

    a(href='#') bar

  li.last

    a(href='#') baz

ブロック拡張
ブロック拡張では、単一ローの簡潔なネストタグを作成できます.次の例は、前例の出力と同じです.

  ul

    li.first: a(href='#') foo

    li: a(href='#') bar

    li.last: a(href='#') baz

とくせい
現在、Jadeは'('と')'の特性デリミタをサポートしています.

a(href='/login', title='View login page') Login

また、分割子として、コロン(:)を使用することもできます.

a(href: '/login', title: '    CSSer.com  ') Login

Booleanの機能もサポートされています.

input(type="checkbox", checked)

値が変数のBooleanプロパティは、値がtrueの場合にのみ出力されます.

input(type="checkbox", checked: someValue)

複数行に分割しても正常に解析できます.

input(type='checkbox',

  name='agreement',

  checked)

ドキュメントの種類
利用!!で行ないます.

!!!

遷移ドキュメントタイプが出力されますが、次のようになります.

!!! 5

HTML 5のドキュメントタイプが出力されます.デフォルトで定義されているドキュメントタイプは、簡単に拡張できます.

var doctypes = exports.doctypes = {

   '5': '<!DOCTYPE html>',

   'xml': '<?xml version="1.0" encoding="utf-8" ?>',

   'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',

   '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">'

};

デフォルト値を変更するには、次の手順に従います.

jade.doctypes.default = 'whatever you want';

フィルタ
フィルタはコロン(:)を接頭辞として使用します.たとえば、markdownはテキストを関数として処理します.(注1:Smartyのような変数レギュレータ)、このページの最初に現在Jadeがサポートしているフィルタがリストされます.

body

  :markdown

    Woah! jade _and_ markdown, very **cool**

    we can even link to [CSSer](http://www.csser.com)

レンダリング後:

   <body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>

フィルタは解析ツリーを処理することもできます.通常、フィルタはテキストブロックを正常に処理できますが、ルールに入力されたブロックフィルタによって何でもできます.

body

  conditionals:

    if role == 'admin'

      p You are amazing

    else

      p Not so amazing

コード#コード#
Jadeは現在、3種類の実行可能コードをサポートしています.1つ目は-を接頭辞とし、バッファされません.

- var foo = 'bar';

これは、条件またはループに使用できます.

- for (var key in obj)

  p= obj[key]

Jadeのバッファリング技術のため、次のコードは有効です.

- if (foo)

  ul

    li yay

    li foo

    li worked

- else

  p oh no! you are not in csser.com

さらに詳細な反復サイクル:

- if (items.length)

  ul

    - items.forEach(function(item){

      li= item

    - })

あなたが望んでいることは何でも実現できます!
次に、戻り値をバッファリングするバッファコードを意味し、接頭辞として等号(=)を使用します.

- var foo = 'bar'

= foo

h1= foo

出力:barbar.'='バッファリングされたコードは、デフォルトでエスケープされてセキュリティが強化されます.エスケープの値として出力するには使用する必要があります!=:

p!= aVarContainingMoreHTML

「vanilla」Javascriptの使用を許可する例外は、次の形式で表されるeachタグです.

- each VAL[, KEY] in OBJ

ループ配列を実装する例:

- var items = ["one", "two", "three"]

- each item in items

  li= item

出力:

<li>one</li>

<li>two</li>

<li>three</li>

オブジェクトを循環するキーと値:

- var obj = { foo: 'bar' }

- each val, key in obj

  li #{key}: #{val}

これは

foo:bar

を出力します.
ネストされたループも実行できます.

- each user in users

  - each role in user.roles

    li= role

属性がundefinedの場合、Jadeは空欄を出力します.たとえば、次のようにします.

textarea= user.signature

最近のJadeバージョンではundefinedではなく空の文字列が出力されます.

<textarea></textarea>

コマンドラインツールこまんどらいんつーる:bin/jade bin/jade
htmlを標準出力(stdout):

jade examples/*.jade --pipe

examples/*を生成します.html :

jade examples/*.jade

入力パラメータ:

jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'

ホームページは彼女に告白して記念日の専用の特効を記念します

NPOI Excelテーブル、Wordドキュメントの読み書き