前端技术：利用 Headless CMS 快速构建多语言站点

面试官：小伙子，你的代码为什么这么丝滑？

随着互联网的发展，越来越多的企业需要在全球范围内经营业务，因此多语言站点变得越来越重要。然而，构建一个高质量且易于管理的多语言站点并不容易，需要考虑实现的复杂性和更新内容的成本。本文将探讨如何利用 Headless CMS（无头内容管理系统）快速构建多语言站点，其中涵盖了深度的学习和指导意义，并提供了示例代码。

什么是 Headless CMS

传统的 CMS 在设计上具有内置的前端，即传统的网站将所有内容和页面都存储在一个系统中。与之相反，Headless CMS（无头内容管理系统）将内容管理和前端设计分离，意味着 CMS 负责存储和管理原始内容，而前端工程师要设计和构建与 CMS 交互的用户界面。

Headless CMS 的主要优点包括内容管理的灵活性和多语言站点的支持。Headless CMS 不提供内置的前端，因此开发人员可以在其代码库中自由地设计和构建前端。此外，Headless CMS 实现多语言站点也十分简单，每种语言一组字符串存储在 CMS 数据库中，接着可查看并读取这些字符串并在任何语言的前端中渲染出来。

如何创建一个多语言站点

以下基于 WordPress 将介绍 Headless CMS 的创建步骤，同时我们将以 React 为例构建前端。

步骤一：建立 WordPress 网站

在此我们使用 WordPress 作为本次项目的 Headless CMS。若您已有现成 WordPress 网站，则可直接进行下一步。如果您尚未完成创建，请在虚拟机或 Web 服务器上建立 WordPress 网站。

步骤二：安装 WordPress 插件

WordPress 插件是用于添加额外功能的软件，可将多语言支持添加到您的 WordPress 网站。在此我们推荐 WPML 插件，它是一个非常流行且功能强大的多语言插件。可以从 https://wpml.org 下载并安装。

平常使用本地调试的话，可以在 http://exmple.wordpress.test/ 地址中安装插件并生成多个语言的内容，如下

步骤三：创建 React 应用程序

为了连接 Headless CMS 和前端，需要在 React 中创建应用程序。你可以按照自己的喜好使用 Create React App 或其他框架。项目文件夹创建完成后，必须将下列功能包添加到项目中以使 React 更加有用。

--- ------- ----- ------- -------------------------------- -------------------- -------------

步骤四：配置项目环境

在接下来的过程中，我们需要使用 WPML 处理多语言站点的翻译。同时必须引入 i18next 库，以便在 React 中跨各种语言使用字符串。我们可以在根目录下创建配置文件与 WordPress 的 API 发起请求：

---------
------ ---- ---- ----------
------ - ---------------- - ---- ----------------

------ ------- ---- -----------------------
------ ---------------- ---- -----------------------------------

----
  -------------
  ----------------------
  ----------------------
  -------
    -------------- ------ ----- ------
    ------------ -----
    ------ -----
    ---------- -
      ------ --------------- ----------
      ------ -----------
    --
    -------- -
      --------- ---------------------------------------------------------------------
    --
  ---

------ ------- -----
-----------
----- ------- - -------------------
----- ---- - ----------------
----- ----- - -----------------
----- ----------------- - --------------------------------------
----- ------- - ----------------------


----- --- - ----------

----------------------------------------- -
  ------------- ---------
----

------------------------------------------- -----------

-------------------- ----- ----- ---- -- -
  ----- - --- - - -------------
  ----- - ----- ---- - - ----- -------------------------------------------------------------------------------------
  ----- - ----- ---- - - ----- ------------------------------------------------------------------------------------------
  ----- - ----- ----- - - ----- ---------------------------------------------------------------
  ----- - ----- ------------ - - ----- -------------------------------------------------------------------------------
  ---------- ----- ----- ------ ------------ ---
---

----------------- ----- ---- -- -
  ---------------------- ------ ---- ------ ---
---

------------ ----- ---- -- -
  --------------------------------- ---------------------
---

---------------------- -- -----------------
-----------------

步骤五：使用 i18next 和 WPML 创建多语言站点

在创建 React 应用程序时，我们需要使用 i18next 和 WPML 从 Headless CMS 中获取多语言站点数据。 WPML 必须配置以支持所有站点语言，并在获取时使用 i18next。

