Node.jsテンプレートエンジンjadeのサンプル解説

この記事では主に、Node.js テンプレート エンジンに基づくチュートリアル - jade のクイック学習と実践的な戦闘 1 を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

環境の準備:

jadeをグローバルにインストール: npm install jade -g

プロジェクトpackage.jsonを初期化: npm init --yes

インストールが完了したら、jade --helpを使用してコマンドラインを表示できます。 jadeの使用法

1. プロジェクトディレクトリに新しいindex.jadeファイルを作成します

inde.jadeコード:

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h3 欢迎学习jade

1. ラベルはHTMLのインデント形式で記述されます

2。括弧を使用します

3. ラベルに content がある場合は、タグ

の後に直接記述できます。次に、コマンド ラインで jade -P Index.jade を使用して、index.jade ファイルを Index.html ファイルにコンパイルします。 (コードをインデント形式に整理するため、このパラメーターが指定されていない場合、index.html は圧縮形式なので読みにくくなります)

コンパイルされたindex.html コード:

nbsp;html>

 
  <meta>
  <title></title>
 
 
  <h3 id="欢迎学习jade">欢迎学习jade</h3>
 

2.クラス、ID、複数行のテキストとして新しいindex2.jadeファイルを作成します。コードは次のとおりです:

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    h1 jade template engine
    p#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h3.box1.box2(class='abc def')
    a(href='http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

コンパイルコマンドを実行します: jade -P にindex2.jadeをコンパイルします。 ghostwu.htmlファイルにコンパイルしたコードは以下の通りです:

nbsp;html>

 
  <meta>
  <title>jade template engine</title>
 
 
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <h1 id="jade-template-engine">jade template engine</h1>
  <p></p>
  <p></p>
  <h3></h3><a>淘宝</a>
  <input><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 

1, p#box.box1.box2(class ='box3') この書き方はemmetの#id属性ポイント(. ) これはクラス属性括弧であり、属性

2、#abc.box1.box2.box3 を記述する方法でもあり、要素のラベル名はまったくありません。デフォルトは p タグにこれらの属性を加えたものです。

3、複数行テキストを書く 2 つの方法

p.

1、これは

helloです

2,test
3,string

複数行テキストの最初の方法書き込み: p タグの後には a が続く必要があります

p

| 1、これは

強いです

3、テスト文字列

いいえ2 書き方: テキストの前に垂直バー (|) を使用し、その後にコンテンツを続けます

3. コメント

jade テンプレート コード:

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h3 单行注释
    // p.box.box2 这是一段p
    h3 不会编译到html文件的注释
    //- p#box.box2.box3
    h3 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h3 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

コンパイル後:

nbsp;html>

 
  <meta>
  <title>jade模板引擎学习-by ghostwu</title>
 
 
  <h3 id="单行注释">单行注释</h3>
  <!-- p.box.box2 这是一段p-->
  <h3 id="不会编译到html文件的注释">不会编译到html文件的注释</h3>
  <h3 id="块注释-也叫多行注释">块注释,也叫多行注释</h3>
  <h3 id="这里不是注释">这里不是注释</h3>
  <input>仙女
  <input>御姐
 

1、単一行コメント

// p.box.box2 これは p

2 の段落であり、jade でコメントされるだけで、HTML ファイルにはコンパイルされません

//- p#box.box2.box3

3,ブロック コメント (複数行のテキスト コメント)、コメントされた内容は、[新しい行を開始] にする必要があります

4. チェックボックスの後ろの表示テキストに注意してください。新しい行を開始して後ろに記述しないでください。 4. Jade テンプレートの実際のメニュー

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

Compile (jade インデックス。jade -P -w 後の効果): -w: ファイルの変更をリアルタイムで監視し、保存後すぐに結果を更新します。最新のフロントエンド開発で人気のホットロード技術

5. 変数の解釈

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    p#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

# {}: 変数を解釈可能、toUpperCase(): 変数を大文字に変換します

実行中に json ファイル データをテンプレートに渡しますCompilation,

data.json ファイルを新規作成 data

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h3 #{content}

コンパイルコマンド:jadeindex2.jade -P - O data.json -O で json ファイルを指定し、json ファイルのデータをテンプレートに転送します

コンパイル結果:

nbsp;html>

 
  <meta>
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 
 
  <h3 id="跟着ghostwu学习jade">跟着ghostwu学习jade</h3>
 

関連おすすめ:

Node.jsテンプレートエンジンJadeの詳細解説

以上がNode.jsテンプレートエンジンjadeのサンプル解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。