Тема: Урок за начинаещи от Jade
И този план изглежда Jade формат:
Втори пример изглежда по-кратък и по-елегантен. Но Jade - е не само приятно оформление. Джейд има някои наистина полезни функции, които ви позволяват да пишат модулна за многократна употреба (с многократна употреба) код. Но преди да се рови по-дълбоко, да направи преглед на основните неща.
фундамент
Отивам да подчертая три основни характеристики на Jade:
Прости тагове;
Добавяне на атрибути към етикетите;
Блокове от текст.
Ако искате да прочетете статия probyvat влизане примери кода по-долу, можете да използвате CodePen и изберете как Jade preprotsesor на HTML за вас, или да използвате онлайн събиране на информация на официалния сайт на Джейд.
тагове
Както може би вече забелязали в Jade не затварящи тагове. Вместо Jade използва раздел, за да определят вложени тагове.
В горния пример, ал тагове съгласно раздел си в компилация в крайна сметка ще бъде в рамките на DIV таг. Колко просто!
Jade той съставя точно, като се има предвид първата дума от всяка линия като етикет, а след думите на тази линия, се третират като текст в маркера.
атрибути
Всичко това, разбира се, е добре, но как да добавите атрибути на нашите етикети? Всъщност, това е съвсем проста.
Да се върнем към първата ни например, и да добавите няколко класове и някои картина с балдахин.
Както chudestno, нали?
Но защо да спираме дотук. Jade предвижда специална съкратен indifikatorov и класове, което допълнително улеснява нашата оформление с помощта на всички запознати нотация:
Както можете да видите, Jade използва синтаксис подобен в поведението на този, който се използва при писане на CSS-селектори.
блокове текст
Да си представим следната ситуация: имате маркер <р> и искате да добавите доста голямо количество текст. Но чакайте, защото Jade обмисля първата дума от всяка линия като нов HTML тагове - и как може да бъде?
В първия пример, може би сте забелязали невзрачен точка след точка маркер. Добавяне на точка след маркера Ви става ясно на компилатора Jade, че всичко вътре на този таг е текстът.
За по-голяма яснота, ако не ще постави срок след маркера <р> в примера, компилиран HTML ще има обществен етикет <і>, чупене на фразата "Аз съм" в началото на линията.
Сега, когато сме измислили основите, нека да разгледаме някои наистина полезни функции, които правят нашия маркиране по-умни. Сред тях са:
И готово, ние имаме номерация:
Разбира се, в този случай, номериран списък ще бъде много по-подходящ, но идеята, че можете да го получа? За повече информация, вижте документацията.
цикли
И това ще бъде съставен, както следва:
Можете да навигирате в масив от обекти, както и isspolzovat докато контур. Научете повече, като прочетете документацията.
заключение
Важна забележка. като някои от вас може би вече знаете, Jade е преименуван на мопс. В бъдеще, Jade статия ще използва новото име «Пъг» или «Pug.js».
Re: Урок за начинаещи от Jade
Аз не разбирам, само в случай, идиот.
(Klasseka)
Свързани статии