# 多国语言（i18n）

Eagle 插件內建了 i18next 模塊，這使得開發者可以很輕鬆的製作出支持多國語言的插件。i18next 是一个用于多国语言应用的 JavaScript 库，它可以轻松地处理多国语言翻译，并且提供了多种翻译的支持，包括自定义义翻译、局部化、多语系支持等。

以下我们将手把手说明如何让插件支持多国语系：

## 步骤一、建立 `_locales` 文件夹

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2Fgit-blob-2e4020878b13a2c1bc4f6adfe75399d2599940f6%2Fimage%20(19).png?alt=media" alt=""><figcaption></figcaption></figure>

## 步骤二、建立语言 `.json` 文件

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2FPsAfKVcJJLQ54irTknHB%2Fimage.png?alt=media&#x26;token=4053d6df-f03d-4810-a074-d05d60729d04" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="\_locales/en.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "i18n example"
        }
    },
    "contextMenu": {
        "copy": "Copy",
        "paste": "Paste"
    }
}
```

{% endtab %}

{% tab title="\_locales/zh\_CN.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "多国语言范例"
        }
    },
    "contextMenu": {
        "copy": "复制",
        "paste": "粘贴"
    }
}
```

{% endtab %}

{% tab title="\_locales/zh\_TW\.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "多國語言範例"
        }
    },
    "contextMenu": {
        "copy": "複製",
        "paste": "貼上"
    }
}
```

{% endtab %}

{% tab title="\_locales/ja\_JP.json" %}

```json
{
    "manifest": {
        "app": {
            "name": "i18n の例"
        }
    },
    "contextMenu": {
        "copy": "コピー",
        "paste": "ペース"
    }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
目前支持的语言有 `en`, `ja_JP`, `es_ES`, `de_DE`, `zh_TW`, `zh_CN`, `ko_KR`, `ru_RU`。
{% endhint %}

## 步骤三、调整 `manifest.json`

使用 Eagle Plugin 的 `i18next` 功能，你可以通過設定簡單的 JSON 文件來定義多國語言應用的翻譯。

```json
{
    "id": "LE564883T24ZR",
    "version": "1.0.0",
    
    // 1. 调整名称
    "name": "{{manifest.app.name}}",
    "logo": "/logo.png",
    "keywords": [],
    
    // 2. 设置支持语言、默认语言
    "fallbackLanguage": "zh_CN",
    "languages": ["en", "zh_TW", "zh_CN", "ja_JP"],
    
    "main": {
        "url": "index.html",
        "width": 640,
        "height": 480
    }
}
```

## 步骤四、更换代码中使用到的字符串

调整 plugin.js，使用 i18next 方法获取字符串，并进行 alert

{% code title="plugin.js" %}

```javascript
eagle.onPluginCreate((plugin) => {

    // 取得多国语言字段
    let copyText = i18next.t('contextMenu.copy');
    let pasteText = i18next.t('contextMenu.paste');

    document.querySelector('#message').innerHTML = `
    <ul>
        <li>Language: ${eagle.app.locale}</li>
        <li>Copy: ${copyText}</li>
        <li>Paste: ${pasteText}</li>
    </ul>
    `;
});
```

{% endcode %}

## 步骤五、切换应用语言，查看修改结果

您可以依照以下步骤来更改 Eagle 软件的语言设置：在萤幕上找到并点击 「Eagle」 按钮，接着选择 「偏好配置」，然后点击 「常用」 选项，最后在 「语言」 部分进行所需修改。

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2FUFA3jrYlSYjkehVk4stt%2Fimage.png?alt=media&#x26;token=bea62075-2ad2-41e9-a92c-b146c9ed89b5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2Fgit-blob-a32e2c55e65473ae04516b88f980c83fc620a3ba%2Fimage%20(20).png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3660253004-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZrMIIw27Dg9HnexbzyY%2Fuploads%2Fgit-blob-cb19a0370eaf4f0da654e55033aeda93aa49c713%2Fimage%20(16)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**完整示例代码：**

<https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n>
{% endhint %}

## 学习进阶用法

i18next 拥有许多便捷的方法，让我们能够轻松应对各种翻译情境。为了保证篇幅，这里仅对核心使用方法进行说明。如果需要了解 i18next 的使用方法和进阶用法，推荐阅读以下链接：

* i18next 官方文档：<https://www.i18next.com/overview/getting-started>
* i18next 的 GitHub 仓库：<https://github.com/i18next/i18next>

通过阅读官方文档，你可以了解 i18next 的基本概念和用法，并找到一些示例代码来帮助你开始使用它。GitHub 仓库中包含了 i18next 的源代码和更多的文档，如果你想进一步了解它的实现细节，可以在那里查看。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.eagle.cool/plugin-api/zh-cn/tutorial/i18n.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.