Tutorial pentru jad pentru incepatori

Deci acest aspect arată în format Jade:

A doua opțiune pare mai scurtă și mai elegantă. Dar Jade nu este doar un markup destul. Jade are câteva caracteristici utile care vă permit să scrieți un cod modular, reutilizabil (reutilizabil). Dar înainte de a merge mai adânc, să revizuim elementele de bază.

Voi scoate în evidență trei caracteristici principale ale lui Jade:

Etichete simple;
Adăugarea atributelor la etichete;
Blocuri de text.

Dacă doriți să introduceți exemplele de cod enumerate mai jos, puteți utiliza CodePen și puteți alege Jade ca preprocesor pentru codul HTML sau utilizați compilatorul online pe site-ul oficial Jade.

După cum probabil ați observat mai devreme, nu există tag-uri de închidere în Jade. În schimb, Jade utilizează o filă pentru a defini cuiburile de etichete.

În exemplul de mai sus, etichetele paragrafelor în funcție de tabularea lor la compilare vor ajunge în interiorul etichetei div. Cât de simplu!

Jade compilează exact acest lucru, uitandu-se la primul cuvânt din fiecare rând ca o etichetă, în timp ce cuvintele ulterioare de pe acea linie sunt tratate ca text în interiorul etichetei.

Toate acestea, bineînțeles, sunt bune, dar cum să adăugăm atribute la etichetele noastre? De fapt este destul de simplu.
Să ne întoarcem la primul nostru exemplu și să adăugăm câteva clase și un poster de imagine.

Cât de ciudat, nu-i așa?

Dar de ce să te oprești acolo. Jade oferă o stenogramă specială pentru indicatori și clase, ceea ce simplifică și mai mult marcajul nostru, folosind familiar toate denumirile:

După cum puteți vedea, Jade folosește aceeași sintaxă ca cea pe care o folosiți la scrierea selectorilor CSS.

Blocuri de text

Să ne imaginăm această situație: aveți o etichetă <р> și doriți să adăugați o cantitate mare de text la acesta. Dar opriți, pentru că Jade tratează primul cuvânt al fiecărei linii ca o nouă etichetă HTML - și cum să fiu acolo?

În primul exemplu, ați observat deja un punct nedefinit după eticheta paragrafului. Adăugarea unui punct după eticheta dvs. face clar pentru compilatorul Jade că totul din această etichetă este text.

Pentru claritate completă: în cazul în care nu am pus un punct după etichetă <р> în exemplu, HTML-ul compilat ar avea o etichetă deschisă <і>, rupând fraza "Eu sunt" la începutul liniei.

Caracteristici utile

Acum, că am dat seama de elementele de bază, să ne uităm la unele funcții cu adevărat utile care vor face markupul nostru mai inteligent. Printre acestea:

Și voila, avem o numerotare:

Desigur, în acest caz, lista numerotată ar fi mult mai potrivită, dar ați obținut ideea? Pentru mai multe informații, citiți documentația.

Și va fi compilat după cum urmează:

Puteți naviga printre obiectele matricei și utilizați bucla în timp. Citiți mai multe după ce citiți documentația.

interpolare

p = "Bună ziua", + nume_profil +. "Cum te descurci?"

pot începe să vă ling ochii. Jade nu are o soluție mai elegantă la această problemă? Putem să ne certăm?

Nu este așa de curat?

Se amestecă, ele sunt ca și funcții, ia parametrii ca date de intrare și generează marcajul corespunzător. Amestecurile sunt anunțate folosind cuvântul cheie mixin.

După anunțarea amestecului, îl puteți apela cu simbolul +.

Ce se va compila ca:

Punând totul împreună

Să colectăm tot ce am reușit să învățăm, un exemplu. De exemplu, avem o serie de filme, fiecare obiect care conține un nume de film, o compoziție (sub-array), un rating, un gen, un link către pagina IMDB și o cale către imagine (care va fi utilizată ca un poster de film). Matricea va avea ceva de genul:

Avem 10 filme și dorim să facem un marcaj frumos pentru fiecare dintre ele. Inițial, nu am avut în vedere utilizarea unui link către pagina IMDB a filmului. Dacă ratingul filmului este mai mare de 5, îi dăm pictograma cu degetul mare, altfel degetul mare este în jos. Folosim toate funcțiile utile de mai sus pentru a scrie acest cod modular, care îndeplinește următoarele sarcini:

Creați un mixin numit film-card
- Sortați matricea și extrageți distribuția.
- Răsfoiți matricea și afișați genurile.
- Verificați evaluarea filmului și alocați-i pictograma corespunzătoare.

Editați matricea de filme și utilizați mixul pentru a crea marcajul.

Și astfel, creați un amestec:

În acest cod, multe lucruri se întâmplă, dar sunt sigur că înțelegeți acest lucru, deoarece am trecut deja. Acum, tot ce avem nevoie este să numim acest mixin într-o buclă:

Și asta este! Nu e misto. Iată codul final:

Și codul va arăta astfel după compilare:

Dar opriți-vă, așteptați un minut! Și dacă acum avem nevoie de capacitatea de a merge la pagina IMDB a filmului când faceți clic pe numele său? Trebuie doar să adăugăm o singură linie

Notă importantă: După cum unii dintre voi știți deja, Jade a fost redenumit Pug. În viitor, articole despre Jade vor folosi noul nume "Pug" sau "Pug.js".

Articole similare

Pagina anterioară