为什么我的Express/Jade应用程序呈现空白页? [英] Why is my Express / Jade app rendering blank pages?

问题描述

我刚刚在我的express项目中添加了另一个Jade模板，现在它呈现空白页面，带有空白的head和body标签.它在index.jade扩展layout.jade时有效，但在layout.jade扩展logo.jade时中断.控制台中没有错误.

I just added another Jade template to my express project, and now it renders blank pages, with empty head and body tags. It works when index.jade extends layout.jade, but it breaks if layout.jade extends logo.jade. There are no errors in the console.

这是项目的简化版本，可以正常工作.

Here is a simplified version of the project, which works fine.

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:

views/index.jade:

extends layout

block content
    p Hello

views/layout.jade:

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:

modified 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:

new views/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')

推荐答案

注意布局，模板和部分.

Take care with layouts, templates and partials.

当您告诉express用玉渲染页面时，它将寻找匹配的模板文件(例如logo.jade).这是入口点，从此处开始呈现页面.

When you tell express to render a page with jade, it looks for the matching template file (for example logo.jade). This is the entry point and from there on the page is rendered.

如果要使用布局，则必须在模板文件中告诉它.如果查看index.jade，它表示应该扩展layout.jade.在您的logo.jade中没有这样的声明，因此没有任何要渲染的内容，因为未定义徽标块.如果要使用局部对象(包括在玉石中)，则必须在模板文件中说明.

If you want to use a layout, you have to tell it in your template file. If you look at the index.jade, it says that the layout.jade should be extended. In you logo.jade there is no such declaration, so there is nothing to render as the logo block is not defined. If you want to use partials (include in jade), you have to tell so in the template file.

布局文件中的块只是占位符，可以扩展或覆盖甚至保留为空.我建议将徽标直接添加到您的布局或包括它.有关更多信息，请参见关于include的翡翠记录.

Blocks in your layout file are just placeholders that can be extended or overwritten or even left empty. I would suggest to add the logo directly to your layout or to include it. See Jade documention on includes for more information.

所以您的layout.jade应该看起来像这样:

So your layout.jade should look like this:

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

新的include/logo.jade:

And the new 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')

这篇关于为什么我的Express/Jade应用程序呈现空白页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！