node(二)

テンプレートエンジン

パグ

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としています

 

おすすめ

転載: www.cnblogs.com/Afanadmin/p/12452973.html