不使用Express将变量传递给Jade

Question

不使用Express将变量传递给Jade

node.jsexpresspug

5

有一个关于Jade模板引擎的问题：

如果不使用express.js，如何将node.js变量传递给.jade模板?

我正在尝试制作一个不使用express的小型网站，只是为了理解一切是如何工作的。

此外，是否有关于在没有express的情况下使用Jade和node.js的教程或文章？

- m_vdbeek

2个回答

1

Vadim的回答很好，但已经过时。它使用了不同的语法来声明Jade变量，而当前在Jade的官方教程中使用的是另一种语法。此外，它也没有展示如何使用Jade选项。

简单示例

index.jade

doctype html
html
  head
    title= pageTitle
  body
    h1= greetings

在这个例子中，变量是 pageTitle 和 greetings。

app.js

var jade = require('jade');

var locals = {
  pageTitle : 'My Page',
  greetings : 'Hello World!'
};

jade.renderFile('index.jade', locals, function(err, html) {
  console.log(html);
});

输出：

<!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello World!</h1></body></html>

使用Jade选项

前面的示例输出HTML时没有进行漂亮打印。这并不是问题，但是Jade有一个选项可以输出漂亮打印的HTML。您可以在此处查看完整的选项列表。

Jade的官方教程没有教您如何在模板中同时使用变量和选项。Jade的GitHub页面试图进行教学，但是不完整。它使用了：

jade.renderFile('filename.jade', merge(options, locals));

作为一个未定义的函数，你需要定义merge函数。该函数将合并两个JSON对象。

app.js

var jade = require('jade');

function merge(obj1, obj2) {
  var result = {};

  for(var key in obj1) 
    result[key] = obj1[key];

  for(var key in obj2) 
    result[key] = obj2[key];

  return result;
}

var options = {
  pretty : true
};

var locals = {
  pageTitle : 'My Page',
  greetings : 'Hello World!'
};

jade.renderFile('index.jade', merge(options, locals), function(err, html) {    
  console.log(html);
});

Output:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

- Zanon

1

请注意，不要创建合并函数，而是使用Object.assign。 - enorl76

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

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

- Vadim Baryshev · Accepted Answer

var jade = require('jade');
jade.renderFile('tpl.jade', { hello: 'world' }, function(err, html) {
        console.log(err);
        console.log(html);
});

tpl.jade:

html
  body
    h1 #{hello}