用Hugo和Strapi建立一个本地化的网站的详细教程将你的网站本地化可以在几个方面使你的企业或组织受益。通过翻译你的内

将你的网站本地化可以在几个方面使你的企业或组织受益。通过翻译你的内容或网站，你扩大了你的目标市场。使你的产品适应那些以前无法使用你的产品的潜在客户的语言和文化偏好，可以提高你的转换率。

最终，这往往会导致你的收入增长。有了更大、更广泛的客户群，你的品牌在更新的市场中变得越来越有辨识度，并得到加强。

一个本地化的网站有一个更高的搜索引擎得分，这意味着特定市场的用户可以通过搜索引擎更容易地找到它。一个可识别的品牌和改进的SEO得分可以减少对你目标市场内的用户的营销成本。

我们已经看到，本地化有其好处，但它究竟是什么？本地化是修改你的网站、应用程序或最初用于主要市场的内容的过程，以适应你计划瞄准的新市场的需要。本地化通常涉及将产品翻译成你想引入的市场所使用的语言。它也可能意味着增加新的东西或删除产品的部分，例如，可能冒犯市场的部分。你也可以根据书写系统、颜色偏好等，通过改变产品的外观和感觉来修改产品。

虽然本地化看起来很简单，但如果底层网站或应用程序不能适应这些变化，就无法实现。由于为你想进入的每个市场建立相同的网站是不现实的，所以你的网站应该在不同的市场之间转换内容、语言、用户界面元素等。这就是国际化的意义所在。

国际化是设计和建设一个网站或应用程序的过程，以适应不同市场的本地化。例如，一本在线杂志在葡萄牙、日本和爱尔兰出版的网站需要适应不同的语言、书写系统、支付处理器等。

在着手进行本地化之前，挑选一个能帮助你在不同地区管理网站内容的后端是很重要的。Strapi是一个提供这种功能的选择。它是一个用Node.js构建的开源无头内容管理系统（CMS）。有了它，你可以在其用户友好的管理面板上使用其内容类型生成器来管理和构造内容类型。对于你创建的每一个内容类型，它都会自动为其生成一个可定制的API。你可以上传所有种类的媒体，并使用其媒体库管理它们。

利用其基于角色的 访问控制（RBAC）功能，你可以为内容创建者、营销人员、本地化人员和翻译人员设置自定义角色和权限。这一点特别有用，因为一个团队中的不同人应该只负责他们所管理的地区的内容。在本教程中，你将了解其国际化功能，允许你管理不同语言和地域的内容。

你的前端也需要处理不同语言的内容，并充分有效地将其呈现给多个地区。在这方面，雨果是一个了不起的选择。它是一个用Go构建的静态网站生成器。它获取你的数据和内容并将其应用于模板。然后，它将它们转换为静态页面，这样可以更快地提供给你的网站访问者。

雨果建立网站的速度相当快，平均在一秒钟或更短时间内完成网站的建立。它支持多种内容类型，实现主题集成，精心组织你的内容，允许你以多种语言建立网站，并以markdown编写内容。它还支持谷歌分析、Discuz的评论、代码高亮和RSS。静态网站速度更快，有很好的SEO评分，有更好的安全性，而且成本更低，制作起来也不复杂。

不多说了，让我们直接开始吧

前提条件

在你继续学习本教程之前，你将需要有：

安装Hugo。
你可以通过预建的二进制文件来获得它，这些文件可用于macOS、Windows、Linux和其他操作系统。你也可以从命令行中安装它。雨果网站上有这些安装指南，解释如何通过这种方式获得它。本教程是使用v0.68编写的。
安装了Node.js。
Strapi至少需要Node.js 12或更高版本，但建议使用Node.js 14。不要安装高于14的版本，因为Strapi可能不支持它。Node.js下载页面在其网站上提供了适用于各种操作系统的预建安装程序。

一个实例网站

为了说明本地化如何使用Strapi和Hugo，你将为一个在加拿大、墨西哥和美国使用的产品建立一个文档网站。在这些地区使用最多的三种语言是英语、法语和西班牙语。因此，这个网站上的文档需要用它们中的每一种来显示。该网站将有三个页面：一个主页，一个关于页面，一个条款页面。

