ホームページ >ウェブフロントエンド >htmlチュートリアル >Jade_html/css_WEB-ITnose を学ぶ
Jade_html/css_WEB-ITnose を学ぶ
- WBOYオリジナル
- 2016-06-21 08:52:411759ブラウズ
優れたテンプレート エンジン Jade は非常に読みやすく、開発効率を向上させます。
なぜジェイドが必要なのですか?
コードの作成を減らし、読みやすさを向上させ、生活の質を向上させます。 。 。
これはレイヤーごとです。 。 。
この翡翠の継ぎ目を見てください。
Jade の利点:
- 優れた可読性
- 柔軟なインデント
- ブロック展開
- コードのデフォルト エンコードされてセキュリティが強化されています
- コンパイルおよび実行時のコンテキストエラーレポート
- コマンドラインコンパイルのサポート
- HTML5 モード
- オプションのメモリキャッシュ
- フィルター解析ツリー処理の使用
実際のところは分かりませんが、最大の利点は 非常に読みやすい 、開発効率が向上する です。
Node.js 環境が必要です。インストールされていない場合は、「Mac での Node.js 環境の構成
Jade のインストール
# 通过 npm 安装 jade$ npm install jade -g始めましょう
Index.jade ファイルを作成します
index.jade
doctype htmlhtml head title hanks.xyz body p welcome to hanks.xyzそれはとても簡単です。 次に、jade ファイルを HTML ファイルにレンダリングし始めます
$ 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>%レンダリングされたindex.htmlファイルが確認できます。圧縮されています。 -P パラメーター形式
$ jade -P index.jadehtml:
<!DOCTYPE html><html> <head> <title>hanks.xyz</title> </head> <body> <p>welcome to hanks.xyz</p> </body></html>-w パラメータを追加して、jade ファイルの変更を監視し、HTML ファイルを自動的にレンダリングして更新することもできます
$ jade -P -w index.jade基本構文
タグ
デフォルトでは、各行の先頭にある最初の単語
はタグを表し、カスタム タグ
にすることができます。 翡翠:
p welcome to hanks.xyzh1 h1 标题h2 h2 标题html:
<p>welcome to hanks.xyz</p><h1>h1 标题</h1><h2>h2 标题</h2>の略語を使用します。 を入力してタグのネスト関係を表します。
jade:
div.title h1 title2 p somethingdiv div div.info(name="hanks")html:
<div class="title"> <h1>title2</h1> <p> something</p></div><div> <div> <div name="hanks" class="info"></div> </div></div>クラスと ID 翡翠:
h1.titleh2#title#t_id#t_id.titlehtml:
<h1 class="title"></h1><h2 id="title"></h2><div id="t_id"></div><div id="t_id" class="title"></div>### 属性 jade:
a(herf="http://hanks.xyz") hanks.xyzinput#username(name="username",type="text",vaule="jade")html:
<a herf="http://hanks.xyz">hanks.xyz</a><input id="username" name="username" type="text" vaule="jade">プレーンテキスト jade:
p. 1.aa 2.vv 3.cchtml:
<p> 1.aa 2.vv 3.cc</p>p タグの後に が続くことに注意してください。ジェイド:
p. 1.aa<strong>AA</strong> 2.vv 3.ccp | 1.aa strong AA | 2.vv | 3.cchtml:
<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 非缓冲注释 // 这是一个 多行注释html:
<div> <!-- h1 单行注释，输出到源文件--> <!-- 这是一个 多行注释 --></div>jade は二重スラッシュを使用します/ / 単一行のコメントを作成します。
生成された HTML コードにコメントの内容を表示したくない場合は、二重スラッシュ // の後に単一行のコメントを付けることができます。水平線 -;
ダブルスラッシュ // 次のコメントの内容を改行してインデントしてブロックレベルのコメントにすることができます
参考記事:
Jade 中国語チュートリアル
MOOC ビデオ - Jade テンプレート エンジンを学習します
記事のソース: http://hanks.xyz
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。