Pug tutorial. Ускорь свою верстку в несколько раз. Подробное знакомство с шаблонизатором HTML - PUG.

[@ЛенаКиселева-в5в]

Спасибо!

[@СергейЛуняк-д5е]

мне для работы нужно. из того что нашел самое лучшее объяснение

[@IldarFreeLancer]

Спасибо, очень понятно и полезно!

[@Frontcoder]

Рад, что вам понравилось

[@wot_programmer]

Спасибо тебе за это видео! Благодаря ему я наконец-то понял, как работает шаблонизатор pug! Желаю продвижения канала)

[@Frontcoder]

Спасибо

[@nikolaborkowski9942]

просто зашел первый раз случайно,и мне понравилось! Спасибо,человек! Подписка, лайк!Респект!

[@DenDK2023-z2o]

Благодарю за видео!

[@ТОЛЬКОПОБЕЗДОРОЖЬЮ]

Спасибо за урок

[@Frontcoder]

Рад, что вам понравилось!

[@SergiuBurduja-y1l]

Спасибо за решетку с квадратными скобками, я тоже про этот лайфхак не знал. А так, чтобы глубже внедрить pug в своей верстке, нужно смотреть твои ролики по верстке, так уже на практике все совсем по-другому. Спасибо еще раз друг))

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@aleksandrzelenskiy4000]

Хороший мануал. Сложный материал доступно объяснил. Подписка/лайк!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@Drezerak]

Благодарю! Классный урок! Теперь осталось продумать как использовать с 3 страницами, с breadcrumbs и классами с БЭМ))

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@TheOneeightytwo]

большое спасибо за то что делишься своим опытом!

[@Frontcoder]

FrontCoder • только что Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@TsA1ex]

Ура. Наконец шрифт большой. И тема хорошая. Смотрим

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.

[@alexejveres3245]

Спасибо, было интересно!

[@НанаСерова]

Вообще замечательно!) Спасибо, все сууупер понятно! Я прямо сейчас начну это использовать в своей работе)

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@evgeniydoronin]

чтобы постоянно не компилировать файлы и постоянно видеть обновление во всех html файлах при изменении в pug файлах, можно проект запустить с ключами: "pug ./ -P -w" Где ./ - корневая папка проекта, -w - наблюдатель. За видео огромное спасибо!

[@sergejde1390]

Анатолий, большое спасибо. Класс!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится

[@ДмитрийРайдак]

Та мало ли сколько там есть этих туториалов, чем больше тем лучше! Снимайте, мне никогда не хватит:)). Где-то, что-то могли упустить или еще что.

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@oleksandrvorzhev5026]

Крутое видео! Спасибо

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@oleksandrvorzhev5026]

@@Frontcoder вам спасибо за контент без воды! Таких каналов мало.

[@ruservices]

Только наткнулся на канал. Являюсь начинающим в этом не легком деле. Подскажите какое видео смотреть перед тем как устанавливать этот ПАГ? Работаю в VSCode. Насчет установить NodeJS, NPM проблем то нет, а вот консоль - webStorm и т д, не понятно. Подскажите с какого видео смотреть, что бы рабочую среду подготовить и т д. Спасибо

[@PalyufishkuRuSite]

Анатолий, спасибо вам за очередное полезное видео! От вас узнал про pug и теперь всегда его использую в верстке. Правда пока на примитивном уровне, чтобы инклюдить нужные блоки на нужные страницы. Все никак не соберусь осилить миксины, Хотя вещь, очевидно, полезная. Действительно, трудно, как вы говорите, абстрагироваться, чтобы начать использовать новые возможности ) В этом видео для меня открытием стали переменные и условия! Надо засесть и подробнее изучить документацию и возможности pug. Ранее я в проекте gulp делал разные шаблоны для разных типов страниц сайта. Проблема была в том, что всего при одном изменении заново генерировались несколько файлов, browser-sync несколько раз почему-то пытался обновить страницу в браузере. В общем, автоматизация при раздувании проекта начинала, мягко говоря, подтупливать. И то, что додлжно было ускорять верстку, начинало наоборот ее тормозить. Поэтому я в проекте галпа перестал перегенерировать все шаблоны при изменении, например, футера. А стал работать только с одним шаблоном. Потом, при необходимости, меняю шаблон на другой и работаю уже с другим шаблоном. Теперь, с использованием переменных и условий, думаю, что для всех типов страниц можно будет создавать единый шаблон. При этом в переменной можно указать тип станицы, с которым в данный момент работаешь. И в зависимости от указанного типа страницы можно инклюдить нужные блоки! Как по мне, так это замечательно!

