Сайт использует сервис веб-аналитики Яндекс Метрика с помощью технологии «cookie». Пользуясь сайтом, вы даете согласие на использование данной технологии.
Быстро делать эффектные и эффективные прототипы мы уже умеем. Пора решить основную проблему HTML и разделить данные и разметку. В этой части мы научимся применять разные данные к одной разметке, освоим включение внешних файлов, а также изучим наследование разметки. Кроме того, мы создадим собственную соцсеть, а также станем самым настоящем агентом Кремля! Для освоения материала достаточно базовых знаний HTML, JavaScript, а также платформы Node JS (ссылка на обучающий ролик ниже). ⬅️ Предыдущая часть: • HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный курс. Ча... 📂 Материалы ролика: • GitHub репозиторий с примерами: 🔗 Полезные ссылки • Основы Node JS: • Основы Node.js и npm • Официальный сайт Pug (документация с примерами): • Pug на npm: • Pug на GitHub: • Редактор VS Code 📜 Содержание: 0:00 Вступление 1:10 Про Node JS 2:19 Установка пакета Pug 2:47 Рендер строк. Функция render 3:37 Рендер файлов. Функция renderFile 5:57 Проблема статичности 8:14 Передача данных в разметку 9:40 Передача функций в разметку 10:26 Ошибки рендера 12:35 Функции compile и compileFile 15:28 Пример: Соцсеть. Начало 34:28 include. Включение разметки 37:30 include. Включение миксинов 38:50 include. Включение сторонних файлов 39:56 Относительный путь 41:34 Абсолютный путь 43:09 basedir и данные 43:50 Не запутайтесь с путями! 44:47 Пример: Система "Патриот" 51:38 Наследование. Основы 55:54 append и prepend 57:16 Цепочки наследований 58:51 Проблемы с наследованием 1:00:23 Пример: Соцсеть. Конец 1:19:31 Обзор реального примера 1:21:58 Заключение #pug #pugjs #html #javascript #nodejs #js