Strapi CMS提供了一个平台，可以用这三种语言为这些页面创建内容。之后，它将通过其API为创建的内容提供markdown版本。雨果网站将消费这些内容，并根据用户选择的语言来显示这些内容。

第1步：设置Strapi应用程序

在这一步，你将安装Strapi应用程序，并在其管理面板上设置一个管理员账户。该应用程序将被称为docs-server 。首先，在你的终端上，将目录切换到你希望Strapi应用程序所在的位置并运行。

npx create-strapi-app@3.6.8 docs-server

当出现提示时：

选择Quickstart 作为安装类型。
当被要求使用一个模板时，选择No 。

? Choose your installation type Quickstart (recommended)
? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) No

这个命令将创建一个Strapi快速启动项目，安装它所需要的依赖项，并运行该应用程序。它将在 http://localhost:1337.要注册一个管理员，请到 http://localhost:1337/admin/auth/register-admin.你应该看到下面的页面：

输入你的名字和姓氏、电子邮件和密码。一旦你完成了注册，你将被重定向到管理面板。下面是它的样子：

在管理面板上，你可以创建内容类型，添加内容条目，并管理Strapi应用程序的设置。在这一步中，你生成了Strapi应用程序并设置了一个管理员账户。在下一个中，你将为三个页面中的每一个创建内容类型。

第2步：创建内容类型

在这一步中，你将为三个页面中的每一个创建内容类型。Strapi上的内容类型，顾名思义，是一种内容类型。Strapi支持两类内容类型：集合类型和单一类型。集合类型是针对那些采取单一结构、有多个条目的内容。

例如，一个博客文章集合类型收集了多个博客文章。单一类型适用于具有唯一性且只有一个条目的内容。例如，一个关于内容的类型，为一个关于页面的内容建模，是一个单一的类型，因为一个网站通常只有一个关于页面。

为了生成这些类型，你将使用Strapi CLI。如果你愿意，你可以选择使用现有的Strapi管理面板来创建这些类型。然而，Strapi CLI的速度更快，涉及的步骤更少。

如果Strapi正在运行，请停止它。运行本步骤中的命令将导致错误，使应用程序崩溃。一旦你完成了这一步，你可以在docs-server 目录内的终端上用下面的命令再次运行它。

npm run develop

由于你将有三个独立的页面，你将创建三种不同的单一类型。这些将是home,about, 和terms 类型。每个类型都将有一个内容和标题属性。这两个属性只是一个起点。如果你想添加更多的属性或进一步定制它们，你可以在以后修改这些类型。要创建它们，请在你的终端在docs-server 目录中运行这个命令：

for page in home about terms; do npm run strapi generate:api $page title:string content:richtext ;done

运行上述命令将生成带有title 和content 属性的home 、about 和terms 内容类型。它还会为每个页面类型生成API。这些API是在api/ 文件夹中生成的。下面是这个文件夹现在的样子：

api
├── about
│   ├── config
│   │   └── routes.json
│   ├── controllers
│   │   └── about.js
│   ├── models
│   │   ├── about.js
│   │   └── about.settings.json
│   └── services
│       └── about.js
├── home
│   ├── config
│   │   └── routes.json
│   ├── controllers
│   │   └── home.js
│   ├── models
│   │   ├── home.js
│   │   └── home.settings.json
│   └── services
│       └── home.js
└── terms
    ├── config
    │   └── routes.json
    ├── controllers
    │   └── terms.js
    ├── models
    │   ├── terms.js
    │   └── terms.settings.json
    └── services
        └── terms.js

每个内容类型都有模型、服务、控制器和为它们创建的配置。同时还添加了一些API路由，以创建、修改和检索针对这些类型的内容模型。

在api/about/models/about.settings.json 文件中，你将把about 内容类型的种类从集合类型改为singleType 。你还将为它和它的属性添加一个描述并启用本地化功能。用下面的代码替换。

{
  "kind": "singleType",
  "collectionName": "about",
  "info": {
    "name": "about",
    "description": "The about page content"
  },
  "options": {
    "increments": true,
    "timestamps": true,
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "string"
    },
    "content": {
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      },
      "type": "richtext"
    }
  }
}

