テンプレートエンジン
パグ
index.js)いくつかの設定
CONST興亜=( "KOA"を必要とします)。 constのルータ =(「興亜-ルータ」が必要)。 CONSTビューは =( "KOA-ビュー"を必要とします)。 アプリましょう = 新しい興亜(); ルータましょう = 新しい)ルータ(; app.use(ビュー(__ DIRNAME + "/ビュー" 、{ マップ:{ HTML: "パグ" } }))。 router.get( "/"、非同期CTX => { // ctx.body = "こんにちは"; =ユーザーを聞かせて、[ {名: "张三"、年齢:20、高さ: "178px" }、 {名前:}、 {名前: "王五"、年齢:22、高さ: "173px" } ] のawait ctx.render( "index.pug" 、{ データ: "我是数据" 、 ユーザ })。 }) app.use(router.routes())。 app.listen( 3000)。
!index.pug)としてブラウザにレンダリングされたHTMLの主な内容
注目点:タブは、タブのスタイルでインデントします
<!DOCTYPE HTML> HTML(LANG = "EN" ) ヘッド メタ(文字コード = "UTF-8" ) メタ(名 = "ビューポート"、コンテンツ= "幅=装置幅、初期の規模= 1.0" ) タイトルドキュメント スタイル。 .mydiv { 幅:100pxに。高さ:100pxに。国境:1pxの固体赤。 } 体 H1我是标题 DIV我是DIV DIV(クラス = "mydiv" )我是类名为mydiv .mydiv2(スタイル = {幅: "100ピクセル"、高さ"100ピクセル"、ボーダー: "1ピクセル固体ピンク" // - 私は、最初の行だった 私は2番目の行である 。// 私はHTMLのコメントだ // 私の最初の行は、 私は2列目だった のdiv | こんにちは - LET列str =「こんにちは」 のp#{STR} のp#{ }データ UL 各項目は、インデックス中のユーザー のLi(クラス = "こんにちは" )名である:#{item.name};年齢:#{item.age};上昇がある:#{item.height};インデックスそれらは、インデックス#{} - 用(I = 0せ; I <4; I ++。 ) スパンをデータI {I}#1のうち回転させる <BR /> - 1せNUM = ケースNUM 1 P NUMである 2つの P NUMディ デフォルト P NUM他の値は、 ミックスインmyDivは 私は非常に一般的であるDIV DIV + myDiv + myDiv ミックスインPET(名前、性別) その性別;#{名前}であるP性別} {# + PET( "犬"、 "男性" ) + PET( "CAT"、 "母" ) common.pug含む スクリプト(タイプ = "テキスト/ JavaScriptを" ) はconsole.log( 111)
common.pug)テンプレート
私は、共通のテンプレートh2としています