Jade模板布局与Node.js无法结合使用

bjr*_*rnt 16 node.js express pug

我正在尝试在Node.js中创建一个使用Jade模板和布局的简单服务器.由于某种原因,它只会加载模板而不是布局.

这是我得到的:

main.js

var express = require('express');

var app = express.createServer();

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

app.get('/', function(req,res) {
res.render('index', { title: 'My site' });
});

app.listen(4000);
Run Code Online (Sandbox Code Playgroud)

如您所见,布局已启用.我已经尝试直接在render方法中引用它,但它没有什么区别.值得注意的也可能是"标题:'我的网站'"也不起作用.

index.jade

h2 Hello!
p I really hope this is working now
Run Code Online (Sandbox Code Playgroud)

lo.jade

!!! 5
html
  head
    title Why won't this work
  body
    h1 I AM A LAYOUT
    div= body
Run Code Online (Sandbox Code Playgroud)

这是我的npm list:

??? express@3.0.0alpha1 
? ??? commander@0.5.2 
? ??? connect@2.1.2 
? ? ??? crc@0.1.0 
? ? ??? formidable@1.0.9 
? ? ??? mime@1.2.4 
? ? ??? qs@0.4.2 
? ??? debug@0.6.0 
? ??? mime@1.2.5 
? ??? mkdirp@0.3.1 
??? jade@0.24.0 
  ??? commander@0.5.2 
  ??? mkdirp@0.3.0 
Run Code Online (Sandbox Code Playgroud)

关于为什么这不起作用的任何想法?

Arn*_*uin 36

我认为你的布局是错误的.我是这样做的:

我将布局设置为false:

app.set('view options', {
    layout: false
});
Run Code Online (Sandbox Code Playgroud)

在layout.jade文件中:

doctype 5
html(lang="en")
    head
        title MySite #{title}
body
    block mainContent
Run Code Online (Sandbox Code Playgroud)

并在渲染页面(让我们说:home.jade),其中包括一个变量(内容)

extends layout

block mainContent
    h1 This is home
    p= content
Run Code Online (Sandbox Code Playgroud)

您可以使用不同的变量(用户)基于(扩展)相同布局(other.jade)的另一个页面

extends layout

block mainContent
    h1 Oh look ! Another page
    p= user
Run Code Online (Sandbox Code Playgroud)

并称他们为:

app.get('/', function(req, res) {
    res.render('home', { 
        title : "Home",
        content: "Some Home page content"
    });
});

app.get('/anotherPage', function(req, res) {
    res.render('other', { 
        title : "Other page",
        user: "Here goes a user name"
    });
});
Run Code Online (Sandbox Code Playgroud)


Jul*_*ght 9

这似乎是对最新版Express/jade的更改.

Express:  '3.0.0alpha1': '2012-04-18T22:47:46.812Z'
Jade:     '0.25.0':      '2012-04-18T22:40:01.162Z' 
Run Code Online (Sandbox Code Playgroud)

也抓住了我!

其他一些事情也发生了变化 - 我花了一些时间来解决这个问题.

遗憾的是,Express&Jade并没有特别详细记录,您在网上找到的许多示例都已过时.

Arnaud现在给出了使用布局的新方法.我不知道旧的方式是有效的.当然,当我尝试像dtyon这样的东西时,它似乎不再起作用了.

因此,请使用以下命令检查已安装的Express&Jade版本:

npm show express dist.tarball
npm show jade dist.tarball
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助.J.