0

Express プロジェクトに別の Jade テンプレートを追加したところ、空白のページがレンダリングされ、head タグと body タグが空になりました。index.jade が layout.jade を拡張すると機能しますが、layout.jade が logo.jade を拡張すると機能しなくなります。コンソールにエラーはありません。

これは、正常に動作するプロジェクトの簡略化されたバージョンです。

app.js:

var express = require('express'),
    http = require('http'),
    path = require('path'),
    request = require('request');

var app = express();

app.configure(function(){
    app.set('port', process.env.PORT || 3000);
    app.set('views', __dirname + '/views');
    app.set('view options', {'layout': false});
    app.set('view engine', 'jade');
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
    app.use(express.errorHandler());
});

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

http.createServer(app).listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port'));
});

ビュー/index.jade:

extends layout

block content
    p Hello

ビュー/layout.jade: 

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        h1= title
        block content

logo.jade を追加して layout.jade から拡張すると、Jade のレンダリングが中断されます。

GET http://localhost:3000/

応答する

200 OK
content-length: 0

変更されたビュー/layout.jade:

extends logo

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        block logo
        h1= title
        block content

新しいビュー/logo.jade:

block logo
    svg(xmlns='http://www.w3.org/2000/svg')
        rect(
            stroke='black'
            fill='blue'
            x='45'
            y='45'
            width='20px'
            height='30px'
            stroke-width='1')
4

1 に答える 1

1

レイアウト、テンプレート、パーシャルに注意してください。

jade を使用してページをレンダリングするように Express に指示すると、一致するテンプレート ファイル (logo.jade など) が検索されます。これがエントリ ポイントであり、そこからページがレンダリングされます。

レイアウトを使用する場合は、テンプレート ファイルで指定する必要があります。index.jade を見ると、layout.jade を拡張する必要があると書かれています。あなたの logo.jade にはそのような宣言がないため、ロゴ ブロックが定義されていないためレンダリングするものはありません。パーシャル (ジェイドにインクルード) を使用する場合は、テンプレート ファイルでそのように指定する必要があります。

レイアウト ファイル内のブロックは、拡張または上書きしたり、空のままにしたりできる単なるプレースホルダーです。ロゴをレイアウトに直接追加するか、含めることをお勧めします。詳細については、インクルードに関する Jade のドキュメントを参照してください。

したがって、layout.jade は次のようになります。

doctype 5
html(xmlns='http://www.w3.org/1999/xhtml')
    head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        include includes/logo
        h1= title
        block content

新しい includes/logo.jade:

svg(xmlns='http://www.w3.org/2000/svg')
    rect(
        stroke='black'
        fill='blue'
        x='45'
        y='45'
        width='20px'
        height='30px'
        stroke-width='1')
于 2012-12-10T10:46:31.670 に答える