ジェイドのテンプレート継承
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ファイルでは、親テンプレート Nothingblock content
テンプレートのサブブロック 書き直されます(内容を含む) そのhtmlファイルはコンパイルされたindex.jadeで生成され、content
ブロックには含まれません
コードのこの部分。
これは再帰的なプロセスです。 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
逆に。