layout.jade不工作，为什么？ [英] The layout.jade is not working, why?

问题描述

这是我的配置文件：
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 $）
 
 / * DB部分：* / 
 app.mongoose.connec t（'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）
}）
}）
  / pre> 
 
 
我的layout.jade，很简单：
 ！ ！ 
 doctype 5 
 html 
头
标题Dio
 link（rel ='icon'，href ='favicon.ico'，type ='image / x 
 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）
 
脚本（src =http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js）
脚本（src =http：// ajax .cdnjs.com / ajax / libs / json2 / 20110223 / json2.js）
脚本（src =./ javascripts / underscore-min.js）
脚本（src =./ javascripts /backbone-min.js）
 
 link（rel ='stylesheet'，href ='。/ css / main.css'，type =text / css，media =screen 
 body 
 div＃topbar Dio  - 发生什么事情
 div＃main！= body 
 footer 
p 
 | Node.js MVC模板由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 
│└─┬发送@ 0.1.0 
│└──mime@1.2.6 
├──fs@0.0.0 
├──imagemagick@0.1.3 
├─┬翡翠@ 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 
  
 
 
解决方案
其实这个问题的原因很简单：
 Express 3不再支持布局，但不要伤心。实际上，Express 3开始采用更自然和更简单的方式，这被称为块/扩展。 
基本用法应该是这样的：
  //在布局文件中：layout.jade 
 html 
头
标题XXX 
块脚本
主体
块内容
块脚注
 
 
 // in a扩展文件，例如index.jade：
扩展布局
块脚本
 //写入javascript部分
块内容
 //写内容
块脚注
 //写页脚
  
它变得更容易，更灵活。很高兴得到它。但是花了我2个多小时的时间。
 
 
 
我只是想知道为什么很少人更清楚，公开地提到这个变化。希望这篇文章可以帮助一些像我这样的人。
 
This is my configure file:
The layout.jade does not seem to be working. But the jade is working. I used Chrome to check, and am sure that the layout HTML is not loaded into the page.
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
}
The render command:
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)
    })
})
My layout.jade, quite simple:
!!!
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
And the following is my npm list:
├─┬ 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

解决方案
Actually the reason for such problem is quite simple:
Express 3 no longer supports layout..But do not be sad. Actually Express 3 begins to adopt a more natural and easier way, which is called block/extends. 
The basic usage should be like this:
// 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
It actually becomes easier and more flexible. Glad to get it finally. But it took me more than 2 hours.

I am just wondering why so few people mentioned this change more clearly and openly. Hope this post can help some people like me.

                        
这篇关于layout.jade不工作，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！