------------
------ ------ - --------- - ---- --------
------ - -------------- - ---- ----------------
------ ----- ---- --------
------ ------ ---- --------------------

------ ---- ---- ---------

----- ----- - ------------------ -- --
  -------------- --------
------

----- ----------- - ----------------- -- --
  -------------- --------------
------

----- ---------- - -----------
  -------- -----

  - -
    ------------- -----
  -
--

-------- ----- -
  ----- - ---- - - -----------------

  ------------ -- -
    ----------------------------------------------- ----
  -- --------

  ------------ -- -
    ----- --------- - ----- -- -- -
      ----- - ---- - - ----- -----------------------
      ----- - ----- ----- ------ ------------ - - -----
      ------------------
        -------------
        --------------
        ------------------------------
      --
      ----------------------------------
      ----------------- ----------- ----------------
      ------------------- ------
      ------------------- ------
      -------------------- -------
    --
    ------------
  -- --------

  ------ -
    -----
      ------------
        -- -----------------
        -- --------------------
        -- --------------------
      -------------

      ---------------------------
      ---------------------------------------------
    ------
  --
-

------ ------- ----

步骤六：实现语言切换

现在已经实现了多语言站点，并使用 WPML 插件在 WordPress 中配置了所需的语言。因此，可以将其他语言添加到 CMS 并在 React 前端中进行调用。 但是，我们还需要使用户能够轻松地随时更改当前站点的语言。 这可以通过 i18next-react-languagedetector 库轻松实现。

以下例子中，我将创建一个允许用户切换语言并将新语言应用于当前页面的组件。首先，需要使用 useTranslation 钩子获取当前语言和翻译函数。

------------
------ - -------------- - ---- ----------------
------ ---------------- ---- -----------------------------------

-------- ----- -
  ----- - -- ---- - - -----------------

  ------ -
    -----
      -------
        ----------- -- -----------------------------
      -----------------------------

      -------
        ----------- -- -----------------------------
      -----------------------------

      -------
        ----------- -- -----------------------------
      -----------------------------
    ------
  --
-

------ ------- ----

结论

本文提供了一个从头开始构建多语言站点的指南，重点介绍了利用 Headless CMS 的优势和 WPML 实现语言翻译的过程。同时我们还提供了示例代码以方便读者更好的理解它们的实际应用。总之，Headless CMS 构建多语言站点的方法可以简单有效地解决很多问题，让您节省时间从而可以更专注于前端设计。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/670be0c866ef9cf37facd1e9

阅读全文

