หลายภาษาสำหรับ headless CMS.
Polylang มอบเวิร์กโฟลว์หลายภาษาแบบครบวงจรให้กับเว็บไซต์ WordPress PolyLingo นำเวิร์กโฟลว์นั้นสู่ Sanity, Contentful, Webflow, Framer และ headless CMS อื่นๆ ทุกตัว — ผ่าน REST API ที่ผสานรวมได้ในช่วงบ่ายเดียว
หลายภาษาใน headless CMS เป็นปัญหาที่ยังไม่ได้แก้ไข
Sanity มีปลั๊กอินสำหรับการทำให้เป็นสากล Contentful มี locales แต่ไม่มีตัวใดแปลเนื้อหาของคุณ — พวกเขาเพียงแค่เก็บไว้ในหลายภาษา การเติมช่องภาษานั้นยังคงเป็นกระบวนการด้วยมือ ส่งออกเนื้อหาอังกฤษ ใช้เครื่องมือแปลที่อาจทำลายโครงสร้าง rich text หรือ JSON แก้ไขผลลัพธ์ นำเข้ากลับ ทำซ้ำสำหรับทุกภาษา สำหรับทีมเนื้อหาที่เผยแพร่เป็นประจำ เวิร์กโฟลว์นี้ไม่สามารถขยายได้ และยังไม่มีสำหรับการตั้งค่าส่วนใหญ่ที่เล็กกว่า ซึ่งหมายความว่าเนื้อหาเหล่านั้นจะไม่ถูกแปลเลย
สถาปัตยกรรม headless CMS แยกการจัดการเนื้อหาออกจากการส่งมอบเนื้อหา ซึ่งดีสำหรับความยืดหยุ่น แต่สร้างช่องว่าง: CMS เก็บตัวแปรภาษาไว้ แต่ไม่มีอะไรเติมตัวแปรภาษานั้นด้วยเนื้อหาที่แปล คุณต้องสร้างชั้นนั้นเอง
ทีมส่วนใหญ่จบลงในสองสถานการณ์: แปลเนื้อหาด้วยมือโดยคัดลอกไปยัง DeepL แล้ววางกลับ (ช้า มีข้อผิดพลาด ขยายไม่ได้) หรือเขียนการผสานรวมแบบกำหนดเองกับ API การแปลที่ต้องดูแลรักษาตลอดไป ไม่มีทางเลือกใดดี PolyLingo คือทางเลือกที่สามที่สะอาด
PolyLingo คือชั้นการแปลที่ CMS ของคุณขาดหายไป
PolyLingo ผสานรวมโดยตรงกับเวิร์กโฟลว์การเผยแพร่ของ CMS ของคุณ ตั้งค่า webhook ที่ทำงานเมื่อเนื้อหาถูกเผยแพร่ ส่งเนื้อหาไปยัง PolyLingo รับเวอร์ชันแปลสำหรับทุกภาษา เขียนกลับไปยัง CMS ของคุณ สำหรับ Sanity นี่คือโค้ดไม่กี่บรรทัดใน server action สำหรับ Contentful คือ webhook handler สำหรับการตั้งค่าที่กำหนดเองคือการเรียก HTTP โมเดลการแปลเข้าใจรูปแบบเนื้อหาของคุณ — Markdown, HTML, JSON, rich text — และรักษาโครงสร้างไว้ตลอด
รูปแบบนี้สอดคล้องกันในทุก CMS: ดึงเนื้อหาในภาษาต้นทาง เรียก PolyLingo API พร้อมภาษาปลายทางทั้งหมด เขียนเนื้อหาที่แปลกลับไปยัง CMS ผ่าน API การจัดการ ทำงานเป็นสคริปต์เวลาสร้างงาน CI หรือ webhook handler — ตามที่เหมาะกับเวิร์กโฟลว์ของคุณ
PolyLingo รองรับ Markdown, HTML และข้อความธรรมดา จึงทำงานกับรูปแบบใดๆ ที่ CMS ของคุณใช้สำหรับเนื้อหารวย ฟิลด์ที่มีโครงสร้าง (หัวเรื่อง เนื้อหา ย่อหน้า) สามารถแปลแยกกันเพื่อให้คุณควบคุมได้อย่างละเอียดว่าฟิลด์ใดจะแปล
Sanity + PolyLingo
ปลั๊กอิน Document Internationalization ของ Sanity สร้างเอกสารเชื่อมโยงตาม locale สคริปต์ด้านล่างดึงเอกสารฐานภาษาอังกฤษและสร้างเวอร์ชันแปลสำหรับแต่ละภาษาปลายทางโดยอัตโนมัติ
ทำงานกับรูปแบบ i18n ระดับเอกสาร (เอกสารหนึ่งฉบับต่อ locale) และรูปแบบระดับฟิลด์ (ทุก locale ในเอกสารเดียว) สำหรับรูปแบบระดับฟิลด์ ให้วนลูปผ่านฟิลด์แทนเอกสาร
// 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 เก็บตัวแปร locale เป็นฟิลด์ในรายการเดียวกัน สคริปต์ด้านล่างใช้ Contentful Management API ดึงรายการภาษาอังกฤษ แปล และเขียนเนื้อหาที่แปลโดยตรงไปยังฟิลด์เฉพาะ locale — ไม่ต้องคัดลอกวางด้วยมือ
Contentful ใช้รหัส locale BCP 47 (เช่น es-ES แทน es) ให้แมปรหัส ISO 639-1 ของ PolyLingo กับการตั้งค่า locale ของ Contentful ตามนั้น
// 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) รองรับเนื้อหาฟิลด์เฉพาะ locale สคริปต์ด้านล่างดึงรายการคอลเลกชัน CMS แปลฟิลด์เนื้อหา HTML และเขียนการแปลกลับไปยังแต่ละตัวแปร locale ผ่าน Webflow v2 API
Webflow เก็บฟิลด์ rich text เป็น HTML การแปล HTML ของ PolyLingo รักษา markup ที่สร้างโดย Webflow ทั้งหมด — คลาสที่กำหนดเอง แอตทริบิวต์ และองค์ประกอบฝัง — ไว้โดยไม่ถูกแตะต้อง
// 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 เขียนกลับไปยัง locales ของเอกสาร
- ✓Contentful — แปลรายการโดยอัตโนมัติเมื่อ locale ภาษาอังกฤษถูกอัปเดต
- ✓Webflow — แปลรายการคอลเลกชัน CMS ผ่าน API
- ✓Headless CMS ใดๆ ที่มี API — รูปแบบการผสานรวมเหมือนกัน
- ✓รักษา rich text, Markdown และ HTML อย่างถูกต้อง
- ✓ทุก 36 ภาษาในคำขอเดียว — ไม่มีการเรียกต่อภาษา
- ✓ทำงานกับ CMS ใดๆ ที่มี API การจัดการ
- ✓เนื้อหาสามารถแปลซ้ำได้ทุกครั้งที่เผยแพร่ — ไม่มีการซิงค์ด้วยมือ
เวิร์กโฟลว์ CMS หลายภาษาแบบมาตรฐาน
เขียนเนื้อหาในภาษาต้นทางของคุณ
สร้างและเผยแพร่เนื้อหาเป็นภาษาอังกฤษ (หรือภาษาต้นทางของคุณ) CMS ของคุณเก็บเวอร์ชันนี้เป็นเวอร์ชันหลัก คุณไม่จำเป็นต้องเปลี่ยนเวิร์กโฟลว์การแก้ไขเลย
เรียกใช้สคริปต์แปล
เรียกใช้สคริปต์ด้วยมือ ตามกำหนดเวลา หรือผ่าน webhook ที่ทำงานเมื่อเนื้อหาถูกเผยแพร่ใน CMS สคริปต์เรียก PolyLingo ครั้งละเอกสารพร้อมภาษาปลายทางทั้งหมด จากนั้นเขียนการแปลทั้งหมดกลับไปยัง CMS ในครั้งเดียว
ปรับใช้ — เนื้อหาที่แปลแล้วพร้อมใช้งาน
ส่วนหน้าอ่านเนื้อหาเฉพาะ locale จาก CMS ตามปกติ ไม่ต้องเปลี่ยนโค้ดส่วนหน้า เนื้อหาที่แปลจะปรากฏในภาษาที่ถูกต้องสำหรับแต่ละเส้นทาง locale
สำหรับใครที่สร้างสิ่งนี้
ทีมเนื้อหาบน Sanity หรือ Contentful
บรรณาธิการของคุณเผยแพร่เป็นภาษาอังกฤษ เนื้อหาที่แปลจะปรากฏในทุก locale โดยอัตโนมัติ โดยไม่ต้องให้ทีมแก้ไขใช้เครื่องมือแปล
เอเจนซี่ที่สร้างเว็บไซต์หลายภาษา
ทุกเว็บไซต์ลูกค้าที่คุณสร้างต้องการการรองรับหลายภาษา PolyLingo มอบการผสานรวมที่ใช้ซ้ำได้และเรียกเก็บเงินได้ที่ทำงานกับ headless CMS ใดๆ ในสแต็กของคุณ
อีคอมเมิร์ซที่มีเนื้อหาผลิตภัณฑ์ท้องถิ่น
คำอธิบายสินค้า หน้าแคตตาล็อก และเนื้อหาบล็อก — ทั้งหมดแปลโดยอัตโนมัติเมื่อเผยแพร่ รวมกับราคาตาม locale เพื่อมอบประสบการณ์ช็อปปิ้งที่แปลท้องถิ่นอย่างสมบูรณ์
คำถามที่พบบ่อยเกี่ยวกับ 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 รองรับสถานะร่าง — คุณสามารถเขียนเนื้อหาที่แปลเป็นร่างแทนการเผยแพร่ เพื่อให้มนุษย์ตรวจสอบก่อนที่แต่ละ locale จะเผยแพร่ สคริปต์ตัวอย่างข้างต้นใช้การเผยแพร่/สร้างทันที; ปรับขั้นตอนสุดท้ายเพื่อสร้างร่างแทนสำหรับเวิร์กโฟลว์การตรวจสอบ
คู่มือที่เกี่ยวข้อง
เพิ่มหลายภาษาให้ headless CMS ของคุณวันนี้
ชั้นฟรี 50,000 โทเค็นต่อเดือน ไม่ต้องใช้บัตรเครดิต
เริ่มแปลฟรีชั้นฟรี — 50,000 โทเค็นต่อเดือน ใช้งานได้กับ CMS ใดๆ