Daiju Translate

English | 中文

English

Multilingual web translation plugin with no browser extension required. Works via CDN or npm, and you can drop in a small component to integrate quickly.

Highlights

• Multiple languages built in (Chinese, English, and more)
• Switchable translation services: Google or Bing
• Auto translate, dual-language display, and title translation
• Language list API so you can style your own selector

Installation

npm

npm install daiju-translate

import DaijuTranslate from 'daiju-translate';

DaijuTranslate.init({
  targetLanguage: 'zh-CN',     // default target language
  autoTranslate: true,         // auto translate on load
  showDual: false,             // dual language display
  dualStyle: 'underline',      // underline | highlight | weakening | none
  translateTitle: false        // translate document.title
});

CDN

<script src="https://unpkg.com/daiju-translate@latest/dist/daiju-translate.min.js"></script>
<script>
  DaijuTranslate.init({
    targetLanguage: 'zh-CN',
    autoTranslate: true,
  });
</script>

Quick Use (React example)

Simple React component for language switching:

import { useEffect, useState } from 'react';

export default function LanguageSwitcher() {
  const [lang, setLang] = useState('zh-CN');
  const [list, setList] = useState({});

  useEffect(() => {
    DaijuTranslate.init({ service: 'google' });
    const saved = localStorage.getItem('daiju-translate-lang') || 'zh-CN';
    setLang(saved);
    setList(DaijuTranslate.getLanguageList(saved));
  }, []);

  const change = (value) => {
    setLang(value);
    localStorage.setItem('daiju-translate-lang', value);
    if (DaijuTranslate.getLanguageList) {
      setList(DaijuTranslate.getLanguageList(value));
    }
    if (value === 'original') {
      DaijuTranslate.restore();
    } else {
      DaijuTranslate.translate(value);
    }
  };

  return (
    <select value={lang} onChange={(e) => change(e.target.value)}>
      {Object.entries(list).map(([code, name]) => (
        <option key={code} value={code}>{name}</option>
      ))}
    </select>
  );
}

API Overview

// Init
DaijuTranslate.init(options);

// Translate the whole page
DaijuTranslate.translate('en');

// Restore original text
DaijuTranslate.restore();

// Toggle translate/original
DaijuTranslate.toggle();

// Read / write config
DaijuTranslate.setConfig('targetLanguage', 'ja');
DaijuTranslate.getConfig('targetLanguage');

Customization

• Target language: set targetLanguage, switch anytime via translate(lang).
• Auto translate: autoTranslate: true to run on load.
• Dual language: showDual + dualStyle to show original + translated text and style it.
• Title translation: translateTitle: true to translate document.title.

Customizing the language list (idea)

• Render your own dropdown and supply your own language list; you don't need the built-in list.
• Example:

const LANGS = {
  'zh-CN': '中文',
  en: 'English',
};

const change = (lang) => {
  localStorage.setItem('daiju-translate-lang', lang);
  DaijuTranslate.translate(lang);
};

• Add more entries to LANGS if you want more languages.

Supported Language Codes

Common language codes:

| Code | Language | Code | Language | |------|----------|------|----------| | zh-CN | Chinese (Simplified) | en | English | | zh-TW | Chinese (Traditional) | ja | Japanese | | ko | Korean | es | Spanish | | fr | French | de | German | | ru | Russian | ar | Arabic | | pt | Portuguese | it | Italian | | th | Thai | vi | Vietnamese | | id | Indonesian | ms | Malay | | tl | Filipino | hi | Hindi | | tr | Turkish | pl | Polish | | nl | Dutch | sv | Swedish |

For the complete list, see google.json

License

MIT

中文

多语言网页翻译插件，无需浏览器扩展。支持 CDN / npm 引入，也可直接用示例组件快速落地。

主要能力

• 支持多种语言互译（内置中/英等主流语言）
• 支持 Google / Bing 翻译服务切换
• 自动翻译、双语展示、标题翻译
• 提供语言选择器接口，方便自定义 UI

安装

npm

npm install daiju-translate

import DaijuTranslate from 'daiju-translate';

DaijuTranslate.init({
  targetLanguage: 'zh-CN',     // 目标语言
  autoTranslate: true,         // 是否自动翻译
  showDual: false,             // 是否双语展示
  dualStyle: 'underline',      // 双语样式: underline | highlight | weakening | none
  translateTitle: false        // 是否翻译标题
});

CDN

<script src="https://unpkg.com/daiju-translate@latest/dist/daiju-translate.min.js"></script>
<script>
  DaijuTranslate.init({
    targetLanguage: 'zh-CN',
    autoTranslate: true,
  });
</script>

快速使用 (组件示例)

下面的简单 React 组件可以直接插入页面，实现语言选择与切换：

import { useEffect, useState } from 'react';

export default function LanguageSwitcher() {
  const [lang, setLang] = useState('zh-CN');
  const [list, setList] = useState<Record<string, string>>({});

  useEffect(() => {
    DaijuTranslate.init({ service: 'google' });
    const saved = localStorage.getItem('daiju-translate-lang') || 'zh-CN';
    setLang(saved);
    setList(DaijuTranslate.getLanguageList(saved));
  }, []);

  const change = (value: string) => {
    setLang(value);
    localStorage.setItem('daiju-translate-lang', value);
    DaijuTranslate.getLanguageList && setList(DaijuTranslate.getLanguageList(value));
    if (value === 'original') {
      DaijuTranslate.restore();
    } else {
      DaijuTranslate.translate(value);
    }
  };

  return (
    <select value={lang} onChange={(e) => change(e.target.value)}>
      {Object.entries(list).map(([code, name]) => (
        <option key={code} value={code}>{name}</option>
      ))}
    </select>
  );
}

API 概览

// 初始化
DaijuTranslate.init(options);

// 翻译整页
DaijuTranslate.translate('en');

// 恢复原文
DaijuTranslate.restore();

// 切换状态（翻译/原文）
DaijuTranslate.toggle();

// 读/写配置
DaijuTranslate.setConfig('targetLanguage', 'ja');
DaijuTranslate.getConfig('targetLanguage');

自定义

• 目标语言：targetLanguage 设置默认语言，translate(lang) 可随时切换。
• 自动翻译：autoTranslate: true 页面加载后自动翻译。
• 双语展示：showDual + dualStyle 控制是否显示原文+译文及样式。
• 翻译标题：translateTitle: true 同时翻译 document.title。

自定义语言列表（示例思路）

• 在你的页面里自行渲染下拉框，自己提供语言列表即可，不依赖内置列表。
• 示例：

const LANGS = {
  'zh-CN': '中文',
  en: 'English',
};

const change = (lang) => {
  localStorage.setItem('daiju-translate-lang', lang);
  DaijuTranslate.translate(lang);
};

• 需要更多语言时，向 LANGS 添加代码/名称即可。

支持的语言代码

常用语言代码对照表：

| 代码 | 语言 | 代码 | 语言 | |------|------|------|------| | zh-CN | 简体中文 | en | 英语 | | zh-TW | 繁体中文 | ja | 日语 | | ko | 韩语 | es | 西班牙语 | | fr | 法语 | de | 德语 | | ru | 俄语 | ar | 阿拉伯语 | | pt | 葡萄牙语 | it | 意大利语 | | th | 泰语 | vi | 越南语 | | id | 印尼语 | ms | 马来语 | | tl | 菲律宾语 | hi | 印地语 | | tr | 土耳其语 | pl | 波兰语 | | nl | 荷兰语 | sv | 瑞典语 |

完整语言列表请查看 google.json

许可

MIT