Тема: туторіал по Jade для початківців
А так ця розмітка виглядає в форматі Jade:
Другий варіант здається більш коротким і елегантним. Але Jade - це не тільки симпатична розмітка. Jade має деякі дійсно корисні функції, що дозволяють писати модульний багаторазовий (з можливістю багаторазового використання) код. Але перед тим, як заглибитися, давайте зробимо огляд основ.
основи
Я збираюся виділити три основні риси Jade:
Прості теги;
Додавання атрибутів в теги;
Блоки тексту.
Якщо ви хочете вході прочитання статті пробувати приклади коду наведені нижче, ви можете скористатися CodePen і вибрати Jade як препроцесор для вашого HTML, або скористайтеся онлайн компілятором на офіційному сайті Jade.
Теги
Як ви могли помітити раніше, в Jade немає закривають тегів. Замість цього Jade використовує табуляцію для визначення вложеності тегів.
У наведеному вище прикладі, теги параграфів згідно їх табуляції при компіляції в кінцевому підсумку виявляться всередині тега div. Як просто!
Jade компілює це точно, розглядаючи перше слово в кожному рядку в якості тега, в той час як наступні слова на цьому рядку обробляються як текст всередині тега.
атрибути
Все це, звичайно, добре, але як додавати атрибути нашим тегам? Насправді досить просто.
Давайте повернемося до нашого першого прикладу і додамо туди пару класів і якусь картинку-постер.
Як чудестно, чи не так?
Але навіщо зупинятися на досягнутому. Jade надає спеціальну стенографію для індіфікаторов і класів, що ще більше спрощує нашу розмітку, використовуючи знайомі всім позначення:
Як ви можете помітити, Jade використовує синтаксис анологично того, який ви використовуєте при написанні CSS-селекторів.
блоки тексту
Давайте уявимо таку ситуацію: у вас є тег <р> і ви хочете додати в нього досить таки великий обсяг тексту. Але стоп, адже Jade розглядає перше слово кожного рядка як новий HTML-тег - і як тут бути?
У найпершому прикладі ви вже могли помітити непоказну точку після тега параграфа. Додавання точки після вашого тега дає зрозуміти компілятору Jade, що все всередині даного тега є текстом.
Для повної ясності: в разі, якщо я не поставив би крапку після тега <р> в прикладі, то скомпільований HTML мав би в собі відкритий тег <і>, розірвавши словосполучення "I'm" на початку рядка.
Тепер, коли ми розібралися з основами, давайте розглянемо деякі насправді корисні функції, які зроблять нашу розмітку розумнішими. Серед них:
І вуаля, у нас є нумерація:
Звичайно, в даному випадку нумерований список був би набагато доречніше, але ідею то ви вловили? Для більш детальної інформації ознайомтесь з документацією.
цикли
І це буде скомпільовано наступним чином:
Ви можете переміщатися по об'єктах масиву, а також исспользовать цикл while. Дізнайтеся більше прочитавши документацію.
висновок
Важливе зауваження. як деякі з вас, можливо, вже знають, Jade був перейменований в Pug. В майбутньому, статті про Jade використовуватимуть нову назву «Pug» або «Pug.js».
Re: туторіал по Jade для початківців
Нічого не зрозумів, про всяк випадок подрочил.
(Классека)