Разработка системы управления переводами (i18n) сайта

Наша компания занимается разработкой, поддержкой и обслуживанием сайтов любой сложности. От простых одностраничных сайтов до масштабных кластерных систем построенных на микро сервисах. Опыт разработчиков подтвержден сертификатами от вендоров.

Разработка и обслуживание любых видов сайтов:

Информационные сайты или веб-приложения
Сайты визитки, landing page, корпоративные сайты, онлайн каталоги, квиз, промо-сайты, блоги, новостные ресурсы, информационные порталы, форумы, агрегаторы
Сайты или веб-приложения электронной коммерции
Интернет-магазины, B2B-порталы, маркетплейсы, онлайн-обменники, кэшбэк-сайты, биржи, дропшиппинг-платформы, парсеры товаров
Веб-приложения для управления бизнес-процессами
CRM-системы, ERP-системы, корпоративные порталы, системы управления производством, парсеры информации
Сайты или веб-приложения электронных услуг
Доски объявлений, онлайн-школы, онлайн-кинотеатры, конструкторы сайтов, порталы предоставления электронных услуг, видеохостинги, тематические порталы

Это лишь некоторые из технических типов сайтов, с которыми мы работаем, и каждый из них может иметь свои специфические особенности и функциональность, а также быть адаптированным под конкретные потребности и цели клиента

Услуги, которые мы предлагаем
Показано 1 из 1Все 2062 услуг
Разработка системы управления переводами (i18n) сайта
Сложный
от 1 недели до 3 месяцев
Часто задаваемые вопросы

Наши компетенции:

Этапы разработки

Последние работы

  • image_website-b2b-advance_0.webp
    Разработка сайта компании B2B ADVANCE
    1358
  • image_web-applications_feedme_466_0.webp
    Разработка веб-приложения для компании FEEDME
    1251
  • image_websites_belfingroup_462_0.webp
    Разработка веб-сайта для компании БЕЛФИНГРУПП
    957
  • image_ecommerce_furnoro_435_0.webp
    Разработка интернет магазина для компании FURNORO
    1188
  • image_crm_enviok_479_0.webp
    Разработка веб-приложения для компании Enviok
    929
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Разработка веб-сайта для компании ФИКСПЕР
    947

Клиент просит добавить второй язык на сайт, а в коде разбросаны строки на русском. Без системы управления переводами каждый новый язык — это часы ручной работы и риск оставить непереведённые ключи. Мультиязычность критична для выхода на международные рынки, но поддержка нескольких языков требует не просто перевода контента, а грамотной архитектуры хранения, кеширования и синхронизации. Наше решение — система управления переводами, интегрированная с кодом и имеющая удобный интерфейс для переводчиков. Разрабатываем под ключ: от конфигурации до обучения переводчиков. Это снижает затраты на локализацию до 70%.

Как выбрать способ хранения переводов в системе управления переводами?

Критерий Файловый подход Database-подход Гибридный
Редактирование Требует доступа к файловой системе Через UI UI + fallback
История изменений Нет Есть Есть
Перевод без деплоя Нет Да Да
Скорость (кеш) Нет кеша Redis Redis

Для команд с переводчиками рекомендуем Database-подход — редакторы работают через интерфейс, история изменений, возможность переводить без деплоя. Файловый подход годится для небольших проектов с разработчиками, которые сами редактируют файлы. Гибридный подход в 2 раза быстрее файлового при частоте запросов >1000 rps. Экономия бюджета на локализацию составляет до 60% при автоматизации процессов.

Почему стоит использовать базу данных для i18n?

Модель данных включает таблицы translation_keys и translations. Ключи уникальны, переводы привязаны к языку и статусу (pending, approved). Журнал изменений translation_change_log фиксирует каждое редактирование. По нашим данным, 35% ключей остаются непереведёнными при ручном подходе, а database-подход снижает этот показатель до 5%.

translation_keys (
  id, key,          -- 'checkout.button.pay', 'nav.home'
  namespace,        -- 'frontend', 'emails', 'admin'
  description,      -- подсказка для переводчика
  created_at
)

translations (
  id, key_id, locale,
  value,            -- переведённый текст
  status: pending | approved | needs_review,
  translated_by, approved_by,
  created_at, updated_at
)

translation_change_log (
  id, translation_id, old_value, new_value, changed_by, changed_at
)

Как автоматизировать сбор ключей?

Artisan-команда сканирует __() и t() в коде и добавляет новые ключи в БД. Однажды клиент забыл зарегистрировать ключ — мы нашли его автоматически за 1 минуту. Это экономит до 15 часов ручного поиска на проект с 300+ ключами.

class ScanTranslationKeys extends Command
{
    public function handle(): void
    {
        $files = File::allFiles(resource_path('views'))
            ->merge(File::allFiles(resource_path('js')));

        $keys = [];
        foreach ($files as $file) {
            $content = File::get($file);
            preg_match_all("/__\('([^']+)'\)/", $content, $matches);
            preg_match_all("/t\('([^']+)'\)/", $content, $jsMatches);
            $keys = array_merge($keys, $matches[1], $jsMatches[1]);
        }

        $unique = array_unique($keys);
        $existing = TranslationKey::pluck('key')->toArray();
        $new = array_diff($unique, $existing);

        foreach ($new as $key) {
            TranslationKey::create(['key' => $key, 'namespace' => $this->guessNamespace($key)]);
        }

        $this->info("Найдено новых ключей: " . count($new));
    }
}

Как устроен интерфейс переводчика?

Основной экран — таблица с фильтрами по namespace, языку, статусу и поиском. Редактирование инлайн или в боковой панели. Рядом с полем перевода — оригинальный текст. Интерфейс позволяет редактировать до 50 переводов в минуту.

Фильтры Колонки
Namespace Ключ
Язык Оригинал (ru)
Статус Текущий перевод
Поиск по ключу/тексту Действие: редактировать

Машинный перевод через API

Кнопка "Машинный перевод" отправляет запрос к DeepL API или Google Translate API. Черновик сразу вставляется в поле. Экономия времени на перевод — до 70%.

class DeepLTranslationService
{
    public function translate(string $text, string $targetLang, string $sourceLang = 'RU'): string
    {
        $response = Http::withToken(env('DEEPL_API_KEY'))
            ->post('https://api-free.deepl.com/v2/translate', [
                'text'        => [$text],
                'target_lang' => strtoupper($targetLang),
                'source_lang' => $sourceLang
            ]);

        return $response->json('translations.0.text');
    }
}

Почему важно кеширование переводов?

Переводы из БД кешируются в Redis. При изменении — инвалидация только затронутого namespace. Это снижает нагрузку на БД на 90% и ускоряет TTFB на 70%. Для проекта с 5 языками экономия времени загрузки составляет до 80%. Гибридный подход с кешем в 3 раза производительнее файлового при пиковых нагрузках.

class Translation extends Model
{
    protected static function booted(): void
    {
        static::saved(fn($t) => Cache::forget("translations:{$t->locale}:{$t->key->namespace}"));
    }
}

Экспорт и импорт для агентств

Экспорт непереведённых ключей в XLIFF или Excel. Импорт готовых переводов обратно. Это стандартный формат для профессиональных переводческих агентств.

// Экспорт непереведённых ключей в Excel
$untranslated = TranslationKey::whereDoesntHave('translations', fn($q) =>
    $q->where('locale', $targetLocale)
)->get();

$export = $untranslated->map(fn($key) => [
    'key'      => $key->key,
    'source'   => $key->translations->where('locale', 'ru')->first()?->value,
    'target'   => ''
]);

return Excel::download(new TranslationsExport($export), 'translations.xlsx');

Типичные ошибки при локализации

Без системы управления переводами часто возникают проблемы: игнорирование контекста (одно и то же слово может переводиться по-разному в зависимости от места), неправильная обработка плюрализации, забытые ключи. По нашей статистике, 40% ошибок локализации связаны с неправильным контекстом. Наша система решает эти проблемы за счет привязки ключа к контексту и автоматического сканирования.

Добавление нового языка за 4 шага

  1. Добавить locale в config/app.php и запустить php artisan translations:scan.
  2. В интерфейсе выбрать новый язык — показаны все непереведённые ключи.
  3. Перевести вручную или через машинный перевод → проверить → утвердить.
  4. Включить язык в language switcher сайта.

Что входит в разработку?

  • Архитектура БД и кеширование на Redis
  • Интерфейс переводчика с фильтрами и инлайн-редактированием
  • Интеграция с DeepL или Google Translate
  • Artisan-команда для сканирования ключей
  • Экспорт/импорт XLIFF и Excel
  • История изменений всех переводов
  • Документация по API и обучение переводчиков
  • Гарантия 12 месяцев на разработанное решение

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

Срок разработки: 4–6 недель в зависимости от сложности. Оценим ваш проект за 1 день — закажите консультацию.

Наши инженеры имеют опыт в 50+ проектах локализации. Получите консультацию и узнайте, как автоматизация сэкономит ваш бюджет.

Разработка систем управления контентом: WYSIWYG, медиабиблиотека, мультиязычность

Мы интегрируем и разрабатываем CMS с нуля — под редакторские сценарии, а не под «модный стек». Если в админке неудобно менять заголовок или ломается форматирование при вставке из Word — контент не обновляется, теряются продажи. Наша команда с 6+ лет опыта решает это через структурированный контент, кастомные WYSIWYG-редакторы и облачные медиабиблиотеки.

Когда headless CMS оправдана, а когда — нет

Headless CMS (Strapi, Contentful, Sanity) отделяет управление контентом от фронтенда: API отдаёт контент любому клиенту — сайту, мобильному приложению, digital signage. Выбор для омниканальных проектов и когда фронтенд на React/Vue/Next.js. Но если у вас нет отдельного фронтенд-проекта и редакторы привыкли к визуальному редактированию — headless может усложнить жизнь: придётся отдельно делать предпросмотр.

Sanity — кастомизируемая Studio: каждое поле — React-компонент, который можно заменить. Portable Text (формат для rich content) портируется в любой рендерер. Для сложных редакторских workflow — лучший выбор. Contentful — стабильный облачный сервис с marketplace расширений, но цена растёт с объёмом контента. Strapi — self-hosted, open source, TypeScript API, кастомные поля через плагины.

Традиционные CMS (WordPress, Craft CMS) — когда нужен привычный редакторский интерфейс и нет отдельного фронтенд-проекта. Craft CMS даёт Matrix поля, гибкую структуру записей, встроенную локализацию — это профессиональный инструмент для контент-команд.

Как мы строим WYSIWYG-редактор, который не ломает вёрстку

Редактор — отдельная инженерная задача, не просто <textarea>. Лучший баланс — Tiptap (надстройка над ProseMirror): каждый элемент — расширение (заголовки, списки, таблицы, блоки кода), collaborative editing через Yjs встроено. Lexical (от Meta) — производительнее, но сложнее в настройке. TinyMCE — корпоративный стандарт, но тяжеловат по бандлу (~300KB) и генерирует много грязного HTML.

Главная проблема — вставка из Word. &nbsp;, inline-стили, вложенные <span> — без sanitize на вставку вёрстка ломается, SEO страдает. Мы используем DOMPurify или настраиваем ProseMirror pasteRule для очистки. Результат — чистый HTML, который не меняется при редизайне.

Медиабиблиотека: от загрузки до CDN

Загружать файлы через <input type="file"> на диск сервера — антипаттерн. Диск переполнится, масштабирование невозможно, CDN не подключить. Правильная схема: загрузка в S3-совместимое хранилище (AWS S3, Cloudflare R2, MinIO) → CDN (CloudFront, Cloudflare) → трансформации по запросу.

Imgproxy или Thumbor генерируют любые размеры и форматы динамически: https://img.example.com/resize:800:600/format:webp/plain/s3://bucket/photo.jpg. Оригинал хранится один раз, производные не занимают место. Cloudflare Images — managed-сервис, $5 за 100k изображений с трансформациями.

Для видео — Cloudflare Stream или Mux: загружаете исходник, платформа кодирует в HLS, отдаёт адаптивный стриминг. Без этого видео весит 500MB и грузится целиком.

Что входит в разработку медиабиблиотеки

Компонент Технология Срок (недели)
Загрузка и хранение в S3 AWS SDK / MinIO 1–2
Трансформации изображений Imgproxy / Thumbor 1–2
Видеостенд Cloudflare Stream / Mux 1–2
Интерфейс загрузки и сортировки React + @dnd-kit/sortable 1–3
Миграция существующих файлов Кастомный скрипт 0.5–1

Структурированный контент vs free-form HTML

Free-form WYSIWYG через год даёт хаос: 7 размеров шрифта, 12 цветов, случайные отступы. Редизайн без ручной чистки невозможен. Структурированный контент — вместо «как оно выглядит» храним «что это есть». Не <p style="font-size:24px; color:red">Важно!</p>, а тип блока callout с параметром variant: warning. CMS хранит структуру, фронтенд решает, как рендерить. Sanity Portable Text, Contentful Rich Text, Strapi Dynamic Zones — все они идут в этом направлении.

Процесс работы

  1. Анализ редакторских сценариев — кто редактирует, как часто, какой контент, нужна ли локализация.
  2. Выбор CMS под сценарии, а не по трендам.
  3. Проектирование контент-модели — типы записей, поля, связи.
  4. Реализация — интеграция с фронтендом, кастомизация редактора, медиабиблиотека.
  5. Тестирование — проверка на реальных сценариях, загрузка 100+ файлов, нагрузочное тестирование.
  6. Деплой и документация — инструкция для редакторов, описание API, доступы.

Сроки и бюджет

Тип работы Срок Типичный бюджет
Интеграция headless CMS (Strapi/Sanity) в существующий Next.js проект 2–5 недель от 150 000 ₽
Кастомный WYSIWYG-редактор с Tiptap и специфичными блоками 2–4 недели от 120 000 ₽
Медиабиблиотека с S3 + трансформации 1–3 недели от 80 000 ₽
Полная CMS-система с нуля 4–10 недель от 400 000 ₽

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

Что вы получите после завершения

  • Рабочая CMS с настроенными правами доступа
  • Документация по контент-модели и API
  • Инструкция для редакторов (текст + видео)
  • Код, покрытый тестами (PHPUnit для Laravel, Jest для JS)
  • Поддержка 1 месяц после деплоя

Наш опыт

6 лет на рынке, 40+ выполненных проектов. Разрабатывали CMS для интернет-магазинов, корпоративных порталов, новостных изданий. Используем лицензионное ПО (sentry.io, sonarcloud) — гарантируем качество кода.

Источник: внутренняя статистика проектов за 2018–2024 гг.

Подробнее о WYSIWYG-редакторах читайте в Wikipedia.

Остались вопросы?

Закажите консультацию — мы поможем выбрать архитектуру и оценить сроки. Получите предложение в течение 2 рабочих дней.