Jade 模板布局不能与 Node.js 结合使用

Posted 2023-03-03

【中文标题】Jade 模板布局不能与 Node.js 结合使用

【英文标题】：Jade template layouts not working in combination with Node.js

【发布时间】：2012-04-29 06:37:04

【问题描述】：

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

这是我得到的：

ma​​in.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);

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

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 

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

【参考方案1】：

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

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

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

【讨论】：

试过这个，但没有任何区别。 ：/另外，由于“标题：'我的网站'”也不起作用，我猜肯定还有更多内容。

@DevEight 你看到所有呈现的 html（包括 doctype 和 html 标签）了吗？还是您只看到一个 html 片段？

这就是我得到的全部：<h2>Hello!</h2><p>I really hope this is working now</p>

@DevEight 您可能需要设置其他配置属性。如果我是你，我会让 express 使用以下命令为你生成一个应用程序：$ express /tmp/foo 其中 /tmp/foo 是你想要部署新应用程序的目录。默认情况下，此应用程序中配置了布局。否则，请尝试将app.use(express.bodyParser()); 添加到您的配置中。

【参考方案2】：

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

我将布局设置为 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"
    );
);

【讨论】：

谢谢，这解决了我的问题。我之前在学习一个对他来说似乎很好用的教程，所以我猜它一定是旧语法或其他东西。

Someone 喜欢我。 More infos关于玉extends和include功能。

【参考方案3】：

这似乎是对最新版本 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.

【讨论】：

好在“我的”方式也适用于 Express 的 2.x 版本。

是的，当然！我已经更改了我的代码，因为现在推荐使用 Extends/Block 的方式，并且正如您所说，它适用于 Express 2 和 Express 3。

【参考方案4】：

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

例如

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