A Jade Tutorial for Beginners

cantik kemas betul?

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

Salin selepas log masuk

Lihat contoh ini pada codepen

tetapi ia tidak berhenti di sini. Jade menyediakan kecenderungan khas untuk ID dan kelas, seterusnya memudahkan markup kami menggunakan notasi yang biasa:

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

Salin selepas log masuk

Lihat contoh ini pada codepen

Seperti yang anda lihat, Jade menggunakan sintaks yang sama seperti yang kita sudah biasa ketika menulis pemilih CSS, menjadikannya lebih mudah untuk melihat kelas.

blok teks

Katakan anda mempunyai tag perenggan dan anda ingin meletakkan blok besar teks di dalamnya. Jade merawat perkataan pertama setiap baris sebagai tag html - jadi apa yang anda lakukan?

anda mungkin melihat tempoh yang tidak bersalah dalam contoh kod pertama dalam artikel ini. Menambah tempoh (berhenti penuh) selepas tag anda menunjukkan bahawa segala -galanya di dalam tag itu adalah teks dan jed berhenti merawat perkataan pertama pada setiap baris sebagai tag 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.

Salin selepas log masuk

Lihat contoh ini pada codepen

dan hanya untuk pulang ke rumah, jika saya menghapuskan tempoh selepas tag P dalam contoh ini, HTML yang disusun akan merawat "I" dalam perkataan "I'm" sebagai tag pembukaan (dalam ini kes, ia akan menjadi tag).

Ciri -ciri kuat

Sekarang kita telah menutup asas -asas, mari kita mengintip beberapa ciri yang kuat yang akan menjadikan markup anda lebih pintar. Kami akan melihat ciri -ciri berikut dalam baki tutorial ini:

gelung
JavaScript
Interpolation
Mixins

menggunakan JavaScript di Jade

Jade dilaksanakan dengan JavaScript, jadi ia sangat mudah menggunakan JavaScript di Jade. Berikut adalah contoh.

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

Salin selepas log masuk

Apa yang kita lakukan di sini?! Dengan memulakan garis dengan tanda hubung, kami menunjukkan kepada pengkompil Jade yang kami mahu mula menggunakan JavaScript dan ia hanya berfungsi seperti yang kami harapkan. Inilah yang anda dapat apabila anda menyusun kod Jade di atas ke HTML:

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

Salin selepas log masuk

Lihat contoh ini pada codepen

Kami menggunakan tanda hubung apabila kod itu tidak menambah output secara langsung. Jika kita mahu menggunakan JavaScript untuk mengeluarkan sesuatu di Jade, kita gunakan =. Mari tweak kod di atas untuk menunjukkan nombor siri.

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

Salin selepas log masuk

dan voilà, kita kini mempunyai nombor siri:

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

Salin selepas log masuk

Lihat contoh ini pada codepen

Sudah tentu, dalam kes ini, senarai yang diperintahkan akan lebih sesuai, tetapi anda mendapat titik. Sekarang, jika anda bimbang tentang XSS dan HTML melarikan diri, baca dokumen untuk maklumat lanjut.

gelung

Jade menyediakan sintaks gelung yang sangat baik supaya anda tidak perlu menggunakan JavaScript. Mari kita gelung di atas array:

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

Salin selepas log masuk

dan ini akan disusun seperti berikut:

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

Salin selepas log masuk

Lihat contoh ini pada codepen

Anda boleh melangkah ke atas objek dan gunakan semasa gelung juga. Lihat dokumen untuk lebih.

Interpolation

Ia boleh menjengkelkan untuk mencampur JavaScript ke dalam teks seperti ini p = "Hi there," Profilename ". Bagaimana keadaan anda?". Adakah Jade mempunyai penyelesaian yang elegan untuk ini? Anda bertaruh.

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

Salin selepas log masuk

Lihat contoh ini pada codepen

Bukankah itu kemas?

Mixins

Mixins adalah seperti fungsi. Mereka mengambil parameter sebagai input dan memberikan markup sebagai output. Mixins ditakrifkan menggunakan kata kunci 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

Salin selepas log masuk

Setelah mixin ditakrifkan, anda boleh memanggil mixin dengan sintaks.

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.

Salin selepas log masuk

yang akan mengeluarkan html seperti ini:

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

Salin selepas log masuk

meletakkan semuanya bersama

mari kita buat semua yang telah kita pelajari setakat ini. Katakanlah kami mempunyai pelbagai filem yang bagus, dengan setiap item yang mengandungi tajuk filem, pelakon (sub-array), penarafan, genre, pautan ke halaman IMDB dan laluan imej untuk poster filem. Arahan akan kelihatan seperti ini (ruang putih ditambah untuk kebolehbacaan):

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

Salin selepas log masuk

