А так ця розмітка виглядає в форматі Jade:
Другий варіант здається більш коротким і елегантним. Але Jade - це не тільки симпатична розмітка. Jade має деякі дійсно корисні функції, що дозволяють писати модульний багаторазовий (з можливістю багаторазового використання) код. Але перед тим, як заглибитися, давайте зробимо огляд основ.
Я збираюся виділити три основні риси Jade:
- Прості теги;
- Додавання атрибутів в теги;
- Блоки тексту.
Якщо ви хочете вході прочитання статті пробувати приклади коду наведені нижче, ви можете скористатися CodePen і вибрати Jade як препроцесор для вашого HTML, або скористайтеся онлайн компілятором на офіційному сайті Jade.
Як ви могли помітити раніше, в Jade немає закривають тегів. Замість цього Jade використовує табуляцію для визначення вложеності тегів.
У наведеному вище прикладі, теги параграфів згідно їх табуляції при компіляції в кінцевому підсумку виявляться всередині тега div. Як просто!
Jade компілює це точно, розглядаючи перше слово в кожному рядку в якості тега, в той час як наступні слова на цьому рядку обробляються як текст всередині тега.
Все це, звичайно, добре, але як додавати атрибути нашим тегам? Насправді досить просто.
Давайте повернемося до нашого першого прикладу і додамо туди пару класів і якусь картинку-постер.
Як чудестно, чи не так?
Але навіщо зупинятися на досягнутому. Jade надає спеціальну стенографію для індіфікаторов і класів, що ще більше спрощує нашу розмітку, використовуючи знайомі всім позначення:
Як ви можете помітити, Jade використовує синтаксис анологично того, який ви використовуєте при написанні CSS-селекторів.
блоки тексту
Давайте уявимо таку ситуацію: у вас є тег <р> і ви хочете додати в нього досить таки великий обсяг тексту. Але стоп, адже Jade розглядає перше слово кожного рядка як новий HTML-тег - і як тут бути?
У найпершому прикладі ви вже могли помітити непоказну точку після тега параграфа. Додавання точки після вашого тега дає зрозуміти компілятору Jade, що все всередині даного тега є текстом.
Для повної ясності: в разі, якщо я не поставив би крапку після тега <р> в прикладі, то скомпільований HTML мав би в собі відкритий тег <і>, розірвавши словосполучення "I'm" на початку рядка.
Корисні функції
Тепер, коли ми розібралися з основами, давайте розглянемо деякі насправді корисні функції, які зроблять нашу розмітку розумнішими. Серед них:
І вуаля, у нас є нумерація:
Звичайно, в даному випадку нумерований список був би набагато доречніше, але ідею то ви вловили? Для більш детальної інформації ознайомтесь з документацією.
І це буде скомпільовано наступним чином:
Ви можете переміщатися по об'єктах масиву, а також исспользовать цикл while. Дізнайтеся більше прочитавши документацію.
інтерполяція
p = «Hi there," + profileName + ". How are you doing?"
може почати мусолити вам очей. Хіба Jade не має більш елегантного рішення даної задачі? Посперечаємося?
Хіба так не акуратніше?
Міксини, вони як функції, вони приймають параметри в якості вхідних даних і генерують відповідне розмітку. Міксини оголошуються за допомогою ключового слова mixin.
Після того, як миксин було оголошено, ви можете його викликати за допомогою символу +.
Що буде скомпільовано як:
Збираємо всі разом
Давайте зберемо все, що ми встигли вивчити, в один приклад. Скажімо, у нас є масив фільмів, кожен об'єкт якого містить назву фільму, акторський склад (під-масив), рейтинг, жанр, посилання на IMDB-сторінку і шлях до картинки (яка буде використана в якості постера фільму). Масив буде мати приблизно такий виглядає:
У нас є 10 фільмів і ми хочемо зробити симпатичну розмітку для кожного з них. Спочатку, ми не передбачили використання посилання на IMDB-сторінку фільму. Якщо рейтинг фільму вище 5, ми даємо йому іконку з піднятим великим пальцем руки вгору, в іншому випадку, великий палець - вниз. Ми використовуємо всі вище перераховані корисні функції Jade для написання даного модульного коду, який виконає наступні завдання:
- Створити миксин під назвою movie-card
- Перебрати масив і вивести акторський склад.
- Перебрати масив і вивести жанри.
- Перевірити рейтинг фільму і привласнити йому соответсвующей іконку.
І так, створимо миксин:
В даному коді багато чого відбувається, але я впевнений, що він вам зрозумілий, так як ми це вже пройшли. Тепер, все, що нам потрібно, - це викликати даний миксин в циклі:
І все! Хіба це не класно. Ось остаточний код:
А так код буде виглядати після компіляції:
Але стоп, стривайте хвилинку! А що, якщо тепер нам потрібна возвожность переходити на IMDB-сторінку фільму при натисканні на його назву? Нам всього лише потрібно додати один рядок
Важливе зауваження: як же дехто між вами, можливо, вже знають, Jade був перейменований в Pug. В майбутньому, статті про Jade використовуватимуть нову назву «Pug» або «Pug.js».