ジェイドのテンプレート継承

Jades Template Inheritance

テンプレートの継承

キーワードでサポートされる翡翠block with extendsテンプレートの継承を実現するため。

たとえば、layout.jadeに次のコードを記述します



html head title My Site - #{title} block scripts script(src='/jquery.js') body block content p Nothing block foot #footer p some footer content

中央block contentブロックを表しますcontentブロック名。

別のindex.jadeファイルはlayout.jadeファイルを継承できます。

extends ./layout.jade block scripts script(src='/jquery.js') block content h1= title each pet in pets include pet

index.jadeファイルでは、親テンプレートblock contentテンプレートのサブブロック 書き直されます(内容を含む) そのhtmlファイルはコンパイルされたindex.jadeで生成され、contentブロックには含まれません

Nothing

コードのこの部分。
これは再帰的なプロセスです。
extends ...すべてのコードがlayout.jadeファイルから継承されていることを表します。
extendsファイルを追加した後、継承する必要があります 相対パス 同じファイル内の場合、ファイル名の拡張子は無料です。

追加ブロック、追加ブロック

前のコードの場合layout.jade block scripts index.jadeのブロックblock scriptsブロックの追加を続行script(src='/jquery.js')このステートメント、生成されるindex.html block scripts 2つ含まれるscriptステートメント、index.jade内block scripts変更block append scriptsまたはblock prepend scripts可能性があります。次のように:

block append scripts script(src='/jquery.js')

または以下

block prepend scripts script(src='/jquery.js')

これら2つの方法の違いは、prepend会議 サブテンプレートブロック内のコンテンツをコンパイルします セクター内の親モールドコンテンツを再コンパイルしますappend逆に。