【问题标题】:jade template engine, how to use layout.jade?玉模板引擎,如何使用layout.jade?
【发布时间】:2012-01-14 05:05:05
【问题描述】:

我在 node.js 中有一个网站;创建一个页面,比如mypage 我注意到我需要同时创建layout.jademypage.jade 文件。如果我将代码放在mypage.jade 中,它不会显示,所以首先我必须用页面布局填充layout.jade

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

谢谢

【问题讨论】:

  • 是的,很抱歉没有提及。我正在使用 Express。

标签: node.js express pug


【解决方案1】:

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

【讨论】:

  • 现在我正在做的是res.render(__dirname+'/pages/index.jade', {user: usr});,所以你说的是给包装我的用户的对象也添加一个名为布局的字段:并给我的布局?因为现在它已经使用了布局,即使我没有指定它(不加载 index.jade 但布局。此外, div= body 需要什么?给定 .jade 文件的正文?
  • 正如我在消息中所说,默认情况下启用布局。 res.render('index.jade', {user: usr, layout: false }) 如果您不想要特定页面的布局,也可以这样做,否则为布局提供一个值。 Body = .jade 文件的内容是
  • 非常感谢,您究竟是在哪里读到的?我在翡翠网站上四处搜索,但找不到真正有用的东西。
  • 检查我的消息的第一行:expressjs.com/guide.html#view-rendering 我看过那里。另请看我留言的最后,我给了你一个使用jade的真实应用程序的链接。
  • 这是正确的。但是,请注意,在常见用例中,您想要呈现未转义的 HTML,因此您必须使用 != 而不是 =。我不得不参考这个例子来解决这个问题。感谢您引导我找到答案。
【解决方案2】:

聚会有点晚了,但我最初很难找到答案...... 在 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>

【讨论】:

  • != body 有什么作用?在此处需要更多详细信息。
  • @qodeninja - 来自文档:“未转义的缓冲代码以 != 开头,并输出评估模板中 JavaScript 表达式的结果。这不会进行任何转义,因此对用户输入不安全"
【解决方案3】:

在快递 3.x 中

使用 Jade 块,而不是布局

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

【讨论】:

    【解决方案4】:

    我知道一种方法可以给我最好的结果,即使是 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 doc

    【讨论】:

      猜你喜欢
      • 2016-04-05
      • 1970-01-01
      • 1970-01-01
      • 2011-11-11
      • 2017-12-28
      • 1970-01-01
      • 2011-01-05
      • 2011-06-14
      • 2016-06-20
      相关资源
      最近更新 更多