如何用Strapi打造多语言内容站：i18n国际化功能从配置到发布的完整教程
如何用Strapi打造多语言内容站i18n国际化功能从配置到发布的完整教程【免费下载链接】strapi Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.项目地址: https://gitcode.com/GitHub_Trending/st/strapiStrapi 是一款领先的开源无头 CMSheadless CMS完全基于 JavaScript/TypeScript 构建。它内置的i18n 国际化插件让你在几分钟内为网站、博客或电商内容站添加多语言支持创建语言环境Locale、逐字段翻译内容、按语言调用 API 并发布上线。本教程面向新手按配置 → 翻译 → 获取 → 发布四步走通全流程无需安装额外插件。一、为什么选 Strapi 做多语言内容站很多新手做国际化时会被翻译表语言切换表数据库迁移等概念劝退。Strapi 的 i18n 插件把这件事做成了可视化操作开箱即用i18n 插件随 Strapi 预装启用内容类型的国际化即可无需写代码见 packages/plugins/i18n/README.md字段级控制可以对每个字段单独决定是否翻译——标题、正文按语言分开而 SKU、库存状态等字段全局共享一键填充从已有语言复制内容到新语言再逐字修改API 天然支持语言前端通过locale参数即可拿到对应语言的数据内置 AI 翻译任务新版本支持发起 AI 本地化任务加速批量翻译二、快速上手i18n 插件开箱即用i18n 插件是 Strapi 的核心必备插件安装 Strapi 时自动就绪源码位于 packages/plugins/i18n/。它包含三个部分模块说明参考文件后台管理Admin语言环境管理界面、内容翻译入口admin/src/服务端Server语言环境 API、设置、AI 翻译任务server/src/共享契约Shared前后端共用的数据结构定义shared/contracts/locales.ts 提示Strapi 内置了完整的ISO 639 语言代码清单如fr法语、ja日语、zh-Hans简体中文创建语言时无需记忆代码见 server/src/constants/iso-locales.json。三、第一步创建语言环境Locale所有多语言操作都在后台的Settings → Internationalization国际化管理页面完成对应源码是 admin/src/pages/SettingsPage.tsx。操作路径很简单登录后台进入国际化管理设置页在页面顶部的**默认语言Default Locale**下拉框中选择站点的主语言如 English点击创建语言环境从 ISO 语言列表中选择目标语言如中文简体、法语填入展示名称保存后立即生效——内容编辑界面会多出一个语言切换器后台管理端对应的接口包括列出语言GET /locales、创建POST /locales、更新PUT /locales/:id与删除DELETE /locales/:id定义在 server/src/routes/admin.ts每一步都带有独立的权限控制plugin::i18n.locale.*方便团队按角色分工。四、第二步让内容类型支持国际化光有语言还不够需要告诉 Strapi哪些内容类型要翻译、哪些字段要翻译。在内容类型构建器Content-Types Builder中把目标内容类型例如article文章、product产品的国际化开关打开然后逐字段设置pluginOptions.i18n.localizedlocalized: true→ 每个语言有独立值标题、正文、SEO 描述、组件字段都建议翻译localized: false→ 所有语言共享同一个值如 SKU 编号、价格、上下架状态官方模板中就有一个很好的参考Product内容类型的name、slug、description全部标记为可翻译而isAvailable、images、sku标记为不翻译完整示例见 docs/docs/guides/e2e/01-app-template.md。⚠️ 新手避坑修改是否翻译属于结构变更只对新内容生效。已有数据请谨慎操作并先备份数据库。五、第三步创建与翻译内容进入内容管理列表后你就能看到语言相关的操作入口语言切换器Locale Picker编辑某篇文章时切换到法语版直接编辑互不影响从语言填充Fill from Locale新建某语言版本时可一键把默认语言的内容复制过来再逐字修改——对应服务端逻辑 server/src/services/fill-from-locale.ts是翻译团队最常用的功能批量操作Bulk Locale Actions列表页可批量创建多语言版本、批量删除语言源码见 admin/src/components/BulkLocaleActionModal.tsx六、第四步通过 API 获取指定语言内容这是无头 CMS 最大的价值所在。前端只需用locale查询参数即可拿到对应语言的数据查询中文文章GET /api/articles?localezh查询法语单篇文章GET /api/articles/12?localefr获取站点当前支持的语言列表GET /api/locales内容 API 路由见 server/src/routes/content-api.ts默认语言由后台设置决定当请求不携带locale参数时Strapi 会返回默认语言的内容保证 SEO 和兜底展示不出错。七、进阶玩法AI 自动翻译与团队协作新版本 Strapi 的 i18n 插件内置了AI 本地化任务对某篇文章发起翻译任务后系统会调用 AI 服务生成目标语言草稿你只需校对修改即可适合内容量大、语言多的站点。相关实现任务服务server/src/services/ai-localizations.ts任务轮询接口按内容类型查询任务状态server/src/routes/admin.ts前端轮询 Hookadmin/src/hooks/useAILocalizationJobsPolling.ts团队协作则依靠权限系统i18n 插件为语言环境的读、创建、更新、删除分别定义了独立权限动作见 server/src/services/permissions/你可以只给编辑开放翻译内容权限把语言结构的增删留给管理员。八、发布与上线检查清单 ✅内容翻译完成后建议按清单逐项确认再发布✅ 默认语言已设置为面向 SEO 的主语言✅ 每个内容类型的是否翻译字段设置符合业务共享字段不要误开✅ 所有语言版本均已发布Published未发布的草稿不会出现在 API 中✅ 前端已实现语言切换逻辑根据 URL如/zh/、/fr/携带locale参数请求 API✅ 检查sitemap.xml中的hreflang标签让搜索引擎正确识别多语言页面✅ 如需定时统一上线可结合内容发布计划功能批量排期九、常见问题 FAQQi18n 插件需要单独安装吗不需要。它是 Strapi 预装且必备的核心插件在 packages/plugins/i18n/README.md 中明确说明 pre-installed required。Q支持多少种语言语言列表基于 ISO 639 标准内置数百种语言代码含zh-Hans简体中文、ja日语等在 server/src/constants/iso-locales.json 中可以查到完整清单。Q媒体图片能按语言区分吗可以。把媒体字段设为localized: true后每种语言可以上传不同的配图如中文版配中文海报设为false则全语言共用。Q改了字段翻译设置旧数据怎么办字段级设置主要影响后续编辑与 API 输出结构历史数据建议先导出备份再调整必要时用数据迁移工具处理。从创建语言环境到按语言发布内容Strapi 的 i18n 插件把多语言网站最繁琐的部分变成了后台点选操作。按照本教程的四步流程创建语言 → 开启字段翻译 → 从语言填充并翻译 → API 按 locale 获取你今天下午就能上线一个中英双语的内容站。【免费下载链接】strapi Strapi is the leading open-source headless CMS. It’s 100% JavaScript/TypeScript, fully customizable, and developer-first.项目地址: https://gitcode.com/GitHub_Trending/st/strapi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考