猜你喜欢

  • 如何使用响应式设计和 JavaScript 创建电子邮件订阅表单

    前言 在当前数字时代，电子邮件已经成为联系客户，市场营销，推广、提高转化率以及与客户保持联系的一个重要手段。在网站或应用中添加电子邮件订阅表单是很有必要的。但是如何设计和实现一个好看且能够适应不同设备...

    4 天前
  • 解决 Angular 应用中使用 HttpClient 遇到的常见问题

    Angular 是一个流行的前端框架，提供了强大和灵活的功能，其中的 HttpClient 是一个用于向服务器发送请求和处理响应的重要组件。在实际开发中，有时候会遇到一些与 HttpClient 相关...

    4 天前
  • 使用 Headless CMS 构建在线投票和问答系统的技术实践

    在前端开发中，我们经常需要构建各种不同类型的网站，其中，投票和问答系统是比较常见的两种类型。然而，在构建这些系统时，我们往往需要处理大量的数据，并需要使用到后端技术。

    4 天前
  • 解决在使用 ECMAScript 2015 时的缺陷和局限性

    ECMAScript 2015，也称为 ES6，是 JavaScript 最新的标准版本之一。它包含了许多新特性和语法，为开发者带来了很多便利。然而，与其它开发语言相比，ES6 仍然存在一些缺陷和局限...

    4 天前
  • 如何在 LESS 中定义链接样式

    在前端开发中，链接是不可避免的元素，样式设计也显得尤为重要。LESS 是一种 CSS 预处理器，可以通过变量、函数、嵌套等方式让样式表更加灵活和易于维护。本文将介绍如何在 LESS 中定义链接样式，以...

    4 天前
  • ES9：Function.name 属性的行为变化

    在 ES6 中，JavaScript 提供了 Function.name 属性来获取函数名，这个属性很简单：它返回该函数的名称。然而，在 ES9 中，这个属性的行为出现了变化，现在它会在某些情况下返回...

    4 天前
  • 如何在 Deno 中实现 JWT 认证

    什么是 JWT？ JWT (JSON Web Token) 是一种加密的令牌，它由三部分组成：header、payload 和 signature。 其中 header 和 payload 都是基于 ...

    4 天前
  • 在Vue.js中如何进行SEO优化？

    Vue.js是目前最流行的JavaScript框架之一。尽管Vue.js极大地简化了前端开发，但如果您没有正确地进行SEO优化，搜索引擎就会难以将您的站点标记为相关、有价值的网页。

    4 天前
  • 前端中的无障碍体验

    互联网是一个充满机会和无限可能的世界。然而，即使在数字时代，残障人士也面临着许多障碍，这些障碍可能使他们在网上浏览或使用软件时感到困难。在这篇文章中，我们将介绍如何为无障碍体验做出贡献，特别是如何在前...

    4 天前
  • 在 React 中遇到的常见 Webpack 错误及其解决方案

    React 是目前最受欢迎的前端框架之一，而 Webpack 则是开发 React 应用时必不可少的工具。然而，很多初学者在使用 Webpack 时会遇到各种问题，本文将整理出一些常见的 Webpac...

    4 天前
  • Jest 使用过程中遇到的 TypeScript 相关问题解决方案

    Jest 是一款流行的 JavaScript 测试框架，它提供了强大的测试工具和丰富的 API，可以帮助我们快速写出高质量的测试用例。但是当我们在使用 Jest 进行 TypeScript 代码的测试...

    4 天前
  • 使用 Material Design 实现自定义字体

    Material Design 是由 Google 推出的一种全新的设计风格，它以平面化、简约化和卡片化为核心特点，体现出现代化的设计理念和风格。自 Material Design 推出以来，它已经被...

    4 天前
  • Hadoop 优化 —— 提高分布式数据处理的效率

    在大数据处理中，Hadoop 是一个非常优秀的分布式数据处理框架。由于它的伸缩性，在处理大规模数据时非常受欢迎。然而，在处理海量数据时，数据处理的速度往往会受到限制。

    4 天前
  • 统一线上代码质量：使用 ESLint

    前言 随着前端开发的快速发展，代码规范一直是我们所关注的焦点之一，特别是在协同开发及多人协作的情况下，统一代码规范不仅能提高代码可读性和稳定性，更增强了代码的可维护性，使团队协作更加高效。

    4 天前
  • 如何将 Hapi 作为你的 Node.js Web 框架

    如果你在 Node.js 中使用 Web 框架，那么你一定听说过 Express，这是 Node.js 中最广泛使用的框架之一。但是，还有另一个框架，它被称为“企业级 Node.js 框架”，它就是 ...

    4 天前
  • 在 ECMAScript 2020（ES11）中使用 Promise.allSettled 处理所有异步操作的技巧

    在 ECMAScript 2020（ES11）中，Promise.allSettled 方法被正式引入，它可以同时处理多个异步操作，让我们更加方便地进行错误处理和结果检查。

    4 天前
  • 如何在 angular 项目中使用 Tailwind CSS

    Tailwind CSS 是一种流行的 CSS 框架，它通过预定义的类名使得 CSS 样式的编写变得更加简单和高效。在 Angular 项目中使用 Tailwind CSS 可以加速前端开发的进程，并...

    4 天前
  • 了解 ES9 并行迭代器

    在 JavaScript 中，迭代器是一种对象，它提供了一种遍历集合元素的方法。ES6 引入了 for...of 循环语句，它可以遍历迭代器生成的序列。ES9 引入了并行迭代器，它允许多个迭代器共同...

    4 天前
  • 如何处理 MongoDB 中的索引问题

    在 MongoDB 中，索引是一种非常重要的概念，它可以大大提高查询效率，降低系统的压力。因此，良好的索引设计和使用是任何一个 MongoDB 数据库的基础。 但是，在实际使用过程中，我们也会遇到一些...

    4 天前
  • SASS 中 import 的动态编译控制方法介绍

    背景 由于前端项目在构建时需要经过多个方面的处理，其中一项就是对 SASS 代码的编译。然而，在实际的开发中，我们往往需要根据不同的场景来控制 SASS 代码的编译方式。

    4 天前

相关推荐

    暂无文章