乐闻世界logo
搜索文章和话题

How to use i18n to gatsby?

2 个月前提问
21 天前修改
浏览次数14

1个答案

1

在Gatsby中实现国际化(i18n)可以通过多种方式进行,但最常见和推荐的方法是使用 gatsby-plugin-react-i18next 插件。这个插件基于 react-i18next 库,提供了强大的国际化支持,包括多语言路由和服务器端语言检测。以下是如何在Gatsby项目中使用该插件的步骤:

第一步:安装必要的包

首先,您需要安装 gatsby-plugin-react-i18nexti18next 本身,还有 react-i18next 库。

bash
npm install gatsby-plugin-react-i18next i18next react-i18next

第二步:配置 gatsby-config.js

然后在您的 gatsby-config.js 文件中添加和配置 gatsby-plugin-react-i18next

javascript
module.exports = { plugins: [ { resolve: `gatsby-plugin-react-i18next`, options: { localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin. languages: [`en`, `de`], // List of supported languages defaultLanguage: `en`, // Default language siteUrl: `https://www.example.com`, i18nextOptions: { interpolation: { escapeValue: false, // not needed for react as it escapes by default }, keySeparator: false, nsSeparator: false, }, pages: [ { matchPath: '/:lang?/blog/:uid', getLanguageFromPath: true, excludeLanguages: ['es'], }, ], }, }, ], };

第三步:添加语言文件

创建语言 JSON 文件,通常放置在 ./locales 文件夹内。例如,您可以有 en/translation.jsonde/translation.json

json
// en/translation.json { "hello": "Hello" } // de/translation.json { "hello": "Hallo" }

第四步:使用 useTranslation 钩子

在您的组件中,您可以使用 useTranslation 钩子来引入翻译功能。

javascript
import React from "react"; import { useTranslation } from "react-i18next"; const MyComponent = () => { const { t } = useTranslation(); return <h1>{t('hello')}</h1>; // Will display "Hello" or "Hallo" based on current language }; export default MyComponent;

第五步:语言切换

您可以添加一个切换语言的功能,允许用户手动选择他们偏好的语言。

javascript
import React from "react"; import { useI18next } from "gatsby-plugin-react-i18next"; const LanguageSwitcher = () => { const { languages, changeLanguage } = useI18next(); return ( <div> {languages.map((lang) => ( <button key={lang} onClick={() => changeLanguage(lang)}> {lang} </button> ))} </div> ); }; export default LanguageSwitcher;

通过上述步骤,Gatsby 网站就能够支持多语言了,实现国际化。这对于提升网站的全球可访问性非常有帮助。

2024年6月29日 12:07 回复

你的答案