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

Question

我刚刚在我的 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'));
});

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

修改视图/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 中没有这样的声明，所以没有任何东西可以渲染，因为 logo 块没有定义。如果你想使用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

还有新的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')