Спасибо за решетку с квадратными скобками, я тоже про этот лайфхак не знал. А так, чтобы глубже внедрить pug в своей верстке, нужно смотреть твои ролики по верстке, так уже на практике все совсем по-другому. Спасибо еще раз друг))
чтобы постоянно не компилировать файлы и постоянно видеть обновление во всех html файлах при изменении в pug файлах, можно проект запустить с ключами: "pug ./ -P -w" Где ./ - корневая папка проекта, -w - наблюдатель. За видео огромное спасибо!
Анатолий, спасибо вам за очередное полезное видео! От вас узнал про pug и теперь всегда его использую в верстке. Правда пока на примитивном уровне, чтобы инклюдить нужные блоки на нужные страницы. Все никак не соберусь осилить миксины, Хотя вещь, очевидно, полезная. Действительно, трудно, как вы говорите, абстрагироваться, чтобы начать использовать новые возможности ) В этом видео для меня открытием стали переменные и условия! Надо засесть и подробнее изучить документацию и возможности pug. Ранее я в проекте gulp делал разные шаблоны для разных типов страниц сайта. Проблема была в том, что всего при одном изменении заново генерировались несколько файлов, browser-sync несколько раз почему-то пытался обновить страницу в браузере. В общем, автоматизация при раздувании проекта начинала, мягко говоря, подтупливать. И то, что додлжно было ускорять верстку, начинало наоборот ее тормозить. Поэтому я в проекте галпа перестал перегенерировать все шаблоны при изменении, например, футера. А стал работать только с одним шаблоном. Потом, при необходимости, меняю шаблон на другой и работаю уже с другим шаблоном. Теперь, с использованием переменных и условий, думаю, что для всех типов страниц можно будет создавать единый шаблон. При этом в переменной можно указать тип станицы, с которым в данный момент работаешь. И в зависимости от указанного типа страницы можно инклюдить нужные блоки! Как по мне, так это замечательно!
Только наткнулся на канал. Являюсь начинающим в этом не легком деле. Подскажите какое видео смотреть перед тем как устанавливать этот ПАГ? Работаю в VSCode. Насчет установить NodeJS, NPM проблем то нет, а вот консоль - webStorm и т д, не понятно. Подскажите с какого видео смотреть, что бы рабочую среду подготовить и т д. Спасибо
Добрый день, подскажите пожалуйста как правильно использовать pug для блока навигации, где для всех страниц используется единый layout(например main.pug), в котором подключен header.pug но в этом хедере в ссылках навигации класс active должен быть свой для каждой страницы?
Добрый день! У меня вопрос. Какой процент верстальщиков используют PUG. Возможна ситуация - проект сделан с использованием PUG, приходит следующий верстальщик для поддержки проекта и он не знаком с PUG. То есть для поддержки проекта нужен специалист обязательно со знанием PUG. Объяснение понравилось - автору большое спасибо! Много практики. Собираюсь переходить на PUG.
Здравствуйте у меня вопрос!!! А если в миксине мне надо прописать не одно условие а несколько как мне сделать так что бы всё правильно отображалось? (к примеру у меня есть несколько видов кнопок)
День добрый, подскажите пожалуйста, в принципе pug актуален для верстальщиков? для бэка особой актуальности не имеет, так как там внутри используются свои шаблоны, я верно понимаю?
Да я тоже. Удобная штука. Я, правда на самом первом шаблоне долго верстал, но проектики небольшие были. Недавно немного под себя 4-й переделал. Ну не нравится мне SCSS. Переделал синтаксис на SASS. Пока пробую. Спасибо за все, Анатолий!!!!!!!!
Подскажите пожалуйста. Если у меня есть отдельный паг файл с разметкой кнопки, например ".a(class="btn" href="") Перейти в каталог". Я хочу использовать ее во всем проекте, но как мне менять саму надпись на кнопке на другую для разных страниц. Я пробовал убирать надпись, инклюдить тег, а затем писать уже непосредственно после инклюда "| Моя надпись", но паг ругается. Я чувствую, что там должно быть какое-то простое условие, но не хватает опыта, чтобы самому допереть. Надеюсь понятно объяснил суть проблемы.
Добрый день. Добавьте блок переменные и там указывайте например title для страницы. В зависимости от текущего значения блока выводите ту или иную информацию
@@FrontcoderЯ так понимаю это, если для разных шаблонов. А если у меня эти оба блока с кнопками находятся на одном шаблоне "главная страница", можно ли привязать условие к определенному классу блока?
Видео огонь! Но миксины удобно использовать в простых ситуациях. В сложных случаях ими трудно управлять, как по мне. Я пользуюсь только уже написанными, и пытаюсь их сильно не изменять. За последнюю фишку отдельный лайк, не знал
когда я прописывал install pug -D у меня произошла ошибка, позже вычитал, что у меня в package.json имя стоит такое же как и название папки, что порождает бесконечную рекурсию (я без понятия, про что это, просто вычитал такую фразу), но после того как я поменял имя, у меня всё заработало, почему у вас не вылезло ошибки?)
спасибо за видео! вопрос такой - использую VS Code, когда пишу в терминале " pug {index,page}.pug -P" - выдает ошибку, когда пишу без скобок, каждый файл по отдельности, все работает. Подскажите.
Вопрос, как бороться с лишними пробелами в html, которые появляются если ставить миксин в тот же файл, в котором его вызывают? В видео был четкий пример этому на моменте ссылок в хедере. Есть вариант выноса миксина в отдельный файл, но это не всегда удобно, особенно если делать много миксинов для разных элементов на странице (искать его потом)
@@_slash_- речь идет не о нечитаемых пробелах, вопрос стоит в том, что появляются дополнительные отступы, если использовать миксины в том же файле, в котором они вызываются. Да, это все спокойно исправляется всякими бьютифаями, но хотелось бы решить вопрос так, чтобы pug сразу все выравнивал как надо
Если кто-нибудь идет мимо и знает такой плагин, не проходите мимо - дайте знать, плиз (установлены вариации 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 и всего остального.
Спасибо за видео. Подскажи как использовать информацию из JSON файла в pug? Было бы круто увидеть подробное видео на эту тему. Видел об этом в рассказе об актуальной сборке на твоем канале и потом как уже используется на примерах по верстке. Но всё-таки не совсем очевидно как в pug это всё правильно настроить.
Добрый день! Спасибо за видео. А что мешает сделать пробел после слова "телефону": p Звоните по телефону__ a(href="") 123 Так же хорошо компилируется и появляется пробел перед ссылкой, как и в предыдущем примере с решеткой
Оно непонятно тем кто не верстал большие страницы. Я тоже мало верстал, но всё-таки верстал, и мне понятно. Просто очень много информации. Для начала поверстай в обычном html, потом добавь знания по Node.js и его фреймворка express.js соответственно потом pug в экспрессе и будет всё более менее понятно.
Бред какой-то. Объясняется все через жопу, с одной темы на другую, потом обратно, в итоге ни одна не раскрыта полностью. 40 минут воды, объяснил только самые основы. В конце ор - какая разница есть там пробел или нет, да и во втором примере с вложенностью можно после строки 'Звоните по телефону ' пробел поставить, будет то же самое, херня а не туториал короче
![ร้อยพ่อพันแม่ - WanMai [Official MV]](http://i.ytimg.com/vi/XY2pNYASEbg/mqdefault.jpg)
мне для работы нужно. из того что нашел самое лучшее объяснение
Спасибо тебе за это видео! Благодаря ему я наконец-то понял, как работает шаблонизатор pug! Желаю продвижения канала)
Спасибо
просто зашел первый раз случайно,и мне понравилось! Спасибо,человек! Подписка, лайк!Респект!
Спасибо, очень понятно и полезно!
Рад, что вам понравилось
Спасибо за решетку с квадратными скобками, я тоже про этот лайфхак не знал.
А так, чтобы глубже внедрить pug в своей верстке, нужно смотреть твои ролики по верстке, так уже на практике все совсем по-другому.
Спасибо еще раз друг))
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
чтобы постоянно не компилировать файлы и постоянно видеть обновление во всех html файлах при изменении в pug файлах, можно проект запустить с ключами: "pug ./ -P -w" Где ./ - корневая папка проекта, -w - наблюдатель. За видео огромное спасибо!
Спасибо!
Анатолий, спасибо вам за очередное полезное видео! От вас узнал про pug и теперь всегда его использую в верстке. Правда пока на примитивном уровне, чтобы инклюдить нужные блоки на нужные страницы. Все никак не соберусь осилить миксины, Хотя вещь, очевидно, полезная. Действительно, трудно, как вы говорите, абстрагироваться, чтобы начать использовать новые возможности )
В этом видео для меня открытием стали переменные и условия! Надо засесть и подробнее изучить документацию и возможности pug.
Ранее я в проекте gulp делал разные шаблоны для разных типов страниц сайта. Проблема была в том, что всего при одном изменении заново генерировались несколько файлов, browser-sync несколько раз почему-то пытался обновить страницу в браузере. В общем, автоматизация при раздувании проекта начинала, мягко говоря, подтупливать. И то, что додлжно было ускорять верстку, начинало наоборот ее тормозить. Поэтому я в проекте галпа перестал перегенерировать все шаблоны при изменении, например, футера. А стал работать только с одним шаблоном. Потом, при необходимости, меняю шаблон на другой и работаю уже с другим шаблоном.
Теперь, с использованием переменных и условий, думаю, что для всех типов страниц можно будет создавать единый шаблон. При этом в переменной можно указать тип станицы, с которым в данный момент работаешь. И в зависимости от указанного типа страницы можно инклюдить нужные блоки! Как по мне, так это замечательно!
Благодарю! Классный урок! Теперь осталось продумать как использовать с 3 страницами, с breadcrumbs и классами с БЭМ))
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Вообще замечательно!) Спасибо, все сууупер понятно! Я прямо сейчас начну это использовать в своей работе)
Спасибо за ваш комментарий. Рад, что вам понравилось!
Благодарю за видео!
Та мало ли сколько там есть этих туториалов, чем больше тем лучше! Снимайте, мне никогда не хватит:)). Где-то, что-то могли упустить или еще что.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Хороший мануал. Сложный материал доступно объяснил. Подписка/лайк!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Спасибо за урок
Рад, что вам понравилось!
Круто.
Уже несколько лет работаю с Pug, но все равно подчерплул для себя пару интересных моментов.
Автору спасибо.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Только наткнулся на канал. Являюсь начинающим в этом не легком деле. Подскажите какое видео смотреть перед тем как устанавливать этот ПАГ? Работаю в VSCode. Насчет установить NodeJS, NPM проблем то нет, а вот консоль - webStorm и т д, не понятно. Подскажите с какого видео смотреть, что бы рабочую среду подготовить и т д. Спасибо
Ура. Наконец шрифт большой. И тема хорошая. Смотрим
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
блин когда ты новичек ни чего не понимаешь) ладно вернусь пересмотрю когда пойму о чем речь идет) а так лайк ведь, автор не зря же старался)
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Ну что, месяц прошел уже, а новостей от тебя нет ))
спасибо за вмдео
Рад, что вам понравилось!
большое спасибо за то что делишься своим опытом!
FrontCoder
• только что
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Спасибо, было интересно!
красавчик
Добрый день, подскажите пожалуйста как правильно использовать pug для блока навигации, где для всех страниц используется единый layout(например main.pug), в котором подключен header.pug но в этом хедере в ссылках навигации класс active должен быть свой для каждой страницы?
Где-то в середине запутался между страницами, а так супер видео.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится.
Добрый день! У меня вопрос. Какой процент верстальщиков используют PUG. Возможна ситуация - проект сделан с использованием PUG, приходит следующий верстальщик для поддержки проекта и он не знаком с PUG. То есть для поддержки проекта нужен специалист обязательно со знанием PUG. Объяснение понравилось - автору большое спасибо! Много практики. Собираюсь переходить на PUG.
Крутое видео! Спасибо
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
@@Frontcoder вам спасибо за контент без воды! Таких каналов мало.
Подскажи по такому вопросу, как этим оперировать?)
+e.H1.title Название
+e это класс уровня вложенности или что? на выходе получается
не понял вопрос
Анатолий, большое спасибо. Класс!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
Здравствуйте у меня вопрос!!! А если в миксине мне надо прописать не одно условие а несколько как мне сделать так что бы всё правильно отображалось? (к примеру у меня есть несколько видов кнопок)
Как настроить webpack 5 на компиляцию pug?
Очень круто 😀
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
За видосик спасибо, годно!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Thx!
Как работать с ним SVG в PUG?
великолепный урок, огромное спасибо
Как вы боретесь с большим временем компиляции на средних и больших проектах?
увы, пока никак
супер. спасибо)
Спасибо за ваш комментарий. Рад, что вам понравилось!
День добрый, подскажите пожалуйста, в принципе pug актуален для верстальщиков? для бэка особой актуальности не имеет, так как там внутри используются свои шаблоны, я верно понимаю?
Это эммет обвешанный свистелками и перделками. Есть полезные вещи, но использование в малых проектах нецелесообразно, мне кажется.
Команда pug (index,page).pug -P не работает. Пришлось отдельно для index и page запускать. В чем может быть причина?
Редактор vscode
Терминал cmd
скорее всего проблема в терминале. Я работаю в git bash
Отличное видео, спасибо )
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Объясните пожалуйста кто-нибудь как линковать страницы при разработка многостраницчного сайта на webpack pug
Спасибо!)
Да я тоже. Удобная штука. Я, правда на самом первом шаблоне долго верстал, но проектики небольшие были. Недавно немного под себя 4-й переделал. Ну не нравится мне SCSS. Переделал синтаксис на SASS. Пока пробую. Спасибо за все, Анатолий!!!!!!!!
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
Подскажите пожалуйста. Если у меня есть отдельный паг файл с разметкой кнопки, например ".a(class="btn" href="") Перейти в каталог". Я хочу использовать ее во всем проекте, но как мне менять саму надпись на кнопке на другую для разных страниц. Я пробовал убирать надпись, инклюдить тег, а затем писать уже непосредственно после инклюда "| Моя надпись", но паг ругается. Я чувствую, что там должно быть какое-то простое условие, но не хватает опыта, чтобы самому допереть. Надеюсь понятно объяснил суть проблемы.
Добрый день. Добавьте блок переменные и там указывайте например title для страницы. В зависимости от текущего значения блока выводите ту или иную информацию
@@FrontcoderЯ так понимаю это, если для разных шаблонов. А если у меня эти оба блока с кнопками находятся на одном шаблоне "главная страница", можно ли привязать условие к определенному классу блока?
Вам надо сделать миксин с этой кнопкой, и потом добавлять этот миксин куда необходимо с нужными параметрами, если еще актуально конечно)
Видео огонь! Но миксины удобно использовать в простых ситуациях. В сложных случаях ими трудно управлять, как по мне. Я пользуюсь только уже написанными, и пытаюсь их сильно не изменять. За последнюю фишку отдельный лайк, не знал
Добрый день. Спасибо за ваш комментарий. рад, что вам понравилось.
Можно ли составить какой-то конфиг, чтобы выходной файл html собирался в указанной директории?
Я такое через webpack настроил.
@@Лев-ф6г да, спасибо, я уже тоже)
Спасибо за видео!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
когда я прописывал install pug -D у меня произошла ошибка, позже вычитал, что у меня в package.json имя стоит такое же как и название папки, что порождает бесконечную рекурсию (я без понятия, про что это, просто вычитал такую фразу), но после того как я поменял имя, у меня всё заработало, почему у вас не вылезло ошибки?)
Спасибо! Круто!!!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
А как же Gulp? Это равноценные менеджеры? И можно их использовать параллельно или в этом нет смысла и достаточно освоить тот или этот?
Не совсем понял вопроса. Gulp это менеджер задач, а pug это шаблонизатор
спасибо!
спасибо за видео! вопрос такой - использую VS Code, когда пишу в терминале " pug {index,page}.pug -P" - выдает ошибку, когда пишу без скобок, каждый файл по отдельности, все работает. Подскажите.
К сожалению с ним не работал. Попробуйте погуглить решение
Скажите, пожалуйста, зачем нужен pug для верстки, когда есть emmet phpstorm?
Представьте, что у вас 50 страниц и вам надо поменять 1 ссылку в шапку. В обычном html это 50 файлов. в pug 1
@@Frontcoder А движки, файлы шаблонов?
Такие проекты пишут на реакт
Вопрос, как бороться с лишними пробелами в html, которые появляются если ставить миксин в тот же файл, в котором его вызывают? В видео был четкий пример этому на моменте ссылок в хедере. Есть вариант выноса миксина в отдельный файл, но это не всегда удобно, особенно если делать много миксинов для разных элементов на странице (искать его потом)
Это просто редактор кода надо настроить на табы и все.Саблайм нечитаемые пробелы подсвечивает , если выделить документ Ctrl A
@@_slash_- речь идет не о нечитаемых пробелах, вопрос стоит в том, что появляются дополнительные отступы, если использовать миксины в том же файле, в котором они вызываются. Да, это все спокойно исправляется всякими бьютифаями, но хотелось бы решить вопрос так, чтобы pug сразу все выравнивал как надо
Добрый день. Не обращаю на это внимание, т.к. код дальше все равно идет на натяжку на админку
Объяснение на 3 с минусом из 5 ..но было полезно . Рекламы вагон ... Садись 2 .) Спасибо)
На счет отступов, чем можно подсветить ошибки отступов в 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 Спасибо за ваш ответ!
Спасибо за видео. Подскажи как использовать информацию из JSON файла в pug? Было бы круто увидеть подробное видео на эту тему. Видел об этом в рассказе об актуальной сборке на твоем канале и потом как уже используется на примерах по верстке. Но всё-таки не совсем очевидно как в pug это всё правильно настроить.
Добрый день. Как я понял это возможно только с gulp. Прочитайте про настройку плагина gulp-pug
Спасибо
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось!
Добрый день! Спасибо за видео. А что мешает сделать пробел после слова "телефону":
p Звоните по телефону__
a(href="") 123
Так же хорошо компилируется и появляется пробел перед ссылкой, как и в предыдущем примере с решеткой
У меня такие висячие пробелы выкашиваются после компиляции
@@demvulano878 можно так:
p
| Звоните по телефону
|
a(href="")
| 123
Спасибо! Кто знает где можно посмотреть развернутий урок как делать таблици в PUG? Мне нужно наклепать много таблиц на PUG не знаю где инфу искать.
Не совсем понятна проблема
@@Frontcoder Нужно размапить array of objects в таблицу. Для каждого обьекта создать ячейку в таблице и отобразить все елементи обьекта.
@@sergiyrudenko905 так а причем тут pug? Вы строить таблицу должны циклом в js. Там же код html пишите
Не понимаю был же php зачем столько новых костылей?
У них же разные цели
опа. т.е. Pug превращает html в процедурный язык программирования. Спасибо.
Добрый день! Спасибо за ваш комментарий. Рад, что вам нравится!
Скорее замедляет, чем ускоряет, emmet в разы быстрее
А вообще кто то пишит на нем?
Если нужна просто вёрстка, то очень хороший инструмент
Как то не очень понятно все это((
Оно непонятно тем кто не верстал большие страницы. Я тоже мало верстал, но всё-таки верстал, и мне понятно. Просто очень много информации. Для начала поверстай в обычном html, потом добавь знания по Node.js и его фреймворка express.js соответственно потом pug в экспрессе и будет всё более менее понятно.
за видео спасибо, но объясняет автор так себе, на трояк.
как то сумбурно рассказал, одно не дообьяснил, начал второе, а главное логика для начинающих слабо понятна
Бред какой-то. Объясняется все через жопу, с одной темы на другую, потом обратно, в итоге ни одна не раскрыта полностью. 40 минут воды, объяснил только самые основы. В конце ор - какая разница есть там пробел или нет, да и во втором примере с вложенностью можно после строки 'Звоните по телефону ' пробел поставить, будет то же самое, херня а не туториал короче
хорошо что код мелкий, нечитаемый. можно заслуженно диз проставить!
kek
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
бот-комьюнити ;-)
Pug это полное г…. Верстку только замедляет в несколько раз, emmet быстрее всего, не используйте вы это г….
бесполезная хрень! имхо
Дерьмовая подача материала, почти заснул.