Jadeテンプレートエンジンに関する簡単な質問:
node.js
使用していないときに、どのようにして変数を.jade
テンプレートに渡すことができますexpress.js
か?
すべてがどのように機能するかを理解できるように、エクスプレスを使用しない小さなWebサイトを作成しようとしています。
node.js
また、Jadeの使用とエクスプレスなしのチュートリアルや記事はありますか?
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}
ヴァディムの答えはいいですが、古いです。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>
前の例では、きれいに印刷せずに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>