初心者向けのジェイドチュートリアル

かなりきちんとした正しい？

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

codepen

でこの例を表示します

しかし、ここでは止まりません。 JadeはIDとクラスに特別な速記を提供し、おなじみの表記法を使用してマークアップをさらに簡素化します。

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller

codepen

でこの例を表示します

ご覧のとおり、JadeはCSSセレクターを書くときに既によく知っている構文と同じ構文を使用しているため、クラスを見つけやすくなります。

テキストのブロック

段落タグがあり、その中に大きなブロックを配置するとしましょう。ジェイドは、すべての行の最初の単語をHTMLタグとして扱います。

この記事の最初のコード例で、罪のない期間に気づいたかもしれません。タグの後にピリオド（フルストップ）を追加すると、そのタグ内のすべてがテキストであり、ジェイドが各行の最初の単語をHTMLタグとして扱うのを停止することを示しています。

codepen

でこの例を表示します

そして、ポイントを家に帰るために、この例のPタグの後の期間を削除する場合、コンパイルされたHTMLは「I」という単語の「I'm」をオープニングタグとして扱います（これでケース、それはタグになります）。

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

強力な機能

基本をカバーしたので、マークアップをより賢くする強力な機能を覗いてみましょう。このチュートリアルの残りの機能については、次の機能について説明します。

ループ

javascript

補間
ミックス
JavaScriptを使用して
• javascript
• JadeはJavaScriptで実装されているため、JavaScriptをJavaScriptを使用するのは非常に簡単です。これが例です。

ここで何をしましたか？！ハイフンでラインを開始することで、JavaScriptの使用を開始したいと考えていることをJadeコンパイラに示します。上記のJadeコードをHTMLにコンパイルするときに得られるものは次のとおりです。

codepen

でこの例を表示します

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

コードが出力を直接追加しない場合、ハイフンを使用します。 JavaScriptを使用してJadeに何かを出力する場合は、=を使用します。上記のコードを調整して、シリアル番号を表示しましょう。

そしてヴォイラ、シリアル番号：

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

があります

codepen

でこの例を表示します

もちろん、この場合、順序付けられたリストの方がはるかに適していますが、ポイントが得られます。さて、XSSとHTMLが逃げるのが心配な場合は、詳細についてはドキュメントを読んでください。

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

ループ

Jadeは、JavaScriptに頼る必要がないように、優れたループ構文を提供します。配列の上にループしましょう：

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

そして、これは次のようにコンパイルされます：

codepen

でこの例を表示します

オブジェクトを反復し、ループ中に使用することもできます。詳細については、ドキュメントをご覧ください。

補間

このp = "こんにちは、" profilename "のようなテキストにJavaScriptをミックスするのは面倒になる可能性があります。お元気ですか？」ジェイドにはこれのためのエレガントなソリューションがありますか？あなたは賭けます。

<span><span><span><div</span> class<span>="movie-card"</span> id<span>="oceans-11"</span>></span>
</span>  <span><span><span><h1</span> class<span>="movie-title"</span>></span>Ocean's 11<span><span></h1</span>></span>
</span>  <span><span><span><img</span> src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul</span> class<span>="genre-list"</span>></span>
</span>    <span><span><span><li</span>></span>Comedy<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Thriller<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

codepen

でこの例を表示します

それはきちんとしていませんか？

ミックス

ミックスインは関数のようなものです。パラメーターを入力として使用し、マークアップを出力として与えます。ミキシンは、Mixinキーワードを使用して定義されています

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster(src="/img/oceans-11.png")
  ul.genre-list
    li Comedy
    li Thriller

混合物が定義されたら、構文で混合物を呼び出すことができます。

このようにhtmlを出力する

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

すべてをまとめる

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li Hello
    - }

これまでに学んだことすべてをまとめましょう。映画のタイトル、キャスト（サブアレイ）、評価、ジャンル、IMDBページへのリンク、映画のポスターのイメージパスを含む、各アイテムが素晴らしい映画を持っているとしましょう。アレイはこのようなものになります（読みやすさのために追加された空白）：

10本の映画があり、それぞれに素敵な映画カードを作りたいと思っています。最初は、IMDBリンクを使用する予定はありません。映画が5を超えると評価されている場合、親指を立てます。そうでなければ、親指を立てます。 Jadeのすべての優れた機能を使用して、次のモジュラーコードを作成します。

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

ムービーカードのミックスイン

を作成します

1. キャストリストを繰り返し、俳優を表示します。ジャンルでも同じことを行います。
   
   評価をチェックして、親指を表示するか、親指を下げて表示するかを決定します。
   • 映画リストを繰り返し、ミックスインを使用して映画ごとに1枚のカードを作成します。
   • それでは、最初にMixinを作成しましょう。
