
ПГТУ
Адрес сайта: https://pstu.edu/
Git-репозиторий: –
Моей первой задачей в ПГТУ было обновление официального сайта университета. Старый сайт был написан на TYPO3, давно не обновлялся и сильно устарел как движок, так и дизайн сайта.
За время работы в ПГТУ было сделано уже несколько обновлений сайта. Если первая версия полностью копировала структуру старого, то в новых она сильно отличается. К примеру был активирован WordPress Multisite и страницы крупных отделов университета перенесены на отдельные сайты на поддоменах.
Вёрстка производилась с помощью препроцессоров SASS и Pug (Jade), для сборки проекта использован Gulp. Описание шаблона проекта есть в портфолио.
Тема адаптивна, показатель скорости загрузки PageSpeed Insights в желтой зоне.
Помимо вёрстки и создании WordPress темы был написан ряд мини плагинов-утилит для решения рутинных задач и автоматизации работы с сайтом. Описание некоторых плагинов есть в портфолио.
Что было использовано в работе
- jQuery
- Flexbox Grid (sass)
- HTML5/CSS3
- WordPress
- Flaticon.com
- fancyBox v3.3.5
- jQuery & Zepto Lazy v1.7.6
- slick.js
- SuperEmbed.js
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…)
- “Заголовок с иконкой”