パグは、Node.jsのプラットフォームのために特別に開発された堅牢で柔軟な、機能豊富なHTMLテンプレートエンジンです。パグは、ジェイドから進化改名されました。
コンパイル時のインデント（ラベル間の入れ子関係を表す）手続きのコードを書くための方法、によって、タグは質問が閉じ考慮する必要はありません。あなたはコードを書くのスピードを加速することができ、また便利なコードの再利用を提供します。
利点：
図1に示すように、無端タグ
2、強制的にインデント
3、コードの再利用およびメンテナンス
4、CSSで書かれた同一のラベル
パグ環境を構築します。
1、Node.jsのとダウンロードNPM
2、ダウンロードパグ、コマンド：NPMインストールパグ-CLI -g
チェック：
/ ************************************************* *******財産基本的な使い方**************************************** ******************************* /
（HREF = ' Baidu.com ' ）百度 に相当 - > <a href= "Baidu.com">百度</a>をA（クラス= 'ボタン'、HREF = 'Baidu.com'）百度のような> -と等価である<a class="button" href="baidu.com"> Baiduの</a>の
表現のJS形
// -ログイン - VAR認証= trueに 体（クラス =認証？' Authed '：' アノンは' ） と同等です - > <ボディクラス = " authed " >> </ボディを
複数行プロパティ
入力（ タイプ = ' チェックボックス' 名前 = ' 合意は' 確認 ） 于等价 - > の<input type = " チェックボックス"名前= " 合意" にチェック = " 確認" />
プロパティを埋め込みます：
- VARの URLは= ' PUG-test.htmlという' ; A（HREF = ' / ' + URL）リンク | | - = URL ' https://example.com/ ' A（HREF = URL）別のリンクは 同等です - > <a href= "/pug-test.html">リンク</a>の <a href= "https://example.com/">別リンクする</a>
ブール型プロパティ：
入力（タイプ= 「チェックボックスが」 確認） | | 入力（タイプ = 「チェックボックスが」 確認 = 真） | | 入力（タイプ = 「チェックボックスが」 確認 = 偽） | | 入力（タイプ = ' チェックボックス' にチェック = 真.toString（）） 等价于 - > の<input type = " チェックボックスが" 確認 = " 確認しました"/> <INPUT TYPE = " チェックボックスが" チェック = " チェック" /> <INPUT TYPE = " チェックボックス" /> <入力タイプ= " チェックボックスが" チェック = " 真" />
スタイル属性：
style（スタイル）のプロパティは、オブジェクトであってもよい（ちょうど他の共通の属性のような）文字列とすることができます
（スタイル= {色：' 赤'、背景：' 緑色' }）
等价于 - >
<a style= "color:red;background:green;">する</a>
クラスのプロパティ：
class（クラス）の属性は、複数のクラス名が含まれているアレイであってもよい（ちょうど他の一般的な属性のような）文字列にすることができます
- VARのクラス= [ ' FOO '、' バー'、' バズ' ] A（クラス = クラス） | | // -クラス属性もマージアレイに繰り返すことができる a.bang（クラス =クラスのクラス = [ ' ビング' ]） 等价于 - > <a クラス = "FOOバーバズ"> </a>の <A クラス = 「強打fooのバーバズチーン」 >
それはまた、クラス名にマッピングすることができる true か、 false 条件クラスを使用する場合に有用であるオブジェクト、。
- VAR CURRENTURL = ' /について' （クラス：= {CURRENTURL ===アクティブ' / 'のhref =} ' / ' ホーム） | | （クラス = {活性：CURRENTURL === ' /約' }のhref = ' /約' ）について 等价于 - > <a href= "/">ホーム</a>の < クラス = " アクティブ" HREF = " /について" >
/ ************************************************* ******リテラル****************************************** ****************** /
クラスリテラル：
構文を定義するために使用することができ.Classnameクラス： a.buttonの 相当する - > <a クラスは = "the Button"> </a>に 、この動作の名前はので省略した場合、一般的なようであるとして、divタグの使用を検討します：ラベル名オフ、それはデフォルト値です .content に相当 ---> <divのクラス = 「コンテンツ」 > </ div>
IDリテラル：
#Idname ID構文を定義するために使用することができます： ＃がメイン - Linkは 同等です > - <a id= "main-link"> </a>に 、この動作の名前は一般的なようであるとして、divタグの使用を検討します：あなたがタグ名を省略した場合ので、デフォルト値である場合には #content に相当 - > <divの上記のid =上記の「コンテンツ」 > </ div>