@3nvi/gatsby-theme-intl 中文文档教程

Question

gatsby-theme-intl

通过创建页面帮助 i18n & 处理所有支持的语言环境的翻译。

Features

简而言之，这会做 gatsby-plugin-intl 所做的一切，而暴露
React Components 可帮助您处理翻译和其他内部化工作。 它：

• Creates a page for each of your locales and exposes them through different URLs
• Sets the locale for this page and exposes it through React.Context to any component within the page
• Creates all the necessary SEO tags for each of your new localized pages
• Creates proper redirects based on Language headers, as well as the default/fallback language

这个插件的核心是公开以下内容：

usePageContext

返回有关当前页面的信息。

```jsx和谐 从 '@3nvi/gatsby-theme-intl' 导入 { usePageContext }；

const 组件 = () => { 常数 { // 当前页面的语言（即en） 郎， // 本地化之前页面的原始路径（即/about） 原始路径， // 您的应用程序支持的语言（即 ['en']） 支持的语言， //你当前站点的URL（即http://localhost:8000） 网址， } = 使用页面上下文（）；

返回

; };

### `useTranslation`

Returns a helper function for translations. This package uses & configures [i18next](https://github.com/i18next/i18next)
under the hood, so you can read more there about how to configure your translations.

jsx和谐 从 '@3nvi/gatsby-theme-intl' 导入 { useTranslation }；

const 组件 = () => { const { t } = useTranslation();

返回

{t('greeting')}

; };

### `Link`

A wrapper around gatsby-link, that accepts the original path and converts it to a intl-aware link, depending on the currently
active language.

jsx和谐 从'@3nvi/gatsby-theme-intl'导入{链接}；

const 组件 = () => { 返回关于； // destination 自动转换为 /{activeLanguage}/about };

In addition to these, the package configures & forwards all React components present in
the [react-i18next](https://github.com/i18next/react-i18next/) package.

## Quick Start

This plugin composes [gatsby-plugin-intl](https://github.com/3nvi/gatsby-intl/tree/master/packages/gatsby-plugin-intl):

npm i @3nvi/gatsby-theme-intl

and in your `gatsby-config.js`:

js { // …你的其余配置 插件：[ // ... 其他插件 { 解析：@3nvi/gatsby-theme-intl, 选项： { // ... }, }, ]; }

## Configuration

The plugin accepts all **optional options** present in [gatsby-plugin-intl](https://github.com/3nvi/gatsby-intl/tree/master/packages/gatsby-plugin-intl). Additionally,
it accepts the following:

- `i18nextConfig`: Configuration options for the `i18next` instance that this theme uses under the hood. The available
  options can be found in the [official docs](https://www.i18next.com/overview/configuration-options).

  This package already adds a sane default configuration for i18next, which is automatically merged with
  the one you provide. The minimum **required** configuration option from your part is the `resources` option.

Example configuration:

_ const translations = require('./i18n.json');

{ // …你的其余配置 插件：[ // ... 其他插件 { 解析：@3nvi/gatsby-theme-intl, 选项： { 支持的语言：['en', 'fr'] i18nextConfig：{ 资源：翻译， }, }, }, ]; }

# Client-Only Routes

For implementing client-only routes gatsby recommends using its dedicated [gatsby-plugin-create-client-paths](https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/). This
can work in tandem with `gatsby-theme-intl` by simply:

1. Including `gatsby-plugin-create-client-paths` before `gastby-theme-intl`:

_ const translations = require('./i18n.json');

{ // …你的其余配置 插件：[ // ... 其他插件 { 解决：gatsby-plugin-create-client-paths, 选项：{前缀：[/app/*]}， }, { 解析：@3nvi/gatsby-theme-intl, 选项： { 支持的语言：['en', 'fr'] i18nextConfig：{ 资源：翻译， }, }, }, ]; }

2. Making sure that the [Router component's `basePath`](https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/#configuring-and-handling-client-only-routes-on-a-server)
   contains the language prefix before the dynamic URL part. You can get the current language from `usePageContext`. For example, using the previous config (where all `/app/*` paths were client-only), we would do:

jsx 和谐 // 应用程序.js 常量 App = () => { const { lang } = usePageContext();

返回 （ /${lang}/app}>; ); }; ```

Usage Examples

访问相关的 gatsby starter 即可 查看如何使用此插件的完整示例

Changelog

请参阅 Changelog 了解每个版本

License

MIT的详细信息