PHP ОТ МИРА JAVASCRIPT! Pug. Полный курс. Часть 2

Опубликовано: 28 Март 2021
на канале: Peter Radko [CMTV]

5,357

171

Быстро делать эффектные и эффективные прототипы мы уже умеем.
Пора решить основную проблему HTML и разделить данные и разметку.
В этой части мы научимся применять разные данные к одной разметке, освоим включение внешних файлов, а также изучим наследование разметки. Кроме того, мы создадим собственную соцсеть, а также станем самым настоящем агентом Кремля!

Для освоения материала достаточно базовых знаний HTML, JavaScript, а также платформы Node JS (ссылка на обучающий ролик ниже).

⬅️ Предыдущая часть:
• HTML БОЛЬШЕ НЕ НУЖЕН! Pug. Полный кур...

📂 Материалы ролика:

• GitHub репозиторий с примерами:
https://github.com/CMTV/youtube/tree/...

🔗 Полезные ссылки

• Основы Node JS:
• Основы Node.js и npm

• Официальный сайт Pug (документация с примерами):
https://pugjs.org/

• Pug на npm:
https://www.npmjs.com/package/pug

• Pug на GitHub:
https://github.com/pugjs/pug

• Редактор VS Code
https://code.visualstudio.com/

📜 Содержание:
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