ПГТУ - Портфолио chomovva

Адрес сайта: 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…)
  • “Заголовок с иконкой”
Все компоненты Gutenberg

Скриншоты сайта

голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x