16

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

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

索引.jade

h2 Hello!
p I really hope this is working now

翡翠

!!! 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

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

4

4 回答 4

35

我认为您的布局方式错误。我这样做：

我将布局设置为 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"
    });
});
于 2012-04-17T22:01:31.507 回答
9

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

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

也抓到我了！

其他几件事也发生了变化——我花了一段时间才解决。

不幸的是，Express & Jade 并没有特别完善的文档记录，而且您在网上找到的许多示例都已过时。

Arnaud 现在提供了使用布局的新方法。我不知道旧方法是否有效。当然，当我尝试类似 dtyon 的东西时，它似乎不再起作用了。

因此，使用以下命令检查您安装的 Express & Jade 版本：

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

希望这可以帮助。J。

于 2012-04-19T19:47:32.450 回答
3

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

例如

索引.jade

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

布局.jade

doctype
html
  head
    meta(charset='utf-8')
  body
    /* body is output here using != which outputs variable without escaping characters */
    section!= body
于 2014-04-14T04:44:37.930 回答
3

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

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

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

于 2012-04-17T21:34:55.680 回答