layout.jade不起作用,为什么？

Question

这是我的配置文件:layout.jade似乎不起作用.但是玉石正在发挥作用.我使用Chrome进行检查,并确保布局HTML未加载到页面中.

module.exports = function(app, express, mongoose){
    var config=this

    app.configure(function (){
        app.set('views',__dirname+'/views')
        app.set('view engine','jade')
        app.set('view options', {layout:true})

        app.use(express.bodyParser())
        app.use(express.methodOverride())
        app.use(express.cookieParser())
        app.use(express.session({secret: 'topsecret',store: new express.session.MemoryStore}))
        app.use(express.static(app.path.join(app.application_root,"public")))
        app.use(express.errorHandler({dumpExceptions:true,showStack:true}))
        app.use(express.bodyParser({keepExtensions: true, uploadDir:"./public/uploads"}))
        app.use(app.router)
    })

    /*DB part:*/
    app.mongoose.connect('mongodb://localhost/dio_database')

    return config
}

渲染命令:

app.get('/items/:id',function(req,res){
    models.ItemModel.findOne({_id:req.params.id}).exec(function(err,item){
        if (!err){
            res.render('item.jade',item)
        } else
            return console.log(err)
    })
})

我的layout.jade,非常简单:

!!!
doctype 5
html
    head
        title "Dio"
        link(rel='icon', href='favicon.ico', type='image/x-icon')
        link(rel='shortcut', href='favicon.ico', type='image/x-icon')
        link(rel="shortcut", href="favicon.ico", type="image/vnd.microsoft.icon")
        link(rel="icon", href="favicon.ico", type="image/vnd.microsoft.icon")

        script(src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js")
        script(src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js")
        script(src="./javascripts/underscore-min.js")
        script(src="./javascripts/backbone-min.js")

        link(rel='stylesheet', href='./css/main.css', type="text/css", media="screen")
    body
        div#topbar Dio--where shitty thing happens
        div#main!= body
            footer
                p
                    | Node.js MVC template by XXX

以下是我的npm列表:

??? bcrypt@0.7.3
? ??? bindings@1.0.0
??? express@3.0.3
? ??? commander@0.6.1
? ??? connect@2.7.0
? ? ??? bytes@0.1.0
? ? ??? formidable@1.0.11
? ? ??? pause@0.0.1
? ? ??? qs@0.5.1
? ??? cookie@0.0.5
? ??? cookie-signature@0.0.1
? ??? crc@0.2.0
? ??? debug@0.7.0
? ??? fresh@0.1.0
? ??? methods@0.0.1
? ??? mkdirp@0.3.3
? ??? range-parser@0.0.4
? ??? send@0.1.0
?   ??? mime@1.2.6
??? fs@0.0.0
??? imagemagick@0.1.3
??? jade@0.27.7
? ??? coffee-script@1.4.0
? ??? commander@0.6.1
? ??? mkdirp@0.3.4
??? mongodb@1.2.2
? ??? bson@0.1.5
??? mongoose@3.4.0
? ??? hooks@0.2.1
? ??? mongodb@1.1.11
? ? ??? bson@0.1.5
? ??? ms@0.1.0
? ??? sliced@0.0.3
??? node-static@0.6.5 extraneous
? ??? colors@0.6.0-1
? ??? optimist@0.3.5
?   ??? wordwrap@0.0.2
??? path@0.4.9

Answer 1

实际上这个问题的原因很简单:Express 3不再支持布局.但是不要难过.实际上,Express 3开始采用更自然,更简单的方式,称为块/扩展.基本用法应该是这样的:

// In layout file: layout.jade
html 
    head
        title XXX
        block scripts
    body
        block content
        block footer


// in a extended file, for example index.jade:
extends layout
block scripts
    //write javascript part
block content
    // write content
block footer
    // write the footer

它实际上变得更容易和更灵活.很高兴终于得到它.但它花了我超过2个小时.

我只是想知道为什么这么少的人更清楚,公开地提到这种变化.希望这篇文章可以帮助像我这样的人.