При создании приложений разработчики могут захотеть добавить функцию перевода, которая позволит пользователям других языков, кроме английского, читать и использовать свое приложение.

Что ж, я собираюсь поделиться с вами одним способом, которым мы можем добавить функцию перевода в приложение.

Это быстрый и простой способ, который займет у вас менее 10 минут, чтобы добавить эту функцию перевода.

В вашем index.html сначала добавьте этот код ‹div id="google_translate_element"›‹/div›, как показано ниже:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        
    <div id="google_translate_element"></div>
</body>
</html>

Затем добавьте функцию JavaScript ‹script› под ‹div›:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        
    <div id="google_translate_element"></div>
    <script type="text/javascript">
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'},  
      'google_translate_element'); 
       }
    </script>
</body>
</html>

а также гугл-переводчик ‹script› под этим:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
        
    <div id="google_translate_element"></div>
    <script type="text/javascript">
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'},  
      'google_translate_element'); 
       }
    </script>
    <script type="text/javascript"   
     src="//translate.google.com/translate_a/element.js? 
     cb=googleTranslateElementInit">
    </script>
</body>
</html>

После того, как мы добавим все это в файл index.html, эта функция Google Translate появится в нашем приложении:

Давайте попробуем и посмотрим, меняются ли слова в приложении.

Вставьте ‹div style="color:blue;font-size:30px"›Привет, как дела?‹/div› в файл index.html, чтобы проверить его.

Кроме того, вы можете добавить встроенные стили, как я сделал ниже, используя style="color:blue;font-size:30px" для ‹div›.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    
    <div style="color:blue;font-size:30px">Hi how are you?</div>
    <div id="google_translate_element"></div>
    <script type="text/javascript">
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en'},  
      'google_translate_element'); 
       }
    </script>
    <script type="text/javascript"   
     src="//translate.google.com/translate_a/element.js? 
     cb=googleTranslateElementInit">
    </script>
</body>
</html>

Это должно появиться:

Попробуйте перевести это на греческий, нажав кнопку раскрывающегося списка и щелкнув по греческому.

Это появится в вашем приложении:

Если вы нажмете кнопку раскрывающегося списка в окне перевода Google, вы сможете изменить слова в своем приложении на более чем 30 различных языков.

Попробуйте этот простой и легкий способ вставить функцию перевода в ваше приложение и мгновенно перевести ваше приложение на разные языки!