Tranzy.js 文档

<!-- HTML 内容 -->
<div id="content">
  <h2>Welcome to Tranzy</h2>
  <p>This is a demonstration of automatic translation.</p>
  <p>The text will be translated to your selected language.</p>
</div>

<!-- JavaScript 代码 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // UMD版本使用 Tranzy.Translator
    const tranzy = new Tranzy.Translator({
      toLang: 'zh-Hans',
      fromLang: 'en',
      ignore: ['.no-translate'],
      force: ['.must-translate']
    });
    
    // 翻译页面
    tranzy.translatePage('#content');
  });
</script>
                                    

<!-- HTML 内容 -->
<div id="dictionary-demo">
  <h2>Tranzy Framework Documentation</h2>
  <p>The Tranzy framework provides easy translation for websites.</p>
  <p>Key components: API integration, DOM monitoring, custom dictionary.</p>
</div>

<!-- JavaScript 代码 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tranzy = new Tranzy.Translator({
      toLang: 'zh-Hans',
      fromLang: 'en',
      manualDict: {
        'zh-Hans': {
          'Tranzy': '全译',
          'framework': {
            to: '框架',
            standalone: false
          },
          'API integration': 'API集成',
          'DOM monitoring': 'DOM监听',
          'custom dictionary': '自定义词典'
        }
      }
    });
    
    // 翻译页面
    tranzy.translatePage('#dictionary-demo');
  });
</script>
                                    

<!-- HTML 内容 -->
<div id="selective-demo">
  <h2>Selective Translation</h2>
  <p>This paragraph will be translated normally.</p>
  <p class="no-translate">This paragraph will NOT be translated.</p>
  <div class="code-block no-translate">
    <pre>const tranzy = new Tranzy.Translator();</pre>
  </div>
  <p class="must-translate">This will ALWAYS be translated, even inside ignored elements.</p>
</div>

<!-- JavaScript 代码 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tranzy = new Tranzy.Translator({
      toLang: 'zh-Hans',
      fromLang: 'en',
      ignore: ['.no-translate', 'pre', 'code'],
      force: ['.must-translate']
    });
    
    // 翻译页面
    tranzy.translatePage('#selective-demo');
  });
</script>
                                    

<!-- HTML 内容 -->
<div id="observer-demo">
  <h2>DOM Observer Demo</h2>
  <div id="dynamic-content">
    <p>This is the initial content.</p>
  </div>
  <button id="add-content">Add Content</button>
</div>

<!-- JavaScript 代码 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const tranzy = new Tranzy.Translator({
      toLang: 'zh-Hans',
      fromLang: 'en'
    });
    
    // 翻译初始内容
    tranzy.translatePage('#observer-demo');
    
    // 启动DOM观察器
    tranzy.startObserver('#observer-demo');
    
    // 添加动态内容的事件处理
    document.getElementById('add-content').addEventListener('click', function() {
      const dynamicContent = document.getElementById('dynamic-content');
      const newParagraph = document.createElement('p');
      newParagraph.textContent = 'This is dynamically added content that will be automatically translated.';
      dynamicContent.appendChild(newParagraph);
    });
  });
</script>
                                    

// ES模块方式
import { translateText, detectLang, getSupportedLangs, getBrowserLang } from 'tranzy';

// UMD方式
// const { translateText, detectLang, getSupportedLangs, getBrowserLang } = Tranzy;

// 文本翻译API示例
async function translateDemo() {
  const results = await translateText(
    ['Hello world!', 'Welcome to Tranzy'], 
    'zh-Hans', 
    'en'
  );
  console.log(results); 
  // 输出: ['你好世界！', '欢迎使用全译']
}

// 语言检测API示例
async function detectLanguageDemo() {
  const detection = await detectLang('こんにちは、世界！');
  console.log(detection);
  // 输出: [{ language: 'ja', score: 0.98, isTranslationSupported: true }]
}

// 获取支持的语言列表
async function getSupportedLanguagesDemo() {
  const languages = await getSupportedLangs('zh-Hans');
  console.log(languages);
  /* 输出示例:
  {
    'en': { name: '英语', nativeName: 'English', dir: 'ltr' },
    'zh-Hans': { name: '简体中文', nativeName: '简体中文', dir: 'ltr' },
    'ja': { name: '日语', nativeName: '日本語', dir: 'ltr' },
    // ... 更多语言
  }
  */
}

// 获取浏览器语言
async function getBrowserLanguageDemo() {
  const browserLang = await getBrowserLang();
  console.log(browserLang); // 如: 'zh-Hans' 或 'en-US'
}