[@samkrekotyn]

спасибо за вмдео

[@Frontcoder]

Рад, что вам понравилось!

[@nicknickov4871]

Как работать с ним SVG в PUG?

[@alsugar]

Очень круто 😀

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@llssk6379]

За видосик спасибо, годно!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@dennisdovziy2775]

Спасибо за видео!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@odinokun]

Круто. Уже несколько лет работаю с Pug, но все равно подчерплул для себя пару интересных моментов. Автору спасибо.

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится

[@arthurshaidullin7981]

Отличное видео, спасибо )

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@darieandre5598]

Thx!

[@ihorv44]

супер. спасибо)

[@Frontcoder]

Спасибо за ваш комментарий. Рад, что вам понравилось!

[@TenJIbIu]

Как настроить webpack 5 на компиляцию pug?

[@СкрепоносныйБузотёр-э5ш]

блин когда ты новичек ни чего не понимаешь) ладно вернусь пересмотрю когда пойму о чем речь идет) а так лайк ведь, автор не зря же старался)

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!

[@McVoodooman]

Ну что, месяц прошел уже, а новостей от тебя нет ))

[@dmitrijponkin]

Спасибо! Круто!!!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится

[@карнас]

Подскажи по такому вопросу, как этим оперировать?) +e.H1.title Название +e это класс уровня вложенности или что? на выходе получается

[@Frontcoder]

не понял вопрос

[@Azkett]

Спасибо!)

[@jprakk]

Как вы боретесь с большим временем компиляции на средних и больших проектах?

[@Frontcoder]

увы, пока никак

[@evgeniivavilo8678]

Где-то в середине запутался между страницами, а так супер видео.

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится.

[@alxkr7937]

Добрый день, подскажите пожалуйста как правильно использовать pug для блока навигации, где для всех страниц используется единый layout(например main.pug), в котором подключен header.pug но в этом хедере в ссылках навигации класс active должен быть свой для каждой страницы?

[@markuspdd]

спасибо!

[@sokolova794]

Здравствуйте у меня вопрос!!! А если в миксине мне надо прописать не одно условие а несколько как мне сделать так что бы всё правильно отображалось? (к примеру у меня есть несколько видов кнопок)

[@irinakuzmina656]

Добрый день! У меня вопрос. Какой процент верстальщиков используют PUG. Возможна ситуация - проект сделан с использованием PUG, приходит следующий верстальщик для поддержки проекта и он не знаком с PUG. То есть для поддержки проекта нужен специалист обязательно со знанием PUG. Объяснение понравилось - автору большое спасибо! Много практики. Собираюсь переходить на PUG.

[@vasya8441]

великолепный урок, огромное спасибо

[@judgedreed1]

красавчик

[@Andrey-qf8uw]

Спасибо

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!

[@krisdrea3380]

Объясните пожалуйста кто-нибудь как линковать страницы при разработка многостраницчного сайта на webpack pug

[@FRAGILE304]

Можно ли составить какой-то конфиг, чтобы выходной файл html собирался в указанной директории?

[@Лев-ф6г]

Я такое через webpack настроил.

[@FRAGILE304]

@@Лев-ф6г да, спасибо, я уже тоже)

[@trickingOOmix]

День добрый, подскажите пожалуйста, в принципе pug актуален для верстальщиков? для бэка особой актуальности не имеет, так как там внутри используются свои шаблоны, я верно понимаю?

[@Bxz56Rvp8]

А как же Gulp? Это равноценные менеджеры? И можно их использовать параллельно или в этом нет смысла и достаточно освоить тот или этот?

[@Frontcoder]

Не совсем понял вопроса. Gulp это менеджер задач, а pug это шаблонизатор

[@GeraltTheSLAYER]

Подскажите пожалуйста. Если у меня есть отдельный паг файл с разметкой кнопки, например ".a(class="btn" href="") Перейти в каталог". Я хочу использовать ее во всем проекте, но как мне менять саму надпись на кнопке на другую для разных страниц. Я пробовал убирать надпись, инклюдить тег, а затем писать уже непосредственно после инклюда "| Моя надпись", но паг ругается. Я чувствую, что там должно быть какое-то простое условие, но не хватает опыта, чтобы самому допереть. Надеюсь понятно объяснил суть проблемы.

