Plugin API
繁體中文
繁體中文
  • 入門
    • 簡介
    • 你的第一個插件
    • 檔案結構概述
    • 插件類型
      • 視窗
      • 背景服務
      • 格式擴充
      • 檢查器
    • 除錯插件
  • 部署
    • 準備插件
    • 打包插件
    • 發佈插件
    • 更新插件
    • 開發者政策
    • 插件圖示樣板
  • 開發指南
    • manifest.json 完整設定
    • 取得數據
    • 修改數據
    • 存取本機檔案
    • 發出網路請求
    • 使用 Node.js 原生 API
    • 使用第三方模快
    • 多國語言(i18n)
    • 無邊框視窗
  • API 參考
    • event(事件)
    • item(項目)
    • folder(資料夾)
    • tag(標籤)
    • tagGroup(標籤群組)
    • library(資源庫)
    • window(視窗)
    • app(應用)
    • os(作業系統)
    • screen(螢幕)
    • notification(通知)
    • contextMenu(右鍵選單)
    • dialog(對話框)
    • clipboard(剪貼板)
    • drag(拖曳檔案)
    • shell(殼)
    • log(日誌)
  • 额外组件
    • FFmpeg
Powered by GitBook
On this page
  • 步驟一、建立 _locales 資料夾
  • 步驟二、建立語言 .json 檔案
  • 步驟三、調整 manifest.json
  • 步驟四、更換程式碼中使用到的字串
  • 步驟五、切換應用語言,查看修改結果
  • 學習進階用法
  1. 開發指南

多國語言(i18n)

Eagle 插件內建 i18next 模組,讓開發者輕鬆製作多語言插件。i18next 是 JavaScript 多國語言庫,易於翻譯、局部化並支援多種翻譯方法。

Previous使用第三方模快Next無邊框視窗

Last updated 10 months ago

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

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

步驟一、建立 _locales 資料夾

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

{
    "manifest": {
        "app": {
            "name": "i18n example"
        }
    },
    "contextMenu": {
        "copy": "Copy",
        "paste": "Paste"
    }
}
{
    "manifest": {
        "app": {
            "name": "多國語言範例"
        }
    },
    "contextMenu": {
        "copy": "複製",
        "paste": "粘貼"
    }
}
{
    "manifest": {
        "app": {
            "name": "多國語言範例"
        }
    },
    "contextMenu": {
        "copy": "複製",
        "paste": "貼上"
    }
}
{
    "manifest": {
        "app": {
            "name": "i18n の例"
        }
    },
    "contextMenu": {
        "copy": "コピー",
        "paste": "ペース"
    }
}

目前支援的語言有 en, ja_JP, es_ES, de_DE, zh_TW, zh_CN, ko_KR, ru_RU。

步驟三、調整 manifest.json

使用 Eagle Plugin 的 i18next 功能,你可以透過設定簡單的 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

plugin.js
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>
    `;
});

步驟五、切換應用語言,查看修改結果

您可以依照以下步驟來更改 Eagle 軟體的語言設定:在螢幕上找到並點擊「Eagle」按鈕,接着選擇「偏好設定」,然後點擊「常用」選項,最後在「語言」部分進行所需修改。

完整範例程式碼:

學習進階用法

i18next 擁有許多便捷的方法,讓我們能夠輕鬆應對各種翻譯情境。為了保證篇幅,這裏僅對核心使用方法進行説明。如果需要了解 i18next 的使用方法和進階用法,推薦閲讀以下連結:

透過閲讀官方文檔,你可以瞭解 i18next 的基本概念和用法,並找到一些範例程式碼來幫助你開始使用它。GitHub 倉庫中包含了 i18next 的原始碼和更多的文檔,如果你想進一步瞭解它的實現細節,可以在那裏查看。

i18next 官方文檔:

i18next 的 GitHub 倉庫:

https://github.com/eagle-app/eagle-plugin-examples/tree/main/i18n
https://www.i18next.com/overview/getting-started
https://github.com/i18next/i18next