15

Express と Jade の仕組みを理解しようとしています。

まず第一に、layout.jade をテンプレート ファイル (ヘッダー、本文、フッター) として使用し、別のファイルを使用して本文に情報を表示する場合 (以下の例を参照) は正しいですか?

コードは正常に動作しますが、これが Express で正しい方法であるかどうかはわかりません。この構造を維持する必要がある場合、たとえば index.jade から他のファイル (たとえば、About.jade) に内部的にリンクして、index.jade の代わりにそのファイルを表示するにはどうすればよいですか?

前もって感謝します！

レイアウト.ジェイド:

!!! 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')
    script(type='text/javascript', src='/javascripts/external.js')

  // Header
  header#header

  // Navigation
  nav#nav
    // Navigation code (ul, li etc)...

  // Sidebar
  aside#sidebar
    // Sidebar code...

  // Body
  body!= body

index.jade:

!!! 5
html
  head
    title= title

    section#wrapper
      img.imageStyle(src = '/images/test1.png')
      // And so on...

ジェイドについて:

// You get it...
4

2 に答える 2

15

あなたが探しているのは、エクスプレスでのビュー レンダリング ルートだと思います: http://expressjs.com/en/guide/using-template-engines.html

したがって、次のように設定できます。

app.get('/', function(req, res){
  res.render('index.jade', { title: 'index' });
});

app.get('/about', function(req, res){
  res.render('about.jade', { title: 'about' });
});

一方から他方にリンクするには、適切なルートを構成したら、次のようにするだけです。

a(href='/') index

a(href='/about') about

更新また、インデックスでこれを繰り返す必要はありません。

!!! 5
html
  head
    title= title
于 2012-04-13T02:15:43.627 に答える
4

Wes Freeman が書いたものに加えて、他の jade テンプレートを jade ファイルに含めることもできます。

そうすれば、header.jade、footer.jade を取得して、about.jade ファイルに含めることができます。jade のインクルード ドキュメントは次のとおりです: https://github.com/visionmedia/jade#a13

そうすれば、たとえばスクリプトやスタイルシートのタグをすべてのページに追加する場合にのみ、header.jade ファイルを変更する必要があります。

于 2012-04-13T15:24:22.203 に答える