優れたテンプレート エンジン Jade は非常に読みやすく、開発効率を向上させます。
コードの作成を減らし、読みやすさを向上させ、生活の質を向上させます。 。 。
これはレイヤーごとです。 。 。
この翡翠の継ぎ目を見てください。
Jade の利点:
実際のところは分かりませんが、最大の利点は 非常に読みやすい 、開発効率が向上する です。
Node.js 環境が必要です。インストールされていない場合は、「Mac での Node.js 環境の構成
# 通过 npm 安装 jade$ npm install jade -g
index.jade
doctype htmlhtml head title hanks.xyz body p welcome to hanks.xyz
$ jade index.jade rendered index.html$ cat index.html<!DOCTYPE html><html><head><title>hanks.xyz</title></head><body><p>welcome to hanks.xyz</p></body></html>%
$ jade -P index.jade
<🎜 を使用すると、index.html のレンダリングを高速化できます。 >
<!DOCTYPE html><html> <head> <title>hanks.xyz</title> </head> <body> <p>welcome to hanks.xyz</p> </body></html>
$ jade -P -w index.jade
はタグを表し、カスタム タグ
にすることができます。 翡翠:
p welcome to hanks.xyzh1 h1 标题h2 h2 标题
<p>welcome to hanks.xyz</p><h1>h1 标题</h1><h2>h2 标题</h2>
jade:
div.title h1 title2 p somethingdiv div div.info(name="hanks")
<div class="title"> <h1>title2</h1> <p> something</p></div><div> <div> <div name="hanks" class="info"></div> </div></div>
h1.titleh2#title#t_id#t_id.title
<h1 class="title"></h1><h2 id="title"></h2><div id="t_id"></div><div id="t_id" class="title"></div>
a(herf="http://hanks.xyz") hanks.xyzinput#username(name="username",type="text",vaule="jade")
<a herf="http://hanks.xyz">hanks.xyz</a><input id="username" name="username" type="text" vaule="jade">
p. 1.aa 2.vv 3.cc
<p> 1.aa 2.vv 3.cc</p>
p. 1.aa<strong>AA</strong> 2.vv 3.ccp | 1.aa strong AA | 2.vv | 3.cc
<p> 1.aa<strong>AA</strong> 2.vv 3.cc</p><p>1.aa<strong>AA</strong>2.vv 3.cc</p>
div // h1 单行注释，输出到源文件 //- h3 非缓冲注释 // 这是一个 多行注释
<div> <!-- h1 单行注释，输出到源文件--> <!-- 这是一个 多行注释 --></div>
生成された HTML コードにコメントの内容を表示したくない場合は、二重スラッシュ // の後に単一行のコメントを付けることができます。水平線 -;
ダブルスラッシュ // 次のコメントの内容を改行してインデントしてブロックレベルのコメントにすることができます
参考記事:
Jade 中国語チュートリアル
MOOC ビデオ - Jade テンプレート エンジンを学習します
記事のソース: http://hanks.xyz
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
