Question

我正在尝试在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);

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

index.jade

h2 Hello!
p I really hope this is working now

lo.jade

!!! 5
html
  head
    title Why won't this work
  body
    h1 I AM A LAYOUT
    div= body

这是我的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

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

Answer 1

我认为你的布局是错误的。我是这样做的：

我将布局设置为false：

app.set('view options', {
    layout: false
});

在layout.jade文件中：

doctype 5
html(lang="en")
    head
        title MySite #{title}
body
    block mainContent

在呈现的页面中（比方说：home.jade），其中包含一个变量（内容）

extends layout

block mainContent
    h1 This is home
    p= content

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

extends layout

block mainContent
    h1 Oh look ! Another page
    p= user

并像这样打电话给他们：

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"
    });
});

Answer 2

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

Express:  '3.0.0alpha1': '2012-04-18T22:47:46.812Z'
Jade:     '0.25.0':      '2012-04-18T22:40:01.162Z'

也抓住了我！

其他一些事情也发生了变化 - 花了我一段时间来解决它。

不幸的是，Express＆amp; Jade并没有特别详细记录，你在网上找到的许多例子已经过时了。

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

请查看Express＆amp;的哪个版本你已经使用命令安装了Jade：

npm show express dist.tarball
npm show jade dist.tarball

希望这会有所帮助。学家

Answer 3

据我所知，默认情况下，布局文件应命名为'layout.jade'。但是，如果您需要其他名称，则可以在渲染时使用“布局”提示选项：

res.render('index', { layout: 'lo', title: 'My site' });

我还假设 lo.jade 布局文件位于根目录/views/中。

Answer 4

我有同样的问题，只是让人们知道，布局在express / jade中工作的新方式是默认情况下布局已经扩展，并且你的块自动被传递为“body”变量

E.G。

index.jade

/* This will be passed as "body" no need for "block body" */
h1= title
p Welcome to #{title}

layout.jade

doctype
html
  head
    meta(charset='utf-8')
  body
    /* body is output here using != which outputs variable without escaping characters */
    section!= body

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

4 个答案: