Михаил Нозик о создании сайта бюро и раскладке работ
Раскладка — это схема расположения проектов в портфолио бюро. Раскладка состоит из этажей — шаблонов, отображающих проекты в соответствии с их значимостью. Шаблоны подбираются по количеству проектов и особым правилам: например, мы чередуем ритм, чтобы на соседних этажах не оказывались работы в одной сетке, чтобы не образовывались «псевдомодули».
Михаил Нозик о создании сайта бюро и раскладке работ
Раскладка создается автоматически в четыре этапа:
Собираем информацию о проектах: название, описание, продукт, рубрики, дату и превьюшки.
Группируем проекты по
продуктам‑клиентам : редстандарты Актиона, Т2, Мэри Трюфель.Группируем продукты, в которых по одному проекту.
Собираем раскладку этаж за этажом, примеряя и оценивая каждый из шаблонов к текущему продукту.
Мы решили информацию, нужную для раскладки проектов на страницах рубрик, хранить не в БД, а прямо в коде страниц отдельных проектов. Так мы ускоряем разработку, не создаём лишних интерфейсов и держим связанную информацию в одном месте:
// projects/action-pishet-articles/index.pug
+webpage({
// Рубрики, в которых показываем проект
categories: 'Продукты и услуги; Логотипы и фирстили; Книги и СМИ;',
// Описание проекта
description: '<span>Актион-МЦФЭР пишет</span> — программа
редакционных стандартов издательства,
призванная помочь повысить качество текста
и упростить обучение новых авторов',
// Продукт, к которому относится проект
product: 'Редстандарты Актиона'
})
// Название проекта
h1 Плакаты о структуре статьи
.thumb-meta(style="display: none;")
// Какие картинки использовать в раскладке, когда
// проект занимает всю ширину, 7/8 и половину этажа
+thumbnail({fitsTo: '1', fitToProportion: '880:639'})
+image({ src: 'action-pishet-articles_880x639.png' })
+thumbnail({fitsTo: '7:8', fitToProportion: '767:639'})
+image({ src: 'action-pishet-articles_767x639.png' })
+thumbnail({fitsTo: '1:2', fitToProportion: '430:432'})
+image({ src: 'action-pishet-articles_430x432.png' })
// Дата выхода проекта: по ней сортируем проекты внутри продукта
date 11.04.2017
meta.pugДанные извлекаем после компиляции Джейд (Паг) шаблонов в ХТМЛ:
<div class="webpage project js__webpage"
categories="Продукты и услуги; Логотипы и фирстили; Книги и СМИ;"
description="<span>Актион‑МЦФЭР пишет</span> — программа
редакционных стандартов издательства,
призванная помочь повысить качество текста
и упростить обучение новых авторов"
product="Редстандарты Актиона">Естественно, есть возможности для тонкой настройки:
+webpage({
// importance управляет порядком проектов внутри продукта.
// Значение по умолчанию — 1. Проект с importance 100
// встанет на самый верх этажа, невзирая на дату
importance: 100,
// Модификатор noindex скрывает проект из портфолио
// до его публикации
mod: 'noindex'
})
В следующем совете расскажу об архитектуре нового сайта бюро: как устроен внутри, как взаимодействует со старым сайтом, на чём работает.