时间戳

首页 > 解决方案 > PHP中的gettext翻译工作正常，但不适用于javascript

javascript - PHP中的gettext翻译工作正常，但不适用于javascript

问题描述

我将 gettext 与 *.po 和 *.mo 文件结合使用，将我的小网站翻译成不同的语言。用户可以在下拉列表中选择他们的首选语言，网站会刷新并显示所选语言。

当涉及到翻译用户交互时出现的 javascript 内容时（例如：在输入字段下方键入至少 6 个字符的注释），我不知道如何正确解决它。有没有一种简单的方法可以像在 php 翻译中一样使用 gettext 来获取这些注释？我在这里阅读了很多关于它的内容并尝试了我能做的，但不知何故我无法弄清楚。

这是简化的 index.js 代码：

let messageUserText;
let userInput;

messageUserText     = document.getElementById('userMsg');
userInput           = document.getElementById('usernameInput');

function validInput() {
    const userName      = usernameInput.value;

    let messageUserName = '';

    if (userName === '') {
        messageUserName = 'Please enter username';
    } else if (userName.search(/[^a-zA-Z0-9üÜöÖäÄ]/) === -1) {
        messageUserName = 'Username accepted';
    } else {
        messageUserName = 'Please check username';
    }
    messageUserText.innerHTML = messageUserName;
}

这是 index.php 中的简化代码：

<?php
   require_once("locale.php");
   include_once('header.php');
?>
...
<!-- DROPDOWN LANGUAGE SELECTION -->
        <form name="locale" action="index.php" method="POST">
              <button type="button" class="dropdown">
                      <!-- SHOW CHOSEN LANGUAGE -->
                      <?php 
                        if (isset($_POST['locbtn'])) {
                          if ($_POST['locbtn'] === 'en_EN') {
                            echo "EN";
                          } else if ($_POST['locbtn'] === 'de_DE') {
                            echo "DE";
                          }
                        }
                        else {
                          echo "EN";
                        }?>
              </button>
              <ul class="dropdown-menu">
                <li><button class="item" type="submit" value="en_EN" name="locbtn"><?php echo _("DE"); ?></button></li>
                <li><button class="item" type="submit" value="de_DE" name="locbtn"><?php echo _("EN"); ?></button></li>
              </ul>
            </form>
   ...
          <!-- INPUT FORM -->
          <div>
            <form>
              <!-- Floating Labels INPUT USER -->
                  <input type="text" 
                     placeholder="<?php echo _("Username"); ?>" 
                     aria-label="<?php echo _("Username"); ?>" 
                     id="usernameInput" 
                     onkeyup="validInput()" 
                   required>
                  <label for="usernameInput">
                     <?php echo _(" Username"); ?>
                  </label>  
              <!-- NOTE MESSAGE: THIS IS WHERE I CANT TRANSLATE APPEARING JAVASCRIPT CONTENT-->
               <p id="userMsg"></p>
    ...
    <!-- Javascripts-->
       <script type="text/javascript" src="includes/js/index.js"></script>

    <?php include('footer.php'); ?>

这是 locale.php

    <?php
        //Locale Main & HTML Handler
        if (isset($_POST['locbtn'])) {
            
            $locale = $_POST['locbtn'];
                      
            if ($_POST['locbtn'] === 'en_EN') {
                $htmlLanguage = 'en';
            } else if ($_POST['locbtn'] === 'de_DE') {
                $htmlLanguage = 'de';
            }
        } else {
            $htmlLanguage = 'en';
            $locale = 'en_EN';
        }

       // Set lang env
       putenv("LANGUAGE=$locale");

       // Set locale:
       setlocale( LC_MESSAGES, $locale);

       // Name of translation files
       $domain = 'test';

       // Set the path for a domain
       $pathToDomain = "/home/locale/";
       bindtextdomain($domain, $pathToDomain);

       // Set codeset
       bind_textdomain_codeset($domain, 'UTF-8');

       textdomain($domain);
    ?>

标签： javascriptmultilingualgettexttranslate

解决方案

这是一个使用对象创建每种语言翻译的键/值对的基本示例。

let selected_lang = "en"; //use cookies, localstorage or even php to hardcode the language that they previously selected

let translations = {};

translations["en"] = {
 "username-empty" : "Please enter username",
 "username-valid" : "Username accepted",
 "username-unknown" : "Please check username"
};

translations["de"] = {
 "username-empty" : "GERMAN Please enter username",
 "username-valid" : "GERMAN Username accepted",
 "username-unknown" : "GERMAN Please check username"
};

function getTranslation(field){
    return translations[selected_lang][field];
}

function validInput() {
    const userName      = usernameInput.value;

    let messageUserName = '';

    if (userName === '') {
        messageUserName = getTranslation("username-empty");
    } else if (userName.search(/[^a-zA-Z0-9üÜöÖäÄ]/) === -1) {
        messageUserName = getTranslation("username-valid");
    } else {
        messageUserName = getTranslation("username-unknown");
    }
    messageUserText.innerHTML = messageUserName;
}

console.log(getTranslation("username-unknown"))

推荐阅读