在这个文件中，你正在为内容类型添加你在通过CLI生成它们时无法指定的细节。类型属性从集合类型变为singleType 。使用pluginOptions 属性启用了本地化功能。通过在i18n 国际化属性下将localized 设置为true ，对该类型以及指定相同属性的属性启用了本地化。

接下来，你将修改它的API路由，使其只具有更新、删除和检索内容的路由。当你使用CLI创建一个内容类型时，它默认是一个集合类型。一个集合类型有五个路由：寻找、寻找一个、计数、删除、更新和发布的路由。单一类型不需要计数、发布和查找一的路由，因为只有一个条目。所以你将删除这些。用这段代码替换api/about/config/routes.json 的内容。

{
  "routes": [
    {
      "method": "GET",
      "path": "/about",
      "handler": "about.find",
      "config": {
        "policies": []
      }
    },
    {
      "method": "PUT",
      "path": "/about",
      "handler": "about.update",
      "config": {
        "policies": []
      }
    },
    {
      "method": "DELETE",
      "path": "/about",
      "handler": "about.delete",
      "config": {
        "policies": []
      }
    }
  ]
}

由于其他内容类型共享相同的属性，你将对其他每个类型的模型设置做类似的修改。本教程中的内容类型共享相同的属性，以达到演示的目的，但你可以根据你创建的页面的需要来修改它们。在api/privacy/models/home.settings.json 文件中，将代码改为：

{
  "kind": "singleType",
  "collectionName": "home",
  "info": {
    "name": "Home",
    "description": "The home page content"
  },
  "options": {
    "increments": true,
    "timestamps": true,
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "type": "string",
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "content": {
      "type": "richtext",
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    }
  }
}

与about API路由类似，你将删除home内容类型的find-one、count和post路由，因为它是一个单一类型。用这段代码替换api/home/config/routes.json 文件中的内容：

{
  "routes": [
    {
      "method": "GET",
      "path": "/home",
      "handler": "home.find",
      "config": {
        "policies": []
      }
    },
    {
      "method": "PUT",
      "path": "/home",
      "handler": "home.update",
      "config": {
        "policies": []
      }
    },
    {
      "method": "DELETE",
      "path": "/home",
      "handler": "home.delete",
      "config": {
        "policies": []
      }
    }
  ]
}

最后，在api/terms/models/terms.settings.json 文件中，将现有代码替换为：

