# 多國語言（i18n）

Eagle 插件內建了 i18next 模組，這使得開發者可以很輕鬆的製作出支援多國語言的插件。i18next 是一個用於多國語言應用的 JavaScript 庫，它可以輕鬆地處理多國語言翻譯，並且提供了多種翻譯的支援，包括自定義翻譯、局部化、多語系支援等。

以下我們將手把手説明如何讓插件支援多國語系：

## 步驟一、建立 `_locales` 資料夾

<figure><img src="/files/FfTgvfXkS68TBXG68of1" alt=""><figcaption></figcaption></figure>

## 步驟二、建立語言 `.json` 檔案

<figure><img src="/files/DeEMvin5lchYHiQTN57o" 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="/files/S9nbzv1pLBuUt6Cx5sMg" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/oKWuApMazvuXDNQwIvGM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/rEpWUWnuU7ygZNfQjyCC" 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-tw/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.