そこには多くのことが起こっていますが、私はそれが馴染みがあるように見えると確信しています - 私たちはこのチュートリアルでこれをすべて取り上げました。これで、ミックスインをループで使用する必要があります：

それだけです。それはエレガントですか、それとも何ですか？これが最終コードです。

- var x = 5;
div
  ul
    - for (var i=1; i<=x; i++) {
      li= i + ". Hello"
    - }

そして、これがコンパイルされたhtml：

です

<span><span><span><div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span>1. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>2. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>3. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>4. Hello<span><span></li</span>></span>
</span>    <span><span><span><li</span>></span>5. Hello<span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></div</span>></span></span>

しかし、ちょっと待ってください。映画のタイトルをクリックすると、映画のIMDBページに移動したい場合はどうなりますか？ 1つのラインを追加できます：a（href = movie.imdburl）ミックスインに

codepen

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

でこの例を表示します

結論

<span><span><span><div</span>></span>
</span>  <span><span><span><h1</span>></span>Famous Droids from Star Wars<span><span></h1</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>R2D2<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>C3PO<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="card"</span>></span>
</span>    <span><span><span><h2</span>></span>BB8<span><span></h2</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

私たちは、ジェイドについて何も知らないことから、美しいモジュラームービーカードの構築に行きました。 Jadeにはもっとたくさんありますが、物事をシンプルに保つためにいくつかの概念を光沢がありました。ですから、このチュートリアルがあなたの好奇心をそそり、もっと学ぶことを願っています。

重要なメモ：あなたの何人かがすでに知っているかもしれないように、ジェイドはソフトウェアの商標請求のためにパグに改名されました。将来、ジェイドに関する記事は新しい名前「パグ」または「パグジ」を使用します。初心者向けのジェイドチュートリアルに関するよくある質問（FAQ）

Jadeとは何ですか？Web開発において重要なのはなぜですか？

​​

Jadeは、Pugとしても知られていますが、Hamlの影響を強く影響を受け、node.jsおよびブラウザーのJavaScriptで実装されています。開発者がより簡潔な方法でHTMLテンプレートを作成できるようにする、クリーンでエレガントな構文を提供します。 Jadeは、HTMLコードの作成に費やす時間を短縮し、開発プロセスをより効率的にするため、Web開発において重要です。また、動的コードもサポートします。つまり、HTMLのレンダリング中に評価される変数と式を含めることができます。 JSおよびNPM（ノードパッケージマネージャー）は、コンピューターにインストールされています。これらを手に入れると、ターミナルまたはコマンドプロンプトにjade -gをインストールするコマンドNPMを実行することにより、システムにJadeをグローバルにインストールできます。これにより、コンピューター上の任意のディレクトリからJadeを使用できます。

HTMLをJadeに変換するにはどうすればよいですか？ 。手動で行うには、Jade構文とHTMLへのマップを理解する必要があります。たとえば、HTMLタグはJade Elements、HTML属性がJade属性などになります。オンラインツールはこのプロセスを自動化できますが、基礎となる変換ルールを理解することは依然として重要です。構文。 Jadeはインデントを使用してネストされた要素を表し、タグを閉じる必要はなく、HTMLよりも簡潔にします。ただし、HTMLはより広く使用され理解されており、一部の開発者は、その明示的なクロージングタグとインデントルールの欠如が読み取りと理解しやすいと感じています。 Jadeでは、-myntaxを使用して定義できます。たとえば、-var title = 'home'は、値「Home」を持つ変数のタイトルを定義します。その後、＃{}でプレフィックスすることにより、Jadeテンプレートでこの変数を使用できます。たとえば、H1 =タイトルはhtmlで

home

としてレンダリングされます。 Jadeは、変数、式、コントロール構造（IF-ELSEステートメントやループなど）、機能など、さまざまなJavaScriptコンストラクトをサポートしています。 JavaScriptコードをJadeテンプレートに含めるには、 - インクルードキーワードを使用します。たとえば、ヘッダーには、テンプレートのその時点でheader.hadeファイルの内容が含まれます。

Jadeでコメントするにはどうすればよいですか？

​​

Jadeのコメントは//を使用して追加できます。たとえば、//これはコメントであり、ジェイドコードにコメントを追加します。このコメントはレンダリングされたHTMLに含まれないことに注意してください。たとえば、Pこれは

としてレンダリングされるテキストです。これはHTMLのテキスト

です。テキストに次のようにプレフィックスを付けて、JadeのMarkdown Syntaxを使用することもできます。MarkDown。コード。 Jadeテンプレートをレンダリング中にエラーが発生した場合、Jadeは適切にキャッチして処理できる例外をスローします。

以上が初心者向けのジェイドチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。