Question

我刚刚在我的快递项目中添加了另一个Jade模板，现在它呈现空白页面，空头和身体标签。它在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

views / 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

修改了views / 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')

Answer 1

注意布局，模板和部分内容。

当你告诉express使用jade渲染页面时，它会查找匹配的模板文件（例如logo.jade）。这是入口点，从那里开始呈现页面。

如果要使用布局，则必须在模板文件中告知它。如果你看一下index.jade，它说应该扩展layout.jade。在你logo.jade没有这样的声明，因此没有任何东西可以呈现，因为没有定义徽标块。如果你想使用partials（包含在jade中），你必须在模板文件中说明。

布局文件中的块只是可以扩展或覆盖甚至留空的占位符。我建议将徽标直接添加到您的布局或包含它。有关详细信息，请参阅Jade documention on includes。

所以你的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

新的包括/ 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')

为什么我的Express / Jade应用程序呈现空白页面？

1 个答案: