Pug tutorial. Ускорь свою верстку в несколько раз. Подробное знакомство с шаблонизатором HTML - PUG.
HTML-код
- Опубликовано: 28 сен 2024
- Встречайте полный курс по шаблонизатору html - pug
Ссылка на Pug pugjs.org
Ссылка на Nodejs nodejs.org/
Ссылка на материалы из видео github.com/FAR...
Скринкаст по шаблонизатору Pug/Jade : • Скринкаст по Pug
Не ограничивай себя видеоуроками на RUclips!
Узнавайте еще больше полезной информации!
👍👍👍Telegram-чат: t.me/frontcoder
Telegram-канал: t.me/frontcode...
VK: frontcoder
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
![Yailin La Mas Viral, @kreizyk.official - Dale 2 (Remix) [Video Oficial]](http://i.ytimg.com/vi/JaYHBzgqz94/mqdefault.jpg)
Спасибо за решетку с квадратными скобками, я тоже про этот лайфхак не знал.
А так, чтобы глубже внедрить pug в своей верстке, нужно смотреть твои ролики по верстке, так уже на практике все совсем по-другому.
Спасибо еще раз друг))
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Анатолий, спасибо вам за очередное полезное видео! От вас узнал про pug и теперь всегда его использую в верстке. Правда пока на примитивном уровне, чтобы инклюдить нужные блоки на нужные страницы. Все никак не соберусь осилить миксины, Хотя вещь, очевидно, полезная. Действительно, трудно, как вы говорите, абстрагироваться, чтобы начать использовать новые возможности )
В этом видео для меня открытием стали переменные и условия! Надо засесть и подробнее изучить документацию и возможности pug.
Ранее я в проекте gulp делал разные шаблоны для разных типов страниц сайта. Проблема была в том, что всего при одном изменении заново генерировались несколько файлов, browser-sync несколько раз почему-то пытался обновить страницу в браузере. В общем, автоматизация при раздувании проекта начинала, мягко говоря, подтупливать. И то, что додлжно было ускорять верстку, начинало наоборот ее тормозить. Поэтому я в проекте галпа перестал перегенерировать все шаблоны при изменении, например, футера. А стал работать только с одним шаблоном. Потом, при необходимости, меняю шаблон на другой и работаю уже с другим шаблоном.
Теперь, с использованием переменных и условий, думаю, что для всех типов страниц можно будет создавать единый шаблон. При этом в переменной можно указать тип станицы, с которым в данный момент работаешь. И в зависимости от указанного типа страницы можно инклюдить нужные блоки! Как по мне, так это замечательно!
чтобы постоянно не компилировать файлы и постоянно видеть обновление во всех html файлах при изменении в pug файлах, можно проект запустить с ключами: "pug ./ -P -w" Где ./ - корневая папка проекта, -w - наблюдатель. За видео огромное спасибо!
Спасибо!
мне для работы нужно. из того что нашел самое лучшее объяснение
Хороший мануал. Сложный материал доступно объяснил. Подписка/лайк!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
блин когда ты новичек ни чего не понимаешь) ладно вернусь пересмотрю когда пойму о чем речь идет) а так лайк ведь, автор не зря же старался)
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Ну что, месяц прошел уже, а новостей от тебя нет ))
Крутое видео! Спасибо
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
@@Frontcoder вам спасибо за контент без воды! Таких каналов мало.
хорошо что код мелкий, нечитаемый. можно заслуженно диз проставить!
Только наткнулся на канал. Являюсь начинающим в этом не легком деле. Подскажите какое видео смотреть перед тем как устанавливать этот ПАГ? Работаю в VSCode. Насчет установить NodeJS, NPM проблем то нет, а вот консоль - webStorm и т д, не понятно. Подскажите с какого видео смотреть, что бы рабочую среду подготовить и т д. Спасибо
Как работать с ним SVG в PUG?
Добрый день, подскажите пожалуйста как правильно использовать pug для блока навигации, где для всех страниц используется единый layout(например main.pug), в котором подключен header.pug но в этом хедере в ссылках навигации класс active должен быть свой для каждой страницы?
За видосик спасибо, годно!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Спасибо!)
Спасибо! Круто!!!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
супер. спасибо)
Спасибо за ваш комментарий. Рад, что вам понравилось!
великолепный урок, огромное спасибо
Как настроить webpack 5 на компиляцию pug?
Как вы боретесь с большим временем компиляции на средних и больших проектах?
увы, пока никак
красавчик
Команда pug (index,page).pug -P не работает. Пришлось отдельно для index и page запускать. В чем может быть причина?
Редактор vscode
Терминал cmd
скорее всего проблема в терминале. Я работаю в git bash
спасибо за видео! вопрос такой - использую VS Code, когда пишу в терминале " pug {index,page}.pug -P" - выдает ошибку, когда пишу без скобок, каждый файл по отдельности, все работает. Подскажите.
К сожалению с ним не работал. Попробуйте погуглить решение
Скажите, пожалуйста, зачем нужен pug для верстки, когда есть emmet phpstorm?
Представьте, что у вас 50 страниц и вам надо поменять 1 ссылку в шапку. В обычном html это 50 файлов. в pug 1
@@Frontcoder А движки, файлы шаблонов?
Такие проекты пишут на реакт
Спасибо за видео. Подскажи как использовать информацию из JSON файла в pug? Было бы круто увидеть подробное видео на эту тему. Видел об этом в рассказе об актуальной сборке на твоем канале и потом как уже используется на примерах по верстке. Но всё-таки не совсем очевидно как в pug это всё правильно настроить.
Добрый день. Как я понял это возможно только с gulp. Прочитайте про настройку плагина gulp-pug
Спасибо! Кто знает где можно посмотреть развернутий урок как делать таблици в PUG? Мне нужно наклепать много таблиц на PUG не знаю где инфу искать.
Не совсем понятна проблема
@@Frontcoder Нужно размапить array of objects в таблицу. Для каждого обьекта создать ячейку в таблице и отобразить все елементи обьекта.
@@sergiyrudenko905 так а причем тут pug? Вы строить таблицу должны циклом в js. Там же код html пишите
Добрый день! Спасибо за видео. А что мешает сделать пробел после слова "телефону":
p Звоните по телефону__
a(href="") 123
Так же хорошо компилируется и появляется пробел перед ссылкой, как и в предыдущем примере с решеткой
У меня такие висячие пробелы выкашиваются после компиляции
@@demvulano878 можно так:
p
| Звоните по телефону
|
a(href="")
| 123
Бред какой-то. Объясняется все через жопу, с одной темы на другую, потом обратно, в итоге ни одна не раскрыта полностью. 40 минут воды, объяснил только самые основы. В конце ор - какая разница есть там пробел или нет, да и во втором примере с вложенностью можно после строки 'Звоните по телефону ' пробел поставить, будет то же самое, херня а не туториал короче
опа. т.е. Pug превращает html в процедурный язык программирования. Спасибо.
Добрый день! Спасибо за ваш комментарий. Рад, что вам нравится!
Как то не очень понятно все это((
Оно непонятно тем кто не верстал большие страницы. Я тоже мало верстал, но всё-таки верстал, и мне понятно. Просто очень много информации. Для начала поверстай в обычном html, потом добавь знания по Node.js и его фреймворка express.js соответственно потом pug в экспрессе и будет всё более менее понятно.
kek
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
бот-комьюнити ;-)
за видео спасибо, но объясняет автор так себе, на трояк.
Pug это полное г…. Верстку только замедляет в несколько раз, emmet быстрее всего, не используйте вы это г….
бесполезная хрень! имхо
pretty deprecated + он инлайновые тэги в строку шпилит, поэтому нужно что-то стороннее искать, бэку неудобно
Кстати и паг и эммет внутри инлайновых тегов генерит спан если тег не указывать
Объясните пожалуйста кто-нибудь как линковать страницы при разработка многостраницчного сайта на webpack pug
спасибо за вмдео
Рад, что вам понравилось!
Это эммет обвешанный свистелками и перделками. Есть полезные вещи, но использование в малых проектах нецелесообразно, мне кажется.
Скорее замедляет, чем ускоряет, emmet в разы быстрее
Не понимаю был же php зачем столько новых костылей?
У них же разные цели
Благодарю! Классный урок! Теперь осталось продумать как использовать с 3 страницами, с breadcrumbs и классами с БЭМ))
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Thx!
Спасибо за урок
Рад, что вам понравилось!
А вообще кто то пишит на нем?
Если нужна просто вёрстка, то очень хороший инструмент
Добрый день! У меня вопрос. Какой процент верстальщиков используют PUG. Возможна ситуация - проект сделан с использованием PUG, приходит следующий верстальщик для поддержки проекта и он не знаком с PUG. То есть для поддержки проекта нужен специалист обязательно со знанием PUG. Объяснение понравилось - автору большое спасибо! Много практики. Собираюсь переходить на PUG.
День добрый, подскажите пожалуйста, в принципе pug актуален для верстальщиков? для бэка особой актуальности не имеет, так как там внутри используются свои шаблоны, я верно понимаю?
Здравствуйте у меня вопрос!!! А если в миксине мне надо прописать не одно условие а несколько как мне сделать так что бы всё правильно отображалось? (к примеру у меня есть несколько видов кнопок)
Спасибо, было интересно!
Спасибо, очень понятно и полезно!
Рад, что вам понравилось
когда я прописывал install pug -D у меня произошла ошибка, позже вычитал, что у меня в package.json имя стоит такое же как и название папки, что порождает бесконечную рекурсию (я без понятия, про что это, просто вычитал такую фразу), но после того как я поменял имя, у меня всё заработало, почему у вас не вылезло ошибки?)
как то сумбурно рассказал, одно не дообьяснил, начал второе, а главное логика для начинающих слабо понятна
просто зашел первый раз случайно,и мне понравилось! Спасибо,человек! Подписка, лайк!Респект!
Спасибо тебе за это видео! Благодаря ему я наконец-то понял, как работает шаблонизатор pug! Желаю продвижения канала)
Спасибо
Подскажи по такому вопросу, как этим оперировать?)
+e.H1.title Название
+e это класс уровня вложенности или что? на выходе получается
не понял вопрос
А как же Gulp? Это равноценные менеджеры? И можно их использовать параллельно или в этом нет смысла и достаточно освоить тот или этот?
Не совсем понял вопроса. Gulp это менеджер задач, а pug это шаблонизатор
большое спасибо за то что делишься своим опытом!
FrontCoder
• только что
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Та мало ли сколько там есть этих туториалов, чем больше тем лучше! Снимайте, мне никогда не хватит:)). Где-то, что-то могли упустить или еще что.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Видео огонь! Но миксины удобно использовать в простых ситуациях. В сложных случаях ими трудно управлять, как по мне. Я пользуюсь только уже написанными, и пытаюсь их сильно не изменять. За последнюю фишку отдельный лайк, не знал
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
Подскажите пожалуйста. Если у меня есть отдельный паг файл с разметкой кнопки, например ".a(class="btn" href="") Перейти в каталог". Я хочу использовать ее во всем проекте, но как мне менять саму надпись на кнопке на другую для разных страниц. Я пробовал убирать надпись, инклюдить тег, а затем писать уже непосредственно после инклюда "| Моя надпись", но паг ругается. Я чувствую, что там должно быть какое-то простое условие, но не хватает опыта, чтобы самому допереть. Надеюсь понятно объяснил суть проблемы.
Добрый день. Добавьте блок переменные и там указывайте например title для страницы. В зависимости от текущего значения блока выводите ту или иную информацию
@@FrontcoderЯ так понимаю это, если для разных шаблонов. А если у меня эти оба блока с кнопками находятся на одном шаблоне "главная страница", можно ли привязать условие к определенному классу блока?
Вам надо сделать миксин с этой кнопкой, и потом добавлять этот миксин куда необходимо с нужными параметрами, если еще актуально конечно)
Можно ли составить какой-то конфиг, чтобы выходной файл html собирался в указанной директории?
Я такое через webpack настроил.
@@Лев-ф6г да, спасибо, я уже тоже)
Где-то в середине запутался между страницами, а так супер видео.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится.
спасибо!
Вообще замечательно!) Спасибо, все сууупер понятно! Я прямо сейчас начну это использовать в своей работе)
Спасибо за ваш комментарий. Рад, что вам понравилось!
Вопрос, как бороться с лишними пробелами в html, которые появляются если ставить миксин в тот же файл, в котором его вызывают? В видео был четкий пример этому на моменте ссылок в хедере. Есть вариант выноса миксина в отдельный файл, но это не всегда удобно, особенно если делать много миксинов для разных элементов на странице (искать его потом)
Это просто редактор кода надо настроить на табы и все.Саблайм нечитаемые пробелы подсвечивает , если выделить документ Ctrl A
@@_slash_- речь идет не о нечитаемых пробелах, вопрос стоит в том, что появляются дополнительные отступы, если использовать миксины в том же файле, в котором они вызываются. Да, это все спокойно исправляется всякими бьютифаями, но хотелось бы решить вопрос так, чтобы pug сразу все выравнивал как надо
Добрый день. Не обращаю на это внимание, т.к. код дальше все равно идет на натяжку на админку
Ура. Наконец шрифт большой. И тема хорошая. Смотрим
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
Очень круто 😀
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Отличное видео, спасибо )
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Анатолий, большое спасибо. Класс!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Спасибо
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
На счет отступов, чем можно подсветить ошибки отступов в Atom?
Поищите плагин
Если кто-нибудь идет мимо и знает такой плагин, не проходите мимо - дайте знать, плиз (установлены вариации gulp-pug, возможно нужны настройки или еще что)
Coco Chen вам нужен плагин для atom. Попробуйте вот этот atom.io/packages/linter-pug-lint должен ошибки показывать, ну и разумеется должен стоять плагин для pug например atom.io/packages/language-pug
Coco Chen а вообще переходите на code.visualstudio.com , atom.io уже устарел )) разумееться плагины нужно будет тоже поставить под visual studio code для pug и всего остального.
@@fortsite Спасибо за ваш ответ!
Спасибо за видео!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Дерьмовая подача материала, почти заснул.
Круто.
Уже несколько лет работаю с Pug, но все равно подчерплул для себя пару интересных моментов.
Автору спасибо.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Объяснение на 3 с минусом из 5 ..но было полезно . Рекламы вагон ... Садись 2 .) Спасибо)
Да я тоже. Удобная штука. Я, правда на самом первом шаблоне долго верстал, но проектики небольшие были. Недавно немного под себя 4-й переделал. Ну не нравится мне SCSS. Переделал синтаксис на SASS. Пока пробую. Спасибо за все, Анатолий!!!!!!!!
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
Благодарю за видео!