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

我刚刚在我的express项目中添加了另一个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'));
});

views/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并从布局扩展它。jade会破坏jade渲染。

GET http://localhost:3000/

回应

200 OK
content-length: 0

修改的视图/布局.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

新视图/徽标.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')

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呈现页面时，它会查找匹配的模板文件（例如logo.jade）。这是入口点，从此处开始呈现页面

如果要使用布局，必须在模板文件中说明。如果您查看index.jade，它会说layout.jade应该扩展。在您的logo.jade中没有这样的声明，因此没有任何内容可以呈现，因为logo块没有定义。如果要使用partials（包含在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

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

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

---

哦！看起来我在向后使用“扩展”。我真的不明白extends和include的不同用途。谢谢