5

Jadeテンプレートエンジンに関する簡単な質問:

  • node.js使用していないときに、どのようにして変数を.jadeテンプレートに渡すことができますexpress.jsか?

すべてがどのように機能するかを理解できるように、エクスプレスを使用しない小さなWebサイトを作成しようとしています。

node.jsまた、Jadeの使用とエクスプレスなしのチュートリアルや記事はありますか?

4

2 に答える 2

10
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}
于 2012-09-07T17:02:50.973 に答える
1

ヴァディムの答えはいいですが、古いです。Jade変数を宣言するために異なる構文を使用し、Jadeの公式チュートリアルで現在使用されているものとは異なります。また、 Jadeオプションの使用方法も示していません。

簡単な例

index.jade

doctype html
html
  head
    title= pageTitle
  body
    h1= greetings

この例では、変数はpageTitlegreetingsです。

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>


翡翠オプションの使用

前の例では、きれいに印刷せずにHTMLを出力します。これは問題ではありませんが、Jadeにはきれいに印刷されたHTMLを出力するオプションがあります。オプションの完全なリストはここで確認できます。

Jadeの公式チュートリアルでは、テンプレートに変数がある場合のオプションの使用方法については説明していません。JadeのGitHubページは教えようとしますが、不完全です。それは使用しています:

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

merge未定義の関数と同様に、定義する必要があります。この関数は、2つの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);
});

出力:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
于 2015-11-21T21:53:04.923 に答える