ПГТУ

Создание корпоративного сайта и написание плагинов для Приазовского государственного технического университета

Адрес сайта: https://pstu.edu/

Git-репозиторий: –

Моей первой задачей в ПГТУ было обновление официального сайта университета. Старый сайт был написан на TYPO3, давно не обновлялся и сильно устарел как движок, так и дизайн сайта.

За время работы в ПГТУ было сделано уже несколько обновлений сайта. Если первая версия полностью копировала структуру старого, то в новых она сильно отличается. К примеру был активирован WordPress Multisite и страницы крупных отделов университета перенесены на отдельные сайты на поддоменах.

Вёрстка производилась с помощью препроцессоров SASS и Pug (Jade), для сборки проекта использован Gulp. Описание шаблона проекта есть в портфолио.

Тема адаптивна, показатель скорости загрузки PageSpeed Insights в желтой зоне.

Помимо вёрстки и создании WordPress темы был написан ряд мини плагинов-утилит для решения рутинных задач и автоматизации работы с сайтом. Описание некоторых плагинов есть в портфолио.

Что было использовано в работе

Gutenberg

С появлением версии 5.0 были добавлены кастомные блоки Gutenberg, которые не входили в стандартную подборку. А к некоторым стандартным блокам добавлены классы-модфкаторы аналоги бутстраповским (.bg-primary…, .btn-success…, .text-warning). Для всех изображения, которые подключаемых в кастомных блоках, загружаются с помощью ленивой загрузки (lazyload).

Кастомные блоки:

“Clearfix” – “очистка потока»
“Выделение” – аналог бутстраповского компонета Wells, но с добавление разновидностей (.well-default, .well-primary, .well-success, .well-warning, .well-info)
“Медиа объект” – аналог бутстраповского компонета Media object
“Список подстраниц” – обертка для шорткода, который автоматически выводит дочерние к текущей страницы.
“Иконочное меню” – заготовка для создания иконки с заголовком и ссылкой
YouTube видео – для добавления ссылки на YouTube видео и правью к нему, видео открывается в модальном окне.
“Флат меню” – меню из блоков с заголовком, превью (2×3), описанием и ссылкой.
“Аккордеон” – обёртка для формирования “списка аккордеона”, написан небольшой jQuery плагин, который находит на странице элементы с определённым data-атрибутом, из дочерних єлементов автоматически создаётся список. Стили заголовков по аналогии с классами bottstrap (default, primary, success…)
“Заголовок с иконкой”