[@Frontcoder]

Добрый день. Добавьте блок переменные и там указывайте например title для страницы. В зависимости от текущего значения блока выводите ту или иную информацию

[@GeraltTheSLAYER]

@@FrontcoderЯ так понимаю это, если для разных шаблонов. А если у меня эти оба блока с кнопками находятся на одном шаблоне "главная страница", можно ли привязать условие к определенному классу блока?

[@elfact]

Вам надо сделать миксин с этой кнопкой, и потом добавлять этот миксин куда необходимо с нужными параметрами, если еще актуально конечно)

[@user-iv6op9rv3q]

Команда pug (index,page).pug -P не работает. Пришлось отдельно для index и page запускать. В чем может быть причина? Редактор vscode Терминал cmd

[@Frontcoder]

скорее всего проблема в терминале. Я работаю в git bash

[@cocochen8349]

На счет отступов, чем можно подсветить ошибки отступов в Atom?

[@Frontcoder]

Поищите плагин

[@cocochen8349]

Если кто-нибудь идет мимо и знает такой плагин, не проходите мимо - дайте знать, плиз (установлены вариации gulp-pug, возможно нужны настройки или еще что)

[@fortsite]

Coco Chen вам нужен плагин для atom. Попробуйте вот этот atom.io/packages/linter-pug-lint должен ошибки показывать, ну и разумеется должен стоять плагин для pug например atom.io/packages/language-pug

[@fortsite]

Coco Chen а вообще переходите на code.visualstudio.com , atom.io уже устарел )) разумееться плагины нужно будет тоже поставить под visual studio code для pug и всего остального.

[@cocochen8349]

@@fortsite Спасибо за ваш ответ!

[@вебвеб-л7у]

Скажите, пожалуйста, зачем нужен pug для верстки, когда есть emmet phpstorm?

[@Frontcoder]

Представьте, что у вас 50 страниц и вам надо поменять 1 ссылку в шапку. В обычном html это 50 файлов. в pug 1

[@olegplahotniy7307]

@@Frontcoder А движки, файлы шаблонов?

[@ioankatsapovich]

Такие проекты пишут на реакт

[@n0wena]

когда я прописывал install pug -D у меня произошла ошибка, позже вычитал, что у меня в package.json имя стоит такое же как и название папки, что порождает бесконечную рекурсию (я без понятия, про что это, просто вычитал такую фразу), но после того как я поменял имя, у меня всё заработало, почему у вас не вылезло ошибки?)

[@lordrawl]

Вопрос, как бороться с лишними пробелами в html, которые появляются если ставить миксин в тот же файл, в котором его вызывают? В видео был четкий пример этому на моменте ссылок в хедере. Есть вариант выноса миксина в отдельный файл, но это не всегда удобно, особенно если делать много миксинов для разных элементов на странице (искать его потом)

[@_slash_-]

Это просто редактор кода надо настроить на табы и все.Саблайм нечитаемые пробелы подсвечивает , если выделить документ Ctrl A

[@lordrawl]

@@_slash_- речь идет не о нечитаемых пробелах, вопрос стоит в том, что появляются дополнительные отступы, если использовать миксины в том же файле, в котором они вызываются. Да, это все спокойно исправляется всякими бьютифаями, но хотелось бы решить вопрос так, чтобы pug сразу все выравнивал как надо

[@Frontcoder]

Добрый день. Не обращаю на это внимание, т.к. код дальше все равно идет на натяжку на админку

[@DimkaLom]

спасибо за видео! вопрос такой - использую VS Code, когда пишу в терминале " pug {index,page}.pug -P" - выдает ошибку, когда пишу без скобок, каждый файл по отдельности, все работает. Подскажите.

[@Frontcoder]

К сожалению с ним не работал. Попробуйте погуглить решение

[@_slash_-]

Видео огонь! Но миксины удобно использовать в простых ситуациях. В сложных случаях ими трудно управлять, как по мне. Я пользуюсь только уже написанными, и пытаюсь их сильно не изменять. За последнюю фишку отдельный лайк, не знал

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.

