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

<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とクラスに特別な速記を提供し、おなじみの表記法を使用してマークアップをさらに簡(jiǎn)素化します。

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

でこの例を表示します

テキストのブロック

段落タグがあり、その中に大きなブロックを配置するとしましょう。ジェイドは、すべての行の最初の単語(yǔ)を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.

強(qiáng)力な機(jī)能

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

ループ

javascript

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

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

codepen

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

<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>

でこの例を表示します

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

<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

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

補(bǔ)間

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

<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

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

ミックス

ミックスインは関數(shù)のようなものです。パラメーターを入力として使用し、マークアップを出力として與えます。ミキシンは、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

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
    - }

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

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

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

です

<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>

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

結(jié)論

<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>

重要なメモ：あなたの何人かがすでに知っているかもしれないように、ジェイドはソフトウェアの商標(biāo)請(qǐng)求のためにパグに改名されました。將來(lái)、ジェイドに関する記事は新しい名前「パグ」または「パグジ」を使用します。初心者向けのジェイドチュートリアルに関するよくある質(zhì)問(wèn)（FAQ）

??

home

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

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

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

以上が初心者向けのジェイドチュートリアルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。