Kami mempunyai 10 filem dan kami mahu membina kad filem yang bagus untuk setiap daripada mereka. Pada mulanya, kami tidak merancang untuk menggunakan pautan IMDB. Sekiranya filem dinilai di atas 5, kami memberikan jempol, jika tidak, kami memberikan jempol ke bawah. Kami akan menggunakan semua ciri Jade yang bagus untuk menulis beberapa kod modular untuk melakukan perkara berikut:

jadi mari buat mixin terlebih dahulu.

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

Salin selepas log masuk

Terdapat banyak perkara yang berlaku di sana, tetapi saya pasti kelihatan biasa - kami telah menutup semua ini dalam tutorial ini. Sekarang, kita hanya perlu menggunakan campuran kami dalam gelung:

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

Salin selepas log masuk

itu sahaja. Adakah itu elegan atau apa? Inilah kod akhir.

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

Salin selepas log masuk

Dan inilah html yang disusun:

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

Salin selepas log masuk

Tetapi tunggu sebentar. Bagaimana jika kita sekarang mahu pergi ke halaman IMDB filem apabila kita mengklik pada tajuk filem? Kita boleh menambah satu baris: a (href = movie.imdburl) ke mixin.

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?

Salin selepas log masuk

Lihat contoh ini pada codepen

Kesimpulan

Kami tidak mengetahui apa -apa tentang Jade untuk membina beberapa kad filem modular yang indah. Terdapat lebih banyak lagi untuk Jade, tetapi saya telah menyerlahkan beberapa konsep untuk menjaga perkara yang mudah. Oleh itu, saya harap tutorial ini menimbulkan rasa ingin tahu anda untuk mengetahui lebih lanjut.

Nota penting: Seperti yang anda ketahui, Jade telah dinamakan semula kepada Pug kerana tuntutan tanda dagangan perisian. Pada masa akan datang, artikel mengenai Jade akan menggunakan nama baru "Pug" atau "Pugjs".

Soalan Lazim (Soalan Lazim) Mengenai Jade Tutorial untuk Pemula

Apa itu Jade dan mengapa penting dalam pembangunan web? Ia menyediakan sintaks yang bersih dan elegan yang membolehkan pemaju menulis templat HTML dengan cara yang lebih ringkas. Jade adalah penting dalam pembangunan web kerana ia mengurangkan jumlah masa yang dihabiskan untuk menulis kod HTML, menjadikan proses pembangunan lebih cekap. Ia juga menyokong kod dinamik, yang bermaksud anda boleh memasukkan pembolehubah dan ekspresi yang dapat dinilai semasa memberikan HTML. JS dan NPM (Pengurus Pakej Node) dipasang pada komputer anda. Sebaik sahaja anda mempunyai ini, anda boleh memasang Jade secara global pada sistem anda dengan menjalankan perintah NPM Pasang Jade -g di terminal atau command prompt anda. Ini akan membolehkan anda menggunakan Jade dari mana -mana direktori di komputer anda.

Bagaimana saya menukar html ke jade? . Untuk melakukannya secara manual, anda perlu memahami sintaks Jade dan bagaimana ia memetakan ke HTML. Sebagai contoh, tag HTML menjadi elemen jed, atribut HTML menjadi atribut Jade, dan sebagainya. Alat dalam talian boleh mengautomasikan proses ini, tetapi masih penting untuk memahami peraturan penukaran yang mendasari.

Apakah perbezaan utama antara Jade dan HTML? sintaks. Jade menggunakan lekukan untuk mewakili elemen bersarang dan tidak memerlukan tag penutup, menjadikannya lebih ringkas daripada HTML. Walau bagaimanapun, HTML lebih banyak digunakan dan difahami, dan sesetengah pemaju mendapati tag penutupan yang jelas dan kekurangan peraturan lekukan lebih mudah dibaca dan difahami. Dalam Jade boleh ditakrifkan menggunakan sintaks -. Sebagai contoh, - var title = 'Home' mentakrifkan gelaran yang dinamakan dengan nilai 'Home'. Anda kemudian boleh menggunakan pembolehubah ini dalam templat jed anda dengan mengutamakannya dengan #{}. Sebagai contoh, H1 = tajuk akan menjadi

home

dalam html. Jade menyokong pelbagai pembinaan JavaScript, termasuk pembolehubah, ekspresi, struktur kawalan (seperti pernyataan jika else dan gelung), dan fungsi. Untuk memasukkan kod JavaScript dalam templat jed anda, awalannya dengan -. menggunakan kata kunci termasuk. Sebagai contoh, termasuk header akan memasukkan kandungan fail header.jade pada ketika itu dalam template.

Bagaimana saya mengulas di Jade?

Komen di Jade boleh ditambah menggunakan //. Sebagai contoh, // ini adalah komen akan menambah komen pada kod jed anda. Perhatikan bahawa komen ini tidak akan dimasukkan ke dalam HTML yang diberikan. Sebagai contoh, p ini adalah beberapa teks yang akan menjadi

Ini adalah beberapa teks

dalam HTML. Anda juga boleh menggunakan sintaks Markdown di Jade dengan mengutamakan teks anda dengan: markdown.