Pug что значит

Перевод «pugs» на русский

Its ideal weight should not exceed 8.1 kg, but many pugs weigh more because of their habit of begging for food.

Его идеальный вес не должен превышать 8,1 кг, однако многие мопсы весят больше из-за своей привычки попрошайничать еду.

According to the standard, there are pugs with different proportions of the head.
Согласно стандарту, существуют мопсы с различными пропорциями головы.
I turned them into little, wiggly pugs.
Я превратил их в маленьких мопсов.

The loving and friendly nature of pugs have made this breed a favorite among many dog lovers and breeders.

Любящий и дружественный характер мопсов сделали эту породу фаворитом среди многих любителей собак и заводчиков.

But it is interesting for children to watch pugs that can play real performances, entertaining others with their movements, original expression of the muzzle and unusual sounds resembling groaning and snoring.

Но интересно наблюдать за мопсами, которые могут разыгрывать настоящие спектакли, развлекая окружающих своими движениями, оригинальным выражением мордочки и необычными звуками, напоминающими кряхтенье и сопенье.

In the second half of the 19th century, the popularity of steel conquer short-haired dogs, during which King Charles began to interbreed with pugs and Chinese hins.

Во второй половине 19 века популярность стали завоевывать короткомордые собаки, в процессе чего кинг чарльзы стали скрещиваться с мопсами и китайскими хинами.

Pug – это не мопс, тогда кто?

Pug – это HTML препроцессор, написанный на JS для работы на платформе Node.js, с одной единственной целью – ускорить верстку. За счет чего верстать станет быстрее?

Нет открывающих и закрывающих тегов, вложенность регулируется отступами. Давайте сравним, как бы мы написали данный код, в обычном HTML и с Pug.

HTML

Pug

div
h1 Pug
p HTML
p шаблонизатор

Редактирование текста

Как редактировать текст, если нет закрывающих тегов? Разработчики, проявили милосердие и кое-что оставили для нас – закрывающие и открывающие теги, внутри текста.

HTML

Верстаю с препроцессором Pug.

Pug

p Верстаю с препроцессором Pug.

Как записать тип документа.

HTML

Pug

doctype html

Создание и вывод переменных.

— var title = » Pug – это не мопс «;
— var who = «Точно не собака.»;
— var what = «шаблонизатор и препроцессор«;

h1= title
p Тогда, кто это? #
p Не кто, а что:

Pug – это не мопс

Тогда, кто это? Точно не собака.

Не кто, а что: шаблонизатор и препроцессор

Переиспользование блоков через миксины.

HTML

Pug

mixin dog(breed)
li.dog= breed

Однако браузер не поймет то, что мы тут понаписали. Поэтому Pug код сначала нужно скормить компилятору. На компьютере должна быть установлена программа Node.js и редактор кода VS code (необязательно).

Установка Pug

1. Открыть терминал у VS code
2. Выполнить команду $ npm install pug
3. Затем npm install pug-cli –g
4. Команда pug –help выведет список всех доступных команд.
5. Создать папку с файлом, index.pug
6. Выполнить команду pug -w index.pug
7. На выходе, получите скомпилированный index.html, в той же папке

Заключение

Хочу предостеречь тех, кто только начинает изучать HTML. Сначала освойте нативный HTML, а на Pug не обращайте никакого внимания, всему своё время. Использование препроцессоров хорошо работает на разработчиков с опытом – реально сокращает время верстки. Для начинающих, одновременное изучение классического HTML с препроцессорами – вызовет дикий хаос в голове.

Предвижу ваши возражения: «Вам легко говорить, но в 90% вакансиях на верстальщика / front-end разработчика, одним из требований стоит – Pug (бывший Jade)». Конечно же работодатели требуют использование прогрессивных способов верстки. Скажу вам по секрету, что новичков никто не ждет. Если вы новичок, то вам нужно начинать с основ верстки (есть хороший видео-курс по верстке), но никак не с изучения препроцессоров.

Создано 23.08.2019 10:25:11

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Вы отправили слишком много запросов, поэтому ваш компьютер был заблокирован.

Для того, чтобы предотвратить автоматическое считывание информации с нашего сервиса, на Linguee допустимо лишь ограниченное количество запросов на каждого пользователя.
Пользователям, браузер которых поддерживает Javascript, доступно большее количество запросов, в отличие от пользователей, чей браузер не поддерживает Javascript. Попробуйте активировать Javascript в настройках вашего браузера, подождать несколько часов и снова воспользоваться нашим сервером.
Если же ваш компьютер является частью сети компьютеров, в которой большое количество пользователей одновременно пользуется Linguee,сообщитеоб этом нам.

Препроцессор Pug(Jade)

Pug — это препроцессор HTML и шаблонизатор, который был написан на JavaScript для Node.js.

Содержание:

1. Теги
2. Текст
3. Атрибуты
4. Констуркция Switch Case
5. Циклы
6. Вставка JavaScript кода
7. Комментарии
8. Условия
9. Тип документа
10. Инклюды (Includes)
11. Наследование шаблонов
12. Интерполяция переменных
13. Миксины
14. Многострочный ассоциативный массив

Теги

В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов. Для закрытия тегов в конце необходимо добавить символ / : foo(bar=’baz’)/

ul li Item A li Item B li Item C

ul> li>Item Ali> li>Item Bli> li>Item Cli> ul>

Текст

Непосредственно в Pug можно вставлять элементы в HTML синтаксисе

p This is plain old em>textem> content.

p>This is plain old em>textem> content.p>

p | The pipe always goes at the beginning of its own line, | not counting indentation.

p>The pipe always goes at the beginning of its own line, not counting indentation.p>

Атрибуты

В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.

a(href='google.com') Google | | a(class='button' href='google.com') Google | | a(class='button', href='google.com') Google

a href pl-s">google.com">Googlea> a class pl-s">button" href pl-s">google.com">Googlea> a class pl-s">button" href pl-s">google.com">Googlea>

- var authenticated = true body(class=authenticated ? 'authed' : 'anon')

body class pl-s">authed">body>

input( type='checkbox' name='agreement' checked )

input type pl-s">checkbox" name pl-s">agreement" checked pl-s">checked" />

- var url = 'pug-test.html'; a(href='/' + url) Link | | - url = 'https://example.com/' a(href=url) Another link

a href pl-s">/pug-test.html">Linka> a href pl-s">https://example.com/">Another linka>

- var classes = ['foo', 'bar', 'baz'] a(class=classes) | | //- the class attribute may also be repeated to merge arrays a.bang(class=classes class=['bing'])

a class pl-s">foo bar baz">a> a class pl-s">bang foo bar baz bing">a>

Констуркция Switch Case

Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

- var friends = 10 case friends when 0 p you have no friends when 1 p you have a friend default p you have # friends

p>you have 10 friendsp>

Циклы

ul each val, index in ['zero', 'one', 'two'] li= index + ': ' + val

ul> li>0: zeroli> li>1: oneli> li>2: twoli> ul>

- var values = []; ul each val in values li= val else li There are no values

ul> li>There are no valuesli> ul>

- var n = 0; ul while n  4 li= n++

ul> li>0li> li>1li> li>2li> li>3li> ul>

Вставка JavaScript кода

Pug поддерживает вставку частей JavaScript кода в шаблоны.

Не буфферизированный код начинается с символа —
Pug

- for (var x = 0; x  3; x++) li item

li>itemli> li>itemli> li>itemli>

Буфферизированный код начинается с символа =
Pug

p = 'This code is !'

p>This code is <escaped>!p>

Комментарии

Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.

// just some paragraphs //- will not output within markup p foo p bar

 p>foop> p>barp>

body //- Comments for your template writers. Use as much text as you want. // Comments for your HTML readers. Use as much text as you want.

body>  Use as much text as you want.--> body>

Условия

- var user = < description: 'foo bar baz' > - var authorised = false #user if user.description h2.green Description p.description= user.description else if authorised h2.blue Description p.description. User has no description, why not add one. else h2.red Description p.description User has no description

div id pl-s">user"> h2 class pl-s">green">Descriptionh2> p class pl-s">description">foo bar bazp> div>

Тип документа

doctype html

Инклюды (Includes)

Pug имеет возможность вставки содержимого одного файла в другой файл Pug.

//- index.pug doctype html html head style include style.css body h1 My Site p Welcome to my super lame site. script include script.js

/* style.css */ h1 < color: red; >

// script.js console.log('You are awesome');

> html> head> style> /* style.css */ h1 < color: red; > style> head> body> h1>My Siteh1> p>Welcome to my super lame site.p> script> // script.js console.log('You are awesome'); script> body> html>

Наследование шаблонов

Pug поддерживает наследование шаблонов. Наследование шаблонов работает через ключевые слова block и extend . В шаблоне block — обычный блок Pug, который может заменить дочерний шаблон. Этот процесс является рекурсивным.

//- base.pug html head title My Site block scripts script(src='/jquery.js') body block content block foot #footer p some footer content //- home.pug extends base.pug - var title = 'Animals' - var pets = ['cat', 'dog'] block content h1= title // - or # without = each petName in pets p= petName // -or # without =

> html> head> title>My sitetitle> script src='/jquery.js'>script> head> body> h1>Animalsh1> p>catp> p>dogp> div id='footer'> p>some footer contentp> div> body> html>

Интерполяция переменных

Pug предоставляет различные способы вывода переменных.

- var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; - var theGreat = "escape!"; h1= title p Written with love by # p This will be safe: !

h1>On Dogs: Man's Best Friendh1> p>Written with love by enlorep> p>This will be safe: span>escape!span>p>

Миксины

Поддержка миксинов позволяет создавать переиспользуемые блоки.

//- Declaration mixin pet(name) li.pet= name //- use ul +pet('cat') +pet('dog') +pet('pig')

ul> li class pl-s">pet">catli> li class pl-s">pet">dogli> li class pl-s">pet">pigli> ul>

mixin article(title) .article .article-wrapper h1= title if block block else p No content provided +article('Hello world') +article('Hello world') p This is my p Amazing article

div class pl-s">article"> div class pl-s">article-wrapper"> h1>Hello worldh1> p>No content providedp> div> div> div class pl-s">article"> div class pl-s">article-wrapper"> h1>Hello worldh1> p>This is myp> p>Amazing articlep> div> div>

mixin link(href, name) //- attributes == a(class!=attributes.class href=href)= name +link('/foo', 'foo')(class="btn")

a class pl-s">btn" href pl-s">/foo">fooa>

Многострочный ассоциативный массив

- var priceItem = [ : filterInc, parameter : "Розовый фильтр">, : smileInc, parameter : "Смайлики">, : commentInc, parameter : "Комментарии"> ]