pug チュートリアル
pugを使い始める
サーチ…
備考
Pugは、高性能で堅牢でエレガントで機能豊富なテンプレートエンジンです。これはHamlの影響を受け、Node.jsとブラウザ用のJavaScriptで実装されました。 Laravel、PHP Scala、Ruby、Python、Javaの実装があります。
それは特色になる：
Pugは以前はJadeの名前で知られていましたが、登録商標のために名前が変更されました。
この発言セクションでは、pug内の大きなテーマについても言及し、関連するトピックにリンクしてください。 pugのドキュメンテーションは新しいので、これらの関連トピックの初期バージョンを作成する必要があります。
バージョン
| バージョン | 発売日 |
|---|---|
| 2.0.0-beta11 | 2017-02-04 |
| 2.0.0-beta10 | 2017-01-29 |
| 2.0.0-beta9 | 2017-01-25 |
| 2.0.0-beta1 | 2016年06月03日 |
| 1.11.0 | 2015-06-11 |
インストール
Pugテンプレートレンダリングシステムをインストールするには、次の手順を実行します。
- あなたのマシンにNode.js環境をインストールする
-
npm install pug --saveを実行して、現在のプロジェクトにpugモジュールをインストールします。
標準のrequireメカニズムを使ってプロジェクトでpugを使うことができるようになりました：
const pug = require("pug");
アプリケーションでExpressを使用している場合は、 require("pug")をrequire("pug")するrequire("pug")はありません。ただし、Expressアプリケーションのview engineプロパティをpug設定する必要があります。
app.set("view engine", "pug");
さらに、あなたのアプリのビューディレクトリを設定して、ExpressがあなたのPugファイルを探す場所をコンパイルするようにしなければなりません。
app.set("views", "path/to/views");
Expressルート内では、ファイルのパス（ app.set("views")オプションで設定されたディレクトリから始まるres.render関数を呼び出してPugファイルをレンダリングできます）。
app.get("/", function (req, res, next) {
// Your route code
var locals = {
title: "Home",
};
res.render("index", locals);
});
上の例では、 indexはviews/index.pugにあるファイルをviews/index.pug 、 localsはファイルに公開される変数のオブジェクトを表します。後のセクションで説明するように、Pugは渡された変数にアクセスして、さまざまなアクション（条件、補間、反復など）を実行できます。
Hello Worldの例
まず、レンダリングするテンプレートを作成しましょう！
p Hello World, #{name}!
これを.pug拡張子で終わるファイルに保存します（好きなものを呼び出すことができますが、次のコードでview.pugを使用してコンパイルします）。
今のところ、そのテンプレートをコンパイルするだけです。 JSスクリプトファイル（ main.jsと呼ぶ）を作成し、次のコンテンツを追加します。
// Import the pug module
const pug = require('pug');
// Compile the template (with the data not yet inserted)
const templateCompiler = pug.compileFile('view.pug');
// Insert your data into the template file
console.log(templateCompiler({ name: 'John' });
このファイルをnpm main.jsで実行すると、コンソールに次のHTMLコード出力が表示されます。
<p>Hello World, John!</p>
おめでとう、最初のテンプレートを作成してコンパイルしました！ Conditionals 、 Iterationなど、より高度なものまで！