ホームページ > 記事 > ウェブフロントエンド > Node.jsテンプレートエンジンjadeのサンプル解説
Node.jsテンプレートエンジンjadeのサンプル解説
- 小云云オリジナル
- 2018-02-06 09:19:431705ブラウズ
この記事では主に、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 コード:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>欢迎学习jade</h3> </body> </html>
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
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>jade template engine</title> </head> <body> <h1>jade template engine</h1> <h1>jade template engine</h1> <h1>jade template engine</h1> <h1>jade template engine</h1> <p id="box" class="box1 box2 box3"></p> <p id="abc" class="box1 box2 box3"></p> <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a> <input type="button" value="点我"><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> </body> </html>
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 書き方: テキストの前に垂直バー (|) を使用し、その後にコンテンツを続けます
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='御姐') | 御姐コンパイル後:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>jade模板引擎学习-by ghostwu</title> </head> <body> <h3>单行注释</h3> <!-- p.box.box2 这是一段p--> <h3>不会编译到html文件的注释</h3> <h3>块注释,也叫多行注释</h3> <h3>这里不是注释</h3> <input type="checkbox" name="meinv" value="仙女">仙女 <input type="checkbox" name="meinv" value="御姐">御姐 </body> </html>1、単一行コメント
// p.box.box2 これは p2 の段落であり、jade でコメントされるだけで、HTML ファイルにはコンパイルされません//- p#box.box2.box33,ブロック コメント (複数行のテキスト コメント)、コメントされた内容は、[新しい行を開始] にする必要があります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(): 変数を大文字に変換します
{
"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 ファイルのデータをテンプレートに転送します コンパイル結果:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>JADE模板引擎学习-BY GHOSTWU</title> </head> <body> <h3>跟着ghostwu学习jade</h3> </body> </html>関連おすすめ: Node.jsテンプレートエンジンJadeの詳細解説
以上がNode.jsテンプレートエンジンjadeのサンプル解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。