[@jonathanlivingstone1818]

Не понимаю был же php зачем столько новых костылей?

[@xiii4526]

У них же разные цели

[@sergiyrudenko905]

Спасибо! Кто знает где можно посмотреть развернутий урок как делать таблици в PUG? Мне нужно наклепать много таблиц на PUG не знаю где инфу искать.

[@Frontcoder]

Не совсем понятна проблема

[@sergiyrudenko905]

@@Frontcoder Нужно размапить array of objects в таблицу. Для каждого обьекта создать ячейку в таблице и отобразить все елементи обьекта.

[@Frontcoder]

@@sergiyrudenko905 так а причем тут pug? Вы строить таблицу должны циклом в js. Там же код html пишите

[@teoreat]

Это эммет обвешанный свистелками и перделками. Есть полезные вещи, но использование в малых проектах нецелесообразно, мне кажется.

[@ОлегЗалогин]

Да я тоже. Удобная штука. Я, правда на самом первом шаблоне долго верстал, но проектики небольшие были. Недавно немного под себя 4-й переделал. Ну не нравится мне SCSS. Переделал синтаксис на SASS. Пока пробую. Спасибо за все, Анатолий!!!!!!!!

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.

[@mikhailnma8304]

Спасибо за видео. Подскажи как использовать информацию из JSON файла в pug? Было бы круто увидеть подробное видео на эту тему. Видел об этом в рассказе об актуальной сборке на твоем канале и потом как уже используется на примерах по верстке. Но всё-таки не совсем очевидно как в pug это всё правильно настроить.

[@Frontcoder]

Добрый день. Как я понял это возможно только с gulp. Прочитайте про настройку плагина gulp-pug

[@ioankatsapovich]

А вообще кто то пишит на нем?

[@Frontcoder]

Если нужна просто вёрстка, то очень хороший инструмент

[@grandlagging0zero175]

jinja в помощь

[@qqqq-kv1fo]

Объяснение на 3 с минусом из 5 ..но было полезно . Рекламы вагон ... Садись 2 .) Спасибо)

[@alexandersergeev4500]

Добрый день! Спасибо за видео. А что мешает сделать пробел после слова "телефону": p Звоните по телефону__ a(href="") 123 Так же хорошо компилируется и появляется пробел перед ссылкой, как и в предыдущем примере с решеткой

[@demvulano878]

У меня такие висячие пробелы выкашиваются после компиляции

[@max_samusevich]

@@demvulano878 можно так: p | Звоните по телефону | a(href="") | 123

[@ИльяНосырев-л1п]

Как то не очень понятно все это((

[@Witchfinder_General]

Оно непонятно тем кто не верстал большие страницы. Я тоже мало верстал, но всё-таки верстал, и мне понятно. Просто очень много информации. Для начала поверстай в обычном html, потом добавь знания по Node.js и его фреймворка express.js соответственно потом pug в экспрессе и будет всё более менее понятно.

[@DemetriyArh]

опа. т.е. Pug превращает html в процедурный язык программирования. Спасибо.

[@Frontcoder]

Добрый день! Спасибо за ваш комментарий. Рад, что вам нравится!

[@johnxavier6996]

Скорее замедляет, чем ускоряет, emmet в разы быстрее

[@getjinxed4494]

Бред какой-то. Объясняется все через жопу, с одной темы на другую, потом обратно, в итоге ни одна не раскрыта полностью. 40 минут воды, объяснил только самые основы. В конце ор - какая разница есть там пробел или нет, да и во втором примере с вложенностью можно после строки 'Звоните по телефону ' пробел поставить, будет то же самое, херня а не туториал короче

[@abdulmalgonusov1544]

kek

[@Frontcoder]

Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится

[@БендерЗадунайский-щ9ы]

бот-комьюнити ;-)

[@Joker-sq8fk]

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

[@АндрейИльин-д6ж]

хорошо что код мелкий, нечитаемый. можно заслуженно диз проставить!

[@trampsport]

за видео спасибо, но объясняет автор так себе, на трояк.

[@johnxavier6996]

Pug это полное г…. Верстку только замедляет в несколько раз, emmet быстрее всего, не используйте вы это г….

[@БендерЗадунайский-щ9ы]

бесполезная хрень! имхо

[@nochdeveloper7240]

Дерьмовая подача материала, почти заснул.