{
  "kind": "singleType",
  "collectionName": "terms",
  "info": {
    "name": "Terms",
    "description": "The terms content"
  },
  "options": {
    "increments": true,
    "timestamps": true,
    "draftAndPublish": true
  },
  "pluginOptions": {
    "i18n": {
      "localized": true
    }
  },
  "attributes": {
    "title": {
      "type": "string",
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "content": {
      "type": "richtext",
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    }
  }
}

要删除条款内容类型不必要的find-one、count和post API路由，请将api/terms/config/routes.json 的内容改为这样：

{
  "routes": [
    {
      "method": "GET",
      "path": "/terms",
      "handler": "terms.find",
      "config": {
        "policies": []
      }
    },
    {
      "method": "PUT",
      "path": "/terms",
      "handler": "terms.update",
      "config": {
        "policies": []
      }
    },
    {
      "method": "DELETE",
      "path": "/terms",
      "handler": "terms.delete",
      "config": {
        "policies": []
      }
    }
  ]
}

现在你已经为所有三个页面设置了内容类型。在下一步中，你将为你的内容所针对的市场添加地域性。

第3步：添加地区语言

在这一步中，你将添加你想支持的不同地区。正如例子中所解释的，你将添加英语（美国）（en-US）、法语（加拿大）（fr-CA）和西班牙语（墨西哥）（es-MX）。请确保用npm run develop 来运行Strapi，然后进入国际化设置，在 "设置"和 "全局设置"下，通过点击蓝色的 "添加区域 "按钮来添加这些区域。

在弹出的窗口中，选择一个地区，然后点击添加地区。你应该添加下表中所列的三种语言。它们都可以在 "语言"下拉菜单中找到。

地区名称	本地显示名称
en-US	英语(美国)
es-MX	西班牙语(墨西哥)
fr-Ca	法语(加拿大)

在添加这些语言时，请在 "添加语言"的 "高级设置"下，将其中一种语言设置为默认语言。这使得第一次添加内容时更加容易。如果你不这样做，第一个条目将总是默认为en语言。如果你不需要en语言，最好在设置替代的默认语言后将其删除。

在这一步中，你在你的Strapi应用程序上添加了locales。这些将在你添加内容时使用。在接下来的步骤中，你将为每个页面添加占位符内容。

第4步：向Strapi应用程序添加内容

在这一步中，你将为三个页面中的每一个添加内容到Strapi应用程序。你将使用管理面板上的内容管理器来完成这项工作。以下是管理面板上每种类型的内容输入表格的链接。

下面是内容输入表格的样子：

添加一个标题和一些内容。在添加内容时，一定要检查地区语言。确保内容的语言与地区语言相匹配。

一旦你完成了，点击亮绿色的保存按钮，然后点击条目表格右上方的发布按钮。当你想为一个地区添加新的内容时，从表格右边的国际化部分的地区下拉菜单中选择它。记住要保存并发布新内容。

下面是你要为每个页面添加的内容，用于title 领域。

英语（美国）(en-US)	法语（加拿大）(fr-CA)	西班牙语（墨西哥）(ex-MX)
关于	关于	关于
首页	首页	宾馆
术语	条件	条件

对于内容，你可以在所有页面上使用这个lorem ipsum文本。你可以为国家添加一个国旗表情符号，以识别地区的变化。这是一个占位符内容，仅用于演示目的。

英语（美国）(en-US)	# 🇺🇸 Lorem ipsum dolor sit amet, consectetur adipiscing elit.在这里，我们可以看到，在我们的生活中，有很多人都在为我们的生活而努力，有很多人都在为我们的生活而奋斗。在这里，我们可以看到，我们在这里找到了一个新的机会。前庭的尽头，坐着的是一棵大树，树干上有一个小洞，洞里有一个小洞，小洞里有一个大洞。
法语（加拿大）(fr-CA)	#🇨🇦 Lorem ipsum dolor sit amet, consectetur adipiscing elit.在这里，我想说的是，在这里，我们可以看到，在这里，我们可以看到，在这里，我们可以看到，在这里，我们可以看到，在这里，我们可以看到，在这里，我们可以看到，在这里，我们可以看到在这里，我们可以看到，我们在这里找到了一个新的机会。前庭的尽头，坐着的是一棵大树，树干上有一个小洞，小洞里有一棵树，小洞里有一棵树。
西班牙语（墨西哥）(ex-MX)	# 🇲🇽 Lorem ipsum dolor sit amet, consectetur adipiscing elit.在这一点上，我们可以说是 "不可能"。在这里，我们可以看到，我们在这里找到了一个新的机会。Vestibulum finibus, lectus sit amet sagittis euismod, arcu eros tincidunt augue, non lobortis tortor turpis non elit.

在这一步中，你为不同的地区添加了多种语言的占位符内容。在下一步，你将使内容类型的API路由公开。

第5步：公开API路线

在这一步，你将使返回页面内容的路由公开。这些是/home,/about, 和/terms 的GET路由。目前，如果你试图访问它们，你会得到一个403 Forbidden的错误。这是因为设置的权限不允许公开访问它们。你要改变这一点，使它们可以公开访问。

要做到这一点：

使用这个链接到 用户和权限插件下的公共角色设置。
在应用程序设置中，在权限下，选择查找主页、关于和条款的复选框。
点击页面右上方绿色的 "保存 "按钮。

这是一张截图，说明在公共角色设置页面的应用程序权限部分要选择哪些复选框。

现在的路线在 http://localhost:1337/home, http://localhost:1337/about，和 http://localhost:1337/terms都是可以访问的。它们返回你在上一步中为页面输入的内容。要在获取内容时指定一个地区，请使用_locale 查询参数，并为其指定地区。例如。 http://localhost:1337/home?_locale=fr-CA将返回加拿大法语区的主页。如果你不指定一个地区，将返回默认地区的内容。

在这一步中，你使返回内容的路由公开。在下一步中，你将生成一个Hugo站点，它将消费本地化的内容。

第6步：生成一个新的雨果网站

将显示本地化内容的Hugo站点将被称为docs-app 。要生成它，请在你的终端上，在docs-server 项目之外的一个单独目录中运行以下命令。

hugo new site docs-app

运行这个命令将生成一个新的Hugo站点。它将用包含网站输入的不同文件夹来搭建网站的脚手架。Hugo将使用这些输入并生成一个完整的网站。然而，没有添加任何主题或内容。你将不得不添加内容和主题。内容将来自Strapi应用程序。你可以通过运行查看新网站。

cd docs-app && hugo server

该应用程序的服务地址是 http://localhost:1313/.然而，由于还没有内容，该应用程序是空白的。

在这一步，你生成了一个新的Hugo网站。在下一步，你将为它添加一个文档主题。

第7步：为雨果网站添加一个主题

Hugo提供对主题的支持。你可以向你的网站添加预先配置的主题组件。在本教程中，你将使用hugo-book主题，它是一个文档网站的主题。你可以从Hugo主题展示网站上的各种主题中挑选。但是，请确保该主题支持国际化。

要添加图书主题，确保你在docs-app 文件夹中，如果没有，请运行：

cd docs-app

应用程序需要有一个git仓库，以添加一个主题作为git子模块。要初始化一个空的，请运行：

git init

要添加图书主题，请运行：

git submodule add https://github.com/alex-shpak/hugo-book themes/book

这个命令将图书主题仓库作为子模块添加到网站。它将图书主题克隆到themes 文件夹中。要查看使用图书主题的docs-app 网站，你可以用这个命令运行应用程序：

hugo server --theme book

下面是它看起来的截图：

这个网站仍然很空旷，因为它还不包含任何内容。你将在后面的步骤中从Strapi向它添加内容。

在这一步中，你为你的Hugo网站添加了一个支持国际化的主题。在接下来的步骤中，你将修改docs-app 网站的设置以支持国际化。

第8步：修改雨果网站设置

虽然图书主题支持国际化，但你必须修改docs-app 的设置来启用它。你还将修改网站的其他属性，如它的标题和基本URL。此外，你还将包括其他设置，以禁用图书主题的搜索，并限制缓存的寿命。在config.toml 文件中，删除现有的代码，添加下面的代码：

# The site base URL
baseURL = 'http://localhost:1313/'

# The default site and content language
languageCode = 'en-us'
defaultContentLanguage = 'en-us'

# The site title
title = 'Docs'

# Setting the site theme to hugo-book
theme = 'book'

[params]
# Disabling search here because it falls out of the scope of this tutorial
BookSearch = false
# The Strapi server URL
StrapiServerURL = 'http://localhost:1337'

[caches]
[caches.getjson]
# Sets the maximum age of cache to 10s before it is cleared.
maxAge = "10s"

[languages]
# The US English content settings
[languages.en-us]
languageName = "English (US)"
contentDir = "content"
# The Canadian French content settings
[languages.fr-ca]
languageName = "Français (Canada)"
contentDir = "content.fr-ca"
# The Mexican Spanish content settings
[languages.es-mx]
languageName = "Español (Mexico)"
contentDir = "content.es-mx"

StrapiServerURL 是Strapi服务器的URL。由于它暂时在本地运行，你将使用 http://localhost:1337.你将使用 getJSONHugo函数来从服务器上获取数据。它对请求结果进行缓存。在开发过程中，你可能会经常改变Strapi应用程序上的内容，由于缓存的存在，它可能无法反映你所做的改变。因此，使用maxAge 配置属性，你将它设置为10s ；这样，最近的Strapi内容变化就会出现在网站上。当你部署网站时，你将不得不根据网站重建的频率和内容的变化，将其改为适当的时间范围。

对于语言设置，你将定义三个语言类别。对于每种语言，你将为其内容定义一个名称和一个目录。每个内容目录都将位于网站根部。语言名称将显示在一个下拉菜单中，用户可以选择他们想要的内容。下面是每个语言的设置表。

语言名称	语言代码	内容目录
英语(美国)	en-us	`content/`
西班牙语(墨西哥)	es-mx	`content.es-mx/`
法语(加拿大)	fr-ca	`content.fr-ca/`

在这一步中，你向Hugo应用程序添加了设置，使其支持国际化。在下一步，你将修改主题以接受来自外部服务器的本地化内容。

第9步：修改主题以接受Strapi内容

在这一步中，你将修改主题以接受来自Strapi服务器的数据。尽管主题已经带有预配置的模板，你可以通过在layouts 文件夹中创建类似的文件来覆盖它们。

对于 hugo-book 主题，你将修改themes/book/layouts/partials/docs/inject/content-after.html 的模板。这个模板在主页面内容之后显示任何添加在其中的内容。要做到这一点，你将在网站根目录下的layouts/ 文件夹中创建这个文件，然后向其中添加内容。在这个文件中，你将定义一个模板，从服务器上获取markdown内容，通过markdown处理器传递，并显示它。获取内容的逻辑将被放在一个新的部分模板中，你将称之为strapi-content 。因此，要创建content-after 文件，在你的终端上运行这些命令：

mkdir -p layouts/partials/docs/inject/ && touch layouts/partials/docs/inject/content-after.html

接下来，你将创建部分模板以从Strapi获取内容：

touch layouts/partials/docs/strapi-content.html

在layouts/partials/docs/strapi-content.html 文件中，添加这段代码：

<!-- Partial to fetch content from Strapi. -->

{{ $endpoint := $.Param "endpoint" }}
{{ $data := dict "title" "" "content" "" }}

{{ if and $endpoint .Site.Params.StrapiServerURL }}

{{ $contentURL := printf "%s%s" .Site.Params.StrapiServerURL $endpoint }}
{{ $data = getJSON $contentURL }}

{{ end }}

{{ return $data }}

在这个部分文件中，你为一个特定的页面获取端点页面变量，并将其存储在$endpoint 。这个变量被添加到内容文件的前面，你将在接下来的步骤中看到。接下来，你创建一个叫做$data 的变量，在部分内容的最后返回。它将保存从Strapi服务器返回的内容。然后你将给它分配一个带有标题和内容的默认结构。这样做是为了防止没有指定端点，或者请求不成功。之后，你要检查是否设置了内容端点和Strapi服务器的URL。对于一个请求，你需要这两样东西。如果设置了，你就为你需要的内容创建一个URL，并使用getJSON 函数来进行请求。最后，你要返回数据。

在layouts/partials/docs/inject/content-after.html ，将下面的代码添加到文件中。

{{ $strapiData := partial "docs/strapi-content" . }}
<article class="markdown">
  <h1>{{ $strapiData.title }}</h1>

  {{ $strapiData.content | markdownify }}
</article>

在这里，你正在使用strapi-content 部分模板来获取数据。一旦你得到了内容，你就在article 标签中添加标题作为标题。最后，你把返回的内容，通过使用markdownify 函数的markdown处理器，并在article 标签中显示。

在这一步中，你通过覆盖它的一个模板来修改主题，并添加一个新的部分模板来从Strapi获取内容。在下一步，你将为每种语言添加内容页。

第十步：向雨果网站添加内容页

在这一步，你将添加内容页。每种语言都有一个内容文件夹，如前面的步骤所示。content 文件夹用于英语（美国）内容，content.es-mx 用于西班牙语（墨西哥）内容，content.fr-ca 用于法语（加拿大）内容。每个内容文件都必须有一个endpoint front matter变量，这是提供其特定语言内容的Strapi端点。你将在两个原型文件中添加这个变量，archetypes/default.md 和archetypes/docs.md 。

Archetype文件是内容文件的模板。它们可以用来指定前言和其他内容。hugo new 命令使用原型文件来生成新的内容文件。archetypes/default.md 将是所有_index.md 内容文件的模板，而archetypes/docs.md 将是docs/ 文件夹中所有内容文件的模板。archetypes/docs.md 和docs/ 是hugo-book主题的特定文件。要在你的终端上创建archetypes/docs.md 文件。

touch archetypes/docs.md

接下来，将archetypes/default.md 和archetypes/docs.md 的内容都替换为：

---
title: "{{ replace .Name "-" " " | title }}"
endpoint: "/"
---

<br/>

title 将被显示为页面标题，并在目录中显示。endpoint，如前所述，是提供内容的Strapi端点。你添加<br/> 标签，以便在构建过程中不被认为是空白页面。

mkdir content.es-mx content.fr-ca

接下来，为每个页面添加内容文件。

for cont in "_index.md" "docs/about.md" "docs/terms.md"; do hugo new  $cont; done && for langDir in  "content.es-mx" "content.fr-ca" ; do cp -R content/* $langDir; done

这个命令在每个内容目录中创建一个_index.md 文件、一个docs/about.md 文件和一个docs/terms.md 文件。下面是你运行这个命令后，内容目录的样子。

content
├── docs
│   ├── about.md
│   └── terms.md
└── index.md
content.es-mx
├── docs
│   ├── about.md
│   └── terms.md
└── index.md
content.fr-ca
├── docs
│   ├── about.md
│   └── terms.md
└── index.md

下面是你应该为每个文件添加的前题和内容。

主页 (index.md)

content

---
title: "Home"
endpoint: "/home?_locale=en-US"
---

<br/>

content.es-mx

---
title: "Hogar"
endpoint: "/home?_locale=es-MX"
---

<br/>

content.fr-ca

---
title: "Accueil"
endpoint: "/home?_locale=fr-CA"
---

<br/>

关于 (docs/about.md)

content

---
title: "About"
endpoint: "/about?_locale=en-US"
---

<br/>

content.es-mx

---
title: "Sobre"
endpoint: "/about?_locale=es-MX"
---

<br/>

content.fr-ca

---
title: "À propos"
endpoint: "/about?_locale=fr-CA"
---

<br/>

条款 (docs/terms.md)

content

---
title: "Terms"
endpoint: "/terms?_locale=en-US"
---

<br/>

content.es-mx

---
title: "Condiciones"
endpoint: "/terms?_locale=es-MX"
---

<br/>

content.fr-ca

---
title: "Conditions"
endpoint: "/terms?_locale=fr-CA"
---

<br/>

所以，你现在需要做的就是运行Hugo服务器。在这之前，请确保Strapi应用程序与npm run develop 一起在docs-server 文件夹中的不同终端中运行，这样Hugo就可以在构建网站时从其中获取内容。你可以使用这个命令运行Hugo服务器。

hugo server

关于常规自动重建的注意事项

由于Hugo创建的是静态网站，显示的内容不会是动态的。Hugo是在建站时从Strapi服务器获取内容，而不是在页面被请求时即时获取。因此，如果你想让内容定期反映Strapi服务器上的内容，请确保定期或在内容发生变化时自动重建你的Hugo网站。例如，如果你的网站是托管在Netlify上，你可以安排定期重建你的网站。

总结

Hugo是一个静态网站生成器，允许你建立快速和有效的静态网站。它利用其国际化功能提供多语言支持。你可以指定一系列的语言，Hugo会建立一个网站来支持每一种语言。Strapi是一个无头CMS，允许其用户更灵活地管理内容。它提供一个管理门户来输入和管理内容，以及一个可定制的API，不同的前端可以通过它来消费内容。它还提供了一个国际化插件来管理不同地域的内容。

在本教程中，你创建了一个Strapi应用程序。使用这个应用程序，你添加了三个单一的内容类型来表示三个页面的数据：一个主页、一个关于和一个条款页面。你为每个页面添加了三种语言的内容。英语（美国）、西班牙语（墨西哥）和法语（加拿大）。你还生成了API来访问这些页面的内容，并公开了其中的一些路线。

之后，你生成了一个Hugo应用程序。在这个应用程序中，你添加了一个文档主题，支持国际化的配置，以及不同语言的内容页面。最后，你修改了主题，以便从Strapi获取内容。如果你想建立更多的应用程序，可以尝试添加更多具有复杂结构的内容页类型，或者添加新语言的内容。