Jade模板引擎，如何使用layout.jade？

Question

Jade模板引擎，如何使用layout.jade？

18

我有一个用node.js创建的网站；要创建一个名为mypage的页面，我注意到需要创建layout.jade和mypage.jade文件。如果我将代码放在mypage.jade中，它将不显示，因此我必须先填充layout.jade页面的布局。

我的问题是，在layout.jade中如何引用我想要加载mypage.jade内容到某个容器内？例如，我可以拥有相同布局的不同页面吗？我该如何做？

谢谢

- Masiar

是的，抱歉没有提到。我正在使用Express。 - Masiar

4个回答

7

有点晚了，但我起初很难找到答案... 在layout.jade中。

doctype html
html(lang="en")
    head
    body
        h1 Hello World
        block myblock

然后在index.jade中：

extends layout
    block myblock
        p Jade is cool

将被渲染

<!DOCTYPE html>
<html lang="en">
<head>
<body>
    <h1>Hello World</h1>
    <p>Jade is cool</p>
</body>
</html>

- Scott Rickman

1

"!= body"是什么作用？需要更多细节。 - qodeninja

@qodeninja - 来自文档: "未转义的缓冲代码以!=开头，并输出在模板中评估JavaScript表达式的结果。这不会执行任何转义，因此对于用户输入不安全" - Richard Szalay

4

在Express 3.x版本中，应使用Jade块而不是布局

http://www.devthought.com/code/use-jade-blocks-not-layouts/

- rolin.tencent.Shenzhen

1

我知道一种方法，即使在使用Angular（替代angular-route/ng-view）时也能给我最好的结果。

首先需要安装express-layout：

npm install --save express-layout

之后，Express将在您的views/文件夹中搜索layout.jade文件。因此，在其中，您可以使用：

views/layout.jade

html
  head
    meta(charset='utf-8')
    title= title
  body
    div!= body

views/home.jade

h1 Welcome aboard, matey!

server.js

var express = require('express'),
    layout = require('express-layout');

var app = express();

app.get('/', function(req, res) {
    res.render('home', {
    title: 'Welcome!'
});

默认情况下，Express会在你的views/文件夹中搜索layout.jade文件，但你可以通过以下方式更改默认设置（是的，不需要编写.jade扩展名）：

app.set('layout', 'default');

之后，Express将使用views / default.jade作为默认布局。

此外，如果您想在特定页面中使用不同的布局，则可以使用：

app.get('/', function(req, res) {
    res.render('home', {
    layout: 'login',
    title: 'Welcome!'
});

这里 express 将会将 login.jade 渲染成布局。

我猜想你正在使用 Jade 作为默认的视图引擎，并且没有改变视图文件夹的默认设置。

这里是 express-layout 文档。

- TMS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alessioalex · Accepted Answer

http://expressjs.com/guide.html#view-rendering

如果您不想使用布局，可以全局禁用它们：

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

如果您不这样做，默认情况下启用布局，并且Express会在your_view_folder/layout.jade中搜索标准布局。

但是，您可以为每个路由指定单独的布局：

res.render('page', { layout: 'mylayout.jade' }); 
// you can omit .jade if you set the view engine to jade

这是您的布局文件示例：

以下是您的布局文件示例：

doctype html
html(lang="en")
  head
    title Testing 123
  body
    div!= body

请注意，正文将从"mypage.jade"中获取。

编辑：

下面是应用程序中的一个真实示例：

应用程序文件（包含路由和配置）：
https://github.com/alexyoung/nodepad/blob/master/app.js 布局文件：
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade