Настройка и кастомизация темы Eleventy под ключ

Настройка и кастомизация темы Eleventy

Вы выбрали Eleventy за скорость и гибкость — и тут же столкнулись с тем, что готовых тем почти нет. В отличие от Hugo или Jekyll, стартовые шаблоны (starters) — это полноценные проекты, которые копируются целиком. Их нужно разобрать, понять логику и адаптировать под свои задачи. А если проект вышел за рамки блога, кастомизация требует ручной переработки шаблонов, данных и стилей.

Мы берём на себя всю эту работу: настраиваем конфигурацию, меняем макеты, добавляем недостающие компоненты и доводим тему до промышленного вида. Опыт более 5 лет и 30 завершённых проектов на Eleventy — гарантируем, что результат будет стабильным и поддерживаемым. Закажите бесплатную консультацию, чтобы обсудить ваш проект.

Проблемы, с которыми приходят клиенты

• Hydration mismatch и фантомные ошибки: при переносе контента из WordPress в Eleventy данные часто содержат лишние пробелы или невалидный HTML. Мы обрабатываем их через фильтры и кастомные парсеры.
• Сложная навигация и многостраничность: кастомные таксономии, пагинация, сортировка — в Eleventy это делается через коллекции, но настройка требует понимания его потоков данных. Мы проектируем систему так, чтобы любая страница собиралась за секунду.
• Дизайн-система и тёмная тема: готовые стартеры редко включают поддержку CSS-переменных и переключателя темы. Мы добавляем изолированные стили, анимации и адаптивную вёрстку с нуля.

Как мы настраиваем Eleventy: реальный кейс

Клиент — SaaS-продукт с 50+ документационными страницами. Исходный стартер eleventy-base-blog не поддерживал боковое меню, многоуровневую навигацию и полнотекстовый поиск. Мы:

1. Спроектировали новую архитектуру коллекций: страницы разделили на модули, каждый со своей метаинформацией.
2. Добавили кастомный плагин поиска на основе elasticlunr — индекс генерируется на этапе сборки, поиск работает без внешних сервисов.
3. Написали Nunjucks-компоненты: хедер с выпадающим меню, карточки статей, хлебные крошки, пагинацию.
4. Интегрировали Tailwind CSS через кастомный конфиг — переопределили палитру под брендбук заказчика.
5. Настроили RSS, sitemap и метаданные для SEO-продвижения.

Результат: время сборки сократилось с 12 до 3 секунд (на 75%), Core Web Vitals (LCP < 1.5 с) соответствуют зелёной зоне. Экономия на обслуживании — до 40% за счёт статики.

Почему стоит заказать кастомизацию Eleventy у нас?

Мы не просто меняем цвета и шрифты. Мы вникаем в бизнес-логику: как контент будет создаваться, как пользователи будут по нему перемещаться, как сайт должен вести себя на мобильных устройствах. Eleventy мощный, но его настройка требует погружения — мы это уже сделали за 30 проектов.

Сравнение: Настройка через самостоятельное изучение занимает от 5 до 14 дней, а наша команда справляется за 2–4 дня для базовой версии. При этом мы даём гарантию на работу 1 год — если что-то сломается после обновления шаблона, исправим бесплатно. Дополнительную экономию времени даёт автоматизация — до 30% от общего бюджета.

Как кастомизировать шаблоны Eleventy?

Принцип тот же, что в Hugo: находите нужный шаблон в папке _includes и редактируете напрямую. Стартер — это копия, не пакет, поэтому изменения не теряются при обновлениях. Типичные точки кастомизации:

• eleventy.config.js — добавление фильтров, коллекций, пасстру-копий.
• src/_data/metadata.json — смена названия, описания, автора.
• src/_includes/layouts/base.njk — структура HTML, метатеги, скрипты.

Мы всегда фиксируем все правки в документации проекта, чтобы вы могли быстро внести изменения в будущем. Получите консультацию — мы покажем, как это работает на вашем проекте.

Что входит в работу по настройке Eleventy

• Анализ стартера и ваших требований, подбор оптимального шаблона.
• Настройка metadata.json, navigation.json, конфигурации.
• Изменение макетов (base, post, page) — добавление навигации, футера, боковых панелей.
• Кастомизация стилей: CSS-переменные, Tailwind, тёмная тема.
• Создание кастомных компонентов (карточки, списки, формы).
• Добавление SEO: метатеги, Open Graph, sitemap, RSS.
• Тестирование на мобильных устройствах и в разных браузерах.
• Деплой на хостинг (Vercel, Netlify, GitHub Pages).
• Документация по структуре проекта и дальнейшей поддержке.

Сроки

Стоимость рассчитывается индивидуально — мы готовы бесплатно оценить ваш проект и предложить прозрачную смету. Свяжитесь с нами, чтобы получить предварительный расчёт.