Jade — элегантный движок шаблонов, в основном используемый для серверных шаблонов в NodeJS. Проще говоря, Jade дает вам новый мощный способ написания разметки с рядом преимуществ по сравнению с обычным HTML .
Например, посмотрите на эту карту фильма в HTML:
<div> <h1>Ocean's Eleven</h1> <ul> <li>Comedy</li> <li>Thriller</li> </ul> <p>Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.</p> </div> Вот как выглядит та же самая разметка в Jade:
div h1 Ocean's Eleven ul li Comedy li Thriller p. Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.
Нефритовая версия элегантна и лаконична. Но дело не только в прекрасном синтаксисе. В Jade есть несколько действительно удобных функций, позволяющих писать модульную и многоразовую разметку. Прежде чем мы перейдем к этим мощным функциям, давайте сделаем краткий обзор основ.
Основы
Я собираюсь выделить три основных функции в Jade
- Простые теги
- Добавление атрибутов в теги
- Блоки текста
Если вы хотите попробовать это по ходу дела, вы можете использовать CodePen и выбрать Jade в качестве HTML-препроцессора или использовать онлайн-компилятор на официальной странице Jade для компиляции вашего Jade в HTML.
Простые теги
Как вы могли заметить ранее, в Jade нет закрывающих тегов. Вместо этого Jade использует отступ (т. Е. Пробел), чтобы определить, как вкладываются теги.
div p Hello! p World!
В приведенном выше примере, поскольку теги абзаца имеют отступ, они окажутся внутри тега div . Просто!
<div> <p>Hello!</p> <p>World!</p> </div>
Jade компилирует это точно, обрабатывая первое слово в каждой строке как тег, а последующие слова в этой строке обрабатываются как текст внутри тега.
Посмотреть этот пример на CodePen
Атрибуты
Все это прекрасно, но как мы можем добавить атрибуты к нашим тегам? Довольно просто на самом деле. Давайте вернемся к нашему первому примеру и добавим несколько классов и изображение плаката.
div(class="movie-card", id="oceans-11") h1(class="movie-title") Ocean's 11 img(src="/img/oceans-11.png", class="movie-poster") ul(class="genre-list") li Comedy li Thriller
Довольно аккуратно, верно?
<div class="movie-card" id="oceans-11"> <h1 class="movie-title">Ocean's 11</h1> <img src="/img/oceans-11.png" class="movie-poster"> <ul class="genre-list"> <li>Comedy</li> <li>Thriller</li> </ul> </div>
Посмотреть этот пример на CodePen
Но это не останавливается здесь. Jade предоставляет специальные сокращения для идентификаторов и классов, еще больше упрощая нашу разметку, используя знакомую запись:
div.movie-card#oceans-11 h1.movie-title Ocean's 11 img.movie-poster(src="/img/oceans-11.png") ul.genre-list li Comedy li Thriller
Посмотреть этот пример на CodePen
Как вы можете видеть, Jade использует тот же синтаксис, с которым мы уже знакомы при написании CSS-селекторов, что делает поиск классов еще проще.
Блоки текста
Допустим, у вас есть тег абзаца, и вы хотите поместить в него большой блок текста. Jade рассматривает первое слово каждой строки как тег HTML — так что вы делаете?
Вы могли заметить невинный период в первом примере кода в этой статье. Добавление точки (точка остановки) после вашего тега означает, что все, что находится внутри этого тега, является текстом, и Jade прекращает обрабатывать первое слово в каждой строке как тег HTML.
div p How are you? p. I'm fine thank you. And you? I heard you fell into a lake? That's rather unfortunate. I hate it when my shoes get wet.
Посмотреть этот пример на CodePen
И просто для понимания, если бы я убрал точку после тэга p в этом примере, скомпилированный HTML будет рассматривать «I» в слове «I’m» как открывающий тэг (в данном случае это будет тегом <i> ).
Мощные функции
Теперь, когда мы рассмотрели основы, давайте взглянем на некоторые мощные функции, которые сделают вашу разметку умнее. Мы рассмотрим следующие функции в оставшейся части этого урока:
- Loops
- JavaScript
- интерполирование
- Примеси
Использование JavaScript в Jade
Jade реализован с использованием JavaScript, поэтому в Jade очень просто использовать JavaScript. Вот пример.
- var x = 5; div ul - for (var i=1; i<=x; i++) { li Hello - }
Что мы здесь только что сделали ?! Начиная строку с дефиса, мы указываем компилятору Jade, что мы хотим начать использовать JavaScript, и он просто работает так, как мы ожидали. Вот что вы получите, скомпилировав код Jade выше в HTML:
<div> <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> </div>
Посмотреть этот пример на CodePen
Мы используем дефис, когда код напрямую не добавляет вывод. Если мы хотим использовать JavaScript для вывода чего-либо в Jade, мы используем = . Давайте настроим код выше, чтобы показать серийный номер.
- var x = 5; div ul - for (var i=1; i<=x; i++) { li= i + ". Hello" - }
И вуаля, теперь у нас есть серийные номера:
<div> <ul> <li>1. Hello</li> <li>2. Hello</li> <li>3. Hello</li> <li>4. Hello</li> <li>5. Hello</li> </ul> </div>
Посмотреть этот пример на CodePen
Конечно, в этом случае упорядоченный список будет гораздо более уместным, но вы получите точку. Теперь, если вы беспокоитесь о выходе из XSS и HTML, прочтите документацию для получения дополнительной информации .
Loops
Jade предоставляет отличный синтаксис зацикливания, так что вам не нужно прибегать к JavaScript. Давайте зациклим массив:
- var droids = ["R2D2", "C3PO", "BB8"]; div h1 Famous Droids from Star Wars for name in droids div.card h2= name
И это будет скомпилировано следующим образом:
<div> <h1>Famous Droids from Star Wars</h1> <div class="card"> <h2>R2D2</h2> </div> <div class="card"> <h2>C3PO</h2> </div> <div class="card"> <h2>BB8</h2> </div> </div>
Посмотреть этот пример на CodePen
Вы можете перебирать объекты и использовать циклы while . Проверьте документы для больше .
интерполирование
p= "Hi there, " + profileName + ". How are you doing?" JavaScript в текст, например, можно так: p= "Hi there, " + profileName + ". How are you doing?" , Есть ли у Джейд элегантное решение для этого? Вы ставите.
- var profileName = "Danny Ocean"; div p Hi there, #{profileName}. How are you doing?
Посмотреть этот пример на CodePen
Разве это не аккуратно?
Примеси
Mixins — это как функции. Они принимают параметры в качестве входных данных и дают разметку в качестве выходных данных. Миксины определяются с помощью ключевого слова mixin .
mixin thumbnail(imageName, caption) div.thumbnail img(src="/img/#{imageName}.jpg") h4.image-caption= caption
Как только миксин определен, вы можете вызвать миксин с синтаксисом + .
+thumbnail("oceans-eleven", "Danny Ocean makes an elevator pitch.") +thumbnail("pirates", "Introducing Captain Jack Sparrow!")
Который будет выводить HTML так:
<div class="thumbnail"> <img src="/img/oceans-eleven.jpg"> <h4 class="image-caption"> Danny Ocean makes an elevator pitch. </h4> </div> <div class="thumbnail"> <img src="/img/pirates.jpg"> <h4 class="image-caption"> Introducing Captain Jack Sparrow! </h4> </div>
Собираем все вместе
Давайте соединим все, что мы узнали до сих пор. Скажем, у нас есть хороший набор фильмов, каждый из которых содержит название фильма, актерский состав (подмассив), рейтинг, жанр, ссылку на страницу IMDB и путь к изображению для постера фильма. Массив будет выглядеть примерно так (пробел добавлен для удобства чтения):
- var movieList = [ { title: "Ocean's Eleven", cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"], genres: ["Comedy", "Thriller"], posterImage: "/img/oceans-eleven", imdbURL: "http://www.imdb.com/title/tt0240772/", rating: 7 } // etc... ];
У нас есть 10 фильмов, и мы хотим создать хорошие карточки для каждого из них. Изначально мы не планируем использовать ссылку IMDB. Если фильм оценен выше 5, мы даем ему большой палец вверх, в противном случае мы даем ему большой палец вниз. Мы будем использовать все приятные возможности Jade для написания модульного кода, чтобы сделать следующее:
- Создать миксин для видеокарты
- Переберите список актеров и покажите актеров. Мы сделаем то же самое с жанрами.
- Проверьте рейтинг и решите, показывать ли большие или большие пальцы вниз.
- Перебирайте список фильмов и используйте миксин, чтобы создать одну карту на фильм.
Итак, давайте сначала создадим миксин.
mixin movie-card(movie) div.movie-card h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre
Там много чего происходит, но я уверен, что это выглядит знакомо — мы рассмотрели все это в этом уроке. Теперь нам просто нужно использовать наш миксин в цикле:
for movie in movieList +movie-card(movie)
Вот и все. Это элегантно или как? Вот окончательный код.
- var movieList = [ { title: "Ocean's Eleven", cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"], genres: ["Comedy", "Thriller"], posterImage: "/img/oceans-eleven", imdbURL: "http://www.imdb.com/title/tt0240772/", rating: 9.2 }, { title: "Pirates of the Caribbean", cast: ["Johnny Depp", "Keira Knightley", "Orlando Bloom"], genres: ["Adventure", "Comedy"], posterImage: "/img/pirates-caribbean", imdbURL: "http://www.imdb.com/title/tt0325980/", rating: 9.7 } ]; mixin movie-card(movie) div.movie-card h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre for movie in movieList +movie-card(movie)
И вот скомпилированный HTML:
<div class="movie-card"> <h2 class="movie-title">Ocean's Eleven</h2> <img src="/img/oceans-eleven" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Julia Roberts</li> <li>George Clooney</li> <li>Brad Pitt</li> <li>Andy Garcia</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Comedy</li> <li>Thriller</li> </ul> </div> <div class="movie-card"> <h2 class="movie-title">Pirates of the Carribean</h2> <img src="/img/pirates-caribbean" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Johnny Depp</li> <li>Keira Knightley</li> <li>Orlando Bloom</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Adventure</li> <li>Comedy</li> </ul> </div>В<div class="movie-card"> <h2 class="movie-title">Ocean's Eleven</h2> <img src="/img/oceans-eleven" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Julia Roberts</li> <li>George Clooney</li> <li>Brad Pitt</li> <li>Andy Garcia</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Comedy</li> <li>Thriller</li> </ul> </div> <div class="movie-card"> <h2 class="movie-title">Pirates of the Carribean</h2> <img src="/img/pirates-caribbean" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Johnny Depp</li> <li>Keira Knightley</li> <li>Orlando Bloom</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Adventure</li> <li>Comedy</li> </ul> </div>В<div class="movie-card"> <h2 class="movie-title">Ocean's Eleven</h2> <img src="/img/oceans-eleven" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Julia Roberts</li> <li>George Clooney</li> <li>Brad Pitt</li> <li>Andy Garcia</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Comedy</li> <li>Thriller</li> </ul> </div> <div class="movie-card"> <h2 class="movie-title">Pirates of the Carribean</h2> <img src="/img/pirates-caribbean" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Johnny Depp</li> <li>Keira Knightley</li> <li>Orlando Bloom</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Adventure</li> <li>Comedy</li> </ul> </div>
Но подожди минутку. Что, если мы теперь хотим перейти на страницу IMDB фильма, когда нажимаем на название фильма? Мы можем добавить одну строку: a(href=movie.imdbURL) в миксин.
mixin movie-card(movie) div.movie-card a(href=movie.imdbURL) h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre
Посмотреть этот пример на CodePen
Вывод
Мы перешли от того, что ничего не знали о Джейд, к созданию красивых карточек для модульных фильмов. У Джейд есть еще много чего, но я размышлял над некоторыми понятиями, чтобы все было просто. Поэтому я надеюсь, что этот урок пробудил ваше любопытство, чтобы узнать больше .
Важное примечание: как некоторые из вас, возможно, уже знают, Jade был переименован в Pug из-за претензии на торговую марку программного обеспечения. В будущем в статьях о Jade будет использоваться новое имя «Pug» или «PugJS».