16

Jadeテンプレートとレイアウトを使用する単純なサーバーをNode.jsで作成しようとしています。何らかの理由で、テンプレートのみが読み込まれ、レイアウトは読み込まれません。

これが私が持っているものです：

main.js

var express = require('express');

var app = express.createServer();

app.set('views', __dirname + '/views'); 
app.set('view engine','jade');
app.set('view options', {
 layout: true
});

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

app.listen(4000);

ご覧のとおり、レイアウトが有効になっています。renderメソッドで直接参照しようとしましたが、違いはありません。「タイトル：'マイサイト'」も機能しないことも注目に値します。

index.jade

h2 Hello!
p I really hope this is working now

lo.jade

!!! 5
html
  head
    title Why won't this work
  body
    h1 I AM A LAYOUT
    div= body

これが私のnpm list：

├─┬ express@3.0.0alpha1 
│ ├── commander@0.5.2 
│ ├─┬ connect@2.1.2 
│ │ ├── crc@0.1.0 
│ │ ├── formidable@1.0.9 
│ │ ├── mime@1.2.4 
│ │ └── qs@0.4.2 
│ ├── debug@0.6.0 
│ ├── mime@1.2.5 
│ └── mkdirp@0.3.1 
└─┬ jade@0.24.0 
  ├── commander@0.5.2 
  └── mkdirp@0.3.0

これが機能しない理由について何かアイデアはありますか？

4

4 に答える 4

35

レイアウトを間違った方法で行っていると思います。私はこのようにします：

レイアウトをfalseに設定しました：

app.set('view options', {
    layout: false
});

layout.jadeファイル内：

doctype 5
html(lang="en")
    head
        title MySite #{title}
body
    block mainContent

そして、レンダリングされたページ（たとえば：home.jade）には、変数（コンテンツ）が含まれています

extends layout

block mainContent
    h1 This is home
    p= content

異なる変数（ユーザー）を持つ同じレイアウト（other.jade）に基づく（拡張する）別のページを持つことができます

extends layout

block mainContent
    h1 Oh look ! Another page
    p= user

そして、このようにそれらを呼び出します：

app.get('/', function(req, res) {
    res.render('home', { 
        title : "Home",
        content: "Some Home page content"
    });
});

app.get('/anotherPage', function(req, res) {
    res.render('other', { 
        title : "Other page",
        user: "Here goes a user name"
    });
});
于 2012-04-17T22:01:31.507 に答える
9

これは、Express/jadeの最新バージョンへの変更のようです。

Express:  '3.0.0alpha1': '2012-04-18T22:47:46.812Z'
Jade:     '0.25.0':      '2012-04-18T22:40:01.162Z'

私も捕まえた！

他のいくつかのことも同様に変更されました-それを解決するのに少し時間がかかりました。

残念ながら、Express＆Jadeは特に十分に文書化されておらず、Webで見つけた例の多くは古くなっています。

Arnaudは、レイアウトを使用する新しい方法を提供しました。古い方法がまったく機能するかどうかはわかりません。確かに、私がdtyonのようなものを試したとき、それはもう機能しないようです。

したがって、コマンドを使用して、インストールしたExpress＆Jadeのバージョンを確認してください。

npm show express dist.tarball
npm show jade dist.tarball

お役に立てれば。J。

于 2012-04-19T19:47:32.450 に答える
3

私の知る限り、デフォルトでは、レイアウトファイルの名前は「layout.jade」になっています。ただし、別の名前が必要な場合は、レンダリング時に「レイアウト」ヒントオプションを使用できます。

res.render('index', { layout: 'lo', title: 'My site' });

また、 lo.jadeレイアウトファイルがルートディレクトリにあると想定しています/views/。

于 2012-04-17T21:34:55.680 に答える
3

私も同じ問題を抱えていましたが、人々が知っているように、express / jadeでレイアウトが機能する新しい方法は、レイアウトがデフォルトですでに拡張されており、ブロックが自動的に「body」変数として渡されることです。

例えば

index.jade

/* This will be passed as "body" no need for "block body" */
h1= title
p Welcome to #{title}

layout.jade

doctype
html
  head
    meta(charset='utf-8')
  body
    /* body is output here using != which outputs variable without escaping characters */
    section!= body
于 2014-04-14T04:44:37.930 に答える