Subiect: Tutorial Jade 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ă.
fundație
Voi scoate în evidență trei caracteristici principale ale lui Jade:
Etichete simple;
Adăugarea atributelor la etichete;
Blocuri de text.
Dacă doriți să citiți probyvat articol introducând exemplele de cod de mai jos, puteți utiliza CodePen și alege modul în care Jade preprotsesor HTML pentru tine, sau de a folosi compilatorul online pe site-ul oficial al lui Jade.
tag-uri
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.
atribute
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.
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.
cicluri
Ș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.
concluzie
Notă importantă. după cum unii dintre voi știu deja, Jade a fost redenumit Pug. În viitor, articole despre Jade vor folosi noul nume "Pug" sau "Pug.js".
Re: Tutorial pentru Jade pentru incepatori
N-am înțeles nimic, doar în cazul în care m-am masturbat.
(Klasseka)
Articole similare
Trimiteți-le prietenilor: