Headless CMS + PolyLingo

Багатомовність для headless CMS.

Polylang надав сайтам WordPress повний багатомовний workflow. PolyLingo приносить цей workflow до Sanity, Contentful, Webflow, Framer та будь-якого іншого headless CMS — через REST API, який інтегрується за один день.

Sanity
приклад повної інтеграції
Contentful
приклад повної інтеграції
Webflow
приклад повної інтеграції
36
цільові мови

Багатомовність у headless CMS — нерозв’язана проблема.

Sanity має плагін інтернаціоналізації. Contentful має локалі. Але жоден із них не перекладає ваш контент — вони просто зберігають його кількома мовами. Заповнення цих мовних слотів досі є ручним процесом. Експортуйте англійський контент, пропускайте його через інструмент перекладу, який руйнує вашу структуру rich text або JSON, виправляйте результат, імпортуйте назад, повторюйте для кожної мови. Для активної команди, що регулярно публікує контент, цей workflow не масштабується. Також він відсутній у більшості менших систем, що означає, що контент просто ніколи не перекладається.

Архітектура headless CMS розділяє управління контентом і його доставку. Це добре для гнучкості. Але створює розрив: CMS зберігає мовні варіанти, але ніхто не заповнює ці варіанти перекладеним контентом. Цей шар потрібно будувати самому.

Більшість команд опиняються в одній із двох ситуацій: вони вручну перекладають контент, копіюючи його в DeepL і вставляючи назад (повільно, з помилками, не масштабується), або пишуть кастомну інтеграцію з API перекладу, яку доводиться підтримувати вічно. Жоден варіант не є хорошим. PolyLingo — це чистий третій варіант.

PolyLingo — це шар перекладу, якого бракує вашому CMS.

PolyLingo інтегрується безпосередньо у ваш workflow публікації CMS. Налаштуйте webhook, який спрацьовує при публікації контенту, передайте контент у PolyLingo, отримайте перекладені версії для кожної мови, запишіть їх назад у CMS. Для Sanity це кілька рядків у серверній дії. Для Contentful — обробник webhook. Для кастомних систем — HTTP виклик. Модель перекладу розуміє формат вашого контенту — Markdown, HTML, JSON, rich text — і зберігає структуру повністю.

Патерн однаковий для будь-якого CMS: отримати контент у вихідній мові, викликати PolyLingo API з усіма цільовими мовами, записати перекладений контент назад у CMS через його API управління. Це виконується як скрипт під час збірки, CI-завдання або обробник webhook — залежно від вашого workflow.

PolyLingo підтримує Markdown, HTML і plain text, тому працює з будь-яким форматом, який ваш CMS використовує для rich content. Структуровані поля (заголовки, тіло, витяг) можна перекладати окремо, щоб мати детальний контроль над тим, які поля перекладати.

🟠

Sanity + PolyLingo

Плагін Document Internationalization для Sanity створює пов’язані варіанти документів для кожної локалі. Скрипт нижче отримує англійські базові документи і автоматично створює перекладені варіанти для кожної цільової мови.

Працює з патерном i18n на рівні документів (один документ на локаль) та патерном на рівні полів (всі локалі в одному документі). Для патерну на рівні полів ітеруйтеся по полях, а не по документах.

scripts/translate-sanity.mjs
// scripts/translate-sanity.mjs
// Fetches published posts and translates each to all target languages

import { createClient } from '@sanity/client'

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: 'production',
  token: process.env.SANITY_TOKEN,
  apiVersion: '2024-01-01',
  useCdn: false,
})

const posts = await sanity.fetch(`*[_type == "post" && __i18n_lang == "en"]`)

for (const post of posts) {
  const response = await fetch('https://api.usepolylingo.com/v1/translate', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.POLYLINGO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      content: post.body_markdown,
      format: 'markdown',
      targets: ['es', 'fr', 'de', 'ja', 'zh'],
    }),
  })

  const { translations } = await response.json()

  for (const [lang, content] of Object.entries(translations)) {
    await sanity.create({
      _type: 'post',
      __i18n_lang: lang,
      __i18n_base: { _type: 'reference', _ref: post._id },
      title: translations[lang + '_title'] || post.title,
      slug: { current: `${post.slug.current}-${lang}` },
      body_markdown: content,
    })
  }
}
🔵

Contentful + PolyLingo

Contentful зберігає мовні варіанти як поля в одному записі. Скрипт нижче використовує Contentful Management API для отримання англійських записів, їх перекладу і запису перекладеного контенту безпосередньо в поля конкретних локалей — без ручного копіювання.

Contentful використовує коди локалей BCP 47 (наприклад, es-ES замість es). Відповідно зіставте коди ISO 639-1 PolyLingo з конфігурацією локалей Contentful.

scripts/translate-contentful.mjs
// scripts/translate-contentful.mjs
// Translates Contentful entries to all target locales

import contentful from 'contentful-management'

const client = contentful.createClient({
  accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN,
})

const space = await client.getSpace(process.env.CONTENTFUL_SPACE_ID)
const env = await space.getEnvironment('master')
const entries = await env.getEntries({ content_type: 'blogPost', locale: 'en-US' })

for (const entry of entries.items) {
  const enBody = entry.fields.body['en-US']

  const response = await fetch('https://api.usepolylingo.com/v1/translate', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.POLYLINGO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      content: enBody,
      format: 'markdown',
      targets: ['es-ES', 'fr-FR', 'de-DE'],
    }),
  })

  const { translations } = await response.json()

  for (const [locale, content] of Object.entries(translations)) {
    entry.fields.body[locale] = content
  }

  await entry.update()
  await entry.publish()
}
🌀

Webflow + PolyLingo

Localization API Webflow (доступний у планах CMS і Business) підтримує контент полів, специфічних для локалі. Скрипт нижче отримує елементи колекції CMS, перекладає поле HTML body і записує переклади назад у кожен варіант локалі через Webflow v2 API.

Webflow зберігає поля rich text як HTML. Переклад HTML у PolyLingo зберігає всю розмітку, створену Webflow — кастомні класи, атрибути та вбудовані елементи — без змін.

scripts/translate-webflow.mjs
// scripts/translate-webflow.mjs
// Webflow Localization API + PolyLingo

const headers = {
  'Authorization': `Bearer ${process.env.WEBFLOW_API_TOKEN}`,
  'accept-version': '2.0.0',
  'Content-Type': 'application/json',
}

// Fetch English CMS items
const itemsRes = await fetch(
  `https://api.webflow.com/v2/collections/${process.env.WEBFLOW_COLLECTION_ID}/items`,
  { headers }
)
const { items } = await itemsRes.json()

for (const item of items) {
  const response = await fetch('https://api.usepolylingo.com/v1/translate', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.POLYLINGO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      content: item.fieldData['body-html'],
      format: 'html',
      targets: ['es', 'fr', 'de'],
    }),
  })

  const { translations } = await response.json()

  // Write translated content back to Webflow locale fields
  for (const [lang, content] of Object.entries(translations)) {
    await fetch(
      `https://api.webflow.com/v2/collections/${process.env.WEBFLOW_COLLECTION_ID}/items/${item.id}/locales/${lang}`,
      { method: 'PATCH', headers, body: JSON.stringify({ fieldData: { 'body-html': content } }) }
    )
  }
}

Що дає PolyLingo користувачам headless CMS

  • Sanity — переклад при публікації через webhook, запис назад у локалі документів
  • Contentful — автоматичний переклад записів при оновленні англійської локалі
  • Webflow — переклад елементів колекції CMS через API
  • Будь-який headless CMS з API — патерн інтеграції однаковий
  • Rich text, Markdown і HTML зберігаються коректно
  • Всі 36 мов в одному запиті — без викликів на кожну мову окремо
  • Працює з будь-яким CMS, що має API управління
  • Контент можна перекладати повторно при кожній публікації — без ручної синхронізації

Стандартний багатомовний workflow CMS

1

Створіть контент у вашій вихідній мові

Створюйте і публікуйте контент англійською (або будь-якою вашою вихідною мовою). Ваш CMS зберігає це як авторитетну версію. Вам не потрібно змінювати редакційний workflow.

2

Запустіть скрипт перекладу

Запускайте скрипт вручну, за розкладом або через webhook, що спрацьовує при публікації контенту у вашому CMS. Скрипт викликає PolyLingo один раз на документ з усіма цільовими мовами, потім записує всі переклади назад у CMS за один прохід.

3

Розгортання — перекладений контент доступний

Ваш фронтенд звичайно читає контент, специфічний для локалі, з CMS. Зміни у фронтенд-коді не потрібні. Перекладений контент відображається правильною мовою для кожного маршруту локалі.

Для кого це створено

✍️

Команди контенту на Sanity або Contentful

Ваші редактори публікують англійською. Перекладений контент автоматично з’являється у всіх локалях, без потреби взаємодії команди з інструментами перекладу.

🏢

Агенції, що створюють багатомовні сайти

Кожен клієнтський сайт потребує багатомовної підтримки. PolyLingo дає вам багаторазову, платну інтеграцію, що працює з будь-яким headless CMS у вашому стеку.

🌍

E-commerce з локалізованим контентом продуктів

Опис продуктів, сторінки категорій і блог — все перекладається автоматично при публікації. Поєднуйте з локалізованим ціноутворенням для повністю локалізованого досвіду покупок.

Поширені питання про багатомовність у headless CMS

Чи працює PolyLingo з CMS, яких тут немає?

Так. Будь-який CMS з API управління можна інтегрувати за тим самим патерном — отримати контент, викликати PolyLingo, записати назад. Prismic, Storyblok, DatoCMS, Strapi, Ghost і Directus мають API управління і працюють з цим підходом. Приклади інтеграції для Sanity, Contentful і Webflow вище ілюструють цей патерн.

Чи можна перекладати rich text з вбудованими зображеннями та посиланнями?

Так. Переклад HTML зберігає всі вбудовані елементи, включно із зображеннями (коректно обробляються атрибути src і alt), посиланнями (href зберігається, текст посилання перекладається) та iframe. Єдина виняток — контент, явно позначений як не для перекладу — наприклад, блоки коду ніколи не перекладаються.

Як обробляти контент, який не потрібно перекладати?

Для структурованого контенту з неперекладними полями (slug, дати, технічні ідентифікатори) надсилайте лише ті поля, які хочете перекласти. Для rich text з змішаними перекладними і неперекладними секціями використовуйте формат HTML — PolyLingo перекладе текстовий контент, зберігаючи блоки коду та інші структуровані елементи автоматично.

Що робити, якщо у мого CMS є вкладені типи контенту?

Для глибоко вкладеного контенту (документи з посиланнями на інші документи) перекладайте кожен тип документа окремо. Це уникає циклічних посилань і дає чистий контроль над тим, який контент перекладати. Посилання між документами підтримує CMS — PolyLingo торкається лише вмісту полів, а не зв’язків документів.

Як синхронізувати переклади, коли змінюється вихідний контент?

Рекомендований патерн — запускати скрипт перекладу при кожній події публікації через webhook CMS. Це гарантує оновлення перекладеного контенту щоразу, коли змінюється вихідний. Для рідкісних оновлень можна запускати скрипт за розкладом вночі або перед кожним розгортанням у продакшн.

Чи можна позначати переклади як "потрібен перегляд" замість автоматичної публікації?

Це залежить від вашого CMS. Contentful і Sanity підтримують чернетки — ви можете записувати перекладений контент як чернетку, а не публікувати одразу, що дозволяє людський перегляд перед виходом локалі в ефір. Приклади скриптів вище використовують негайну публікацію/створення; змініть останній крок, щоб створювати чернетки для workflow з переглядом.

Додайте багатомовність до вашого headless CMS сьогодні.

Безкоштовний тариф. 100 000 токенів на місяць. Кредитна картка не потрібна.

Почати перекладати безкоштовно

Безкоштовний тариф — 100 000 токенів на місяць. Працює з будь-яким CMS.

Багатомовність для headless CMS — Sanity, Contentful та інші — PolyLingo | PolyLingo