Раскладка — это схема расположения проектов в портфолио бюро. Раскладка состоит из этажей — шаблонов, отображающих проекты в соответствии с их значимостью. Шаблоны подбираются по количеству проектов и особым правилам: например, мы чередуем ритм, чтобы на соседних этажах не оказывались работы в одной сетке, чтобы не образовывались «псевдомодули».

Раскладка
Страница

Раскладка создается автоматически в четыре этапа:

  1. Собираем информацию о проектах: название, описание, продукт, рубрики, дату и превьюшки.

  2. Группируем проекты по продуктам‑клиентам: редстандарты Актиона, Т2, Мэри Трюфель.

  3. Группируем продукты, в которых по одному проекту.

  4. Собираем раскладку этаж за этажом, примеряя и оценивая каждый из шаблонов к текущему продукту.

Мы решили информацию, нужную для раскладки проектов на страницах рубрик, хранить не в БД, а прямо в коде страниц отдельных проектов. Так мы ускоряем разработку, не создаём лишних интерфейсов и держим связанную информацию в одном месте:

// 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="Редстандарты Актиона">
ХТМЛ парсим с помощью cheerio

Естественно, есть возможности для тонкой настройки:

+webpage({
  // importance управляет порядком проектов внутри продукта.
  // Значение по умолчанию — 1. Проект с importance 100
  // встанет на самый верх этажа, невзирая на дату
  importance: 100,

  // Модификатор noindex скрывает проект из портфолио
  // до его публикации
  mod: 'noindex'
})


В следующем совете расскажу об архитектуре нового сайта бюро: как устроен внутри, как взаимодействует со старым сайтом, на чём работает.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы