如何在 Headless CMS 中管理多语言内容
在多语言网站上，如何良好地管理多语言内容是一个非常重要的问题。在 Headless CMS 中，特别是在使用 JavaScript 技术栈构建的网站中，其解决方案与传统 CMS 系统大不相同。本文将阐述如何在 Headless CMS 中管理多语言内容。
- 需求概述
在 Headless CMS 中，我们将内容管理和网站展示完全分开。在 Headless 架构中，内容提供商通常会向使用他们的商业开发人员公开 API。这个API将唯一可靠地呈现内容。另一方面，网站的前端人员编写客户端代码，然后使用这些内容来呈现视图。考虑到多语言网站的需求，需要注意以下几点：
- 内容创建人员需要在同一地方创建并维护多语言内容的翻译。
- 网站的前端人员需要获取这些内容的适当翻译。
- 如果翻译不存在，则需要至少有一种策略来处理默认语言。
- 应确保同时管理结果和错误消息的翻译。
- 多语言支持
Headless CMS 需要提供支持多语言的机制，以便翻译人员可以在同一页面上创建每种语言的内容。常见的方法是在项目中引入扩展，并在其中添加支持多语言的代码。本文中将使用 react-i18next 作为多语言扩展的示例代码。 react-i18next 是为 React 应用程序构建的一个方便的包，它在你的应用程序中添加多语言UI。它还具有自动检测用户语言首选项功能，因此可以很容易地实现多语言网站。
首先，安装 react-i18next：
yarn add react-i18next
接下来，创建一个新的目录“i18n”，在其中创建一个新的文件“index.js”：
-- -------------------- ---- -------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------
------ --------- ---- ------------
----
----------------------
-------
----------
---- -----
------------ -----
-------------- -
------------ ------
--
---
------ ------- -----安装完基本的 react-i18next，我们要在“i18n”目录的“locales”下放置语言包。首先创建一个“en.json”文件：
{
"welcome": "Welcome, {{name}}!"
}然后，创建一个“fr.json”文件：
{
"welcome": "Bienvenue, {{name}}!"
}这里的目录结构是：“i18n/locales/en.json”和“i18n/locales/fr.json”。
最后，在代码中引入 i18n。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ----------------
-------- ------------------ ---- -- -
----- - -- ---- - - -----------------
------ -
--
----------------- - ---- --------
--- ------ - ---
------- ----------- -- ---------------------------
-------
---------
------- ----------- -- ---------------------------
--------
---------
--- ------ - ---
------- ----------- -- --------------------------------- --- ---- - ---- - -------
-------------- --- ---- - ---------- - ----------
---------
---
--
-- 翻译内容获取
多语言支持只是前端中 Headless CMS 的一部分。如何获取内容以进行翻译是解决问题的关键。
在启动应用程序时，可以尝试在 localStorage 中存储用户的语言首选项。
// Set user's language
if (localStorage.getItem('i18nextLng') == null) {
localStorage.setItem('i18nextLng', navigator.language.slice(0, 2));
}此后，可以通过 API 获取翻译数据。
-- -------------------- ---- -------
----- -------- ---------------------------- -
----- --- - ----- ------------------------------------------------------------------
-- --------- -
----- ------------------
-
----- ---- - ----- -----------
------ -----
-在获取翻译数据后，可以使用 react-i18next 的“addResource”方法来添加对应的翻译数据。
-- -------------------- ---- -------
------ ---- ---- ---------
----- -------- ----------------- -
--- -
----- ------------ - ----- ---------------------------------------------------------
---------------------------------------------------------- -------------- ------------- ------
- ----- ------- -
---------------------
-
-
------------------- 翻译管理
为了让翻译人员可以在同一页面上创建和维护多语言翻译，可以使用“react-admin”作为 CMS 系统。它是一个免费和开源的框架，可以在 React 中创建管理基于 REST / GraphQL API 的应用程序。但是，它的语言和国际化功能是实验性质的。
接下来，我们需要定义一个自定义字段类型。
-- -------------------- ---- -------
------ ----- ------------ -------------------------------- - ------ - -- ------- -------- -- -- -
----- - - - - -----------------
------ -
---------- --------------- -----------
-----------------------
------------
--
--最后，在定义实体的序列化器时使用这个字段类型。
-- -------------------- ---- -------
----- --------------- - -------- --------- --
---------------- -- --
-------- -
----- ------
------------ ---
----- -----------
--
----
----- ---------------------- --------------------------------- - -
--------------------- ---------------------- -
------ ---------------- --------
--
----------------- ---- -
----- ----------- - - --- -------- ------------- ------------------ --
------ ------------------------------------------------------------- ------ -- -
----- --------- - ----------------------
------ -
--------------
------------ -
------ ---------------- ---------- ----
------------ --------------------------------------------------------
--
--
-- ----
--
--
------ ------- ----------------------这使得翻译管理工作人员可以更快地创建多语言翻译。
结论
在 Headless CMS 中管理多语言内容的技术可以通过 react-i18next 实现。此外，使用 CMS 框架 react-admin 还可以大大简化翻译人员的工作。使用 Headless CMS 构建多语言站点时，应始终考虑最终用户的语言选择。
以上是本文的全部内容。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f170686fbf9601973b41f8