js 中的 Flask-Babel 本地化字符串

Question

我對 Python 和 Flask（使用 Jinja2 作為模板引擎）都很陌生，我不確定我是否以正確的方式做這件事。 我正在使用 Flask-Babel 擴展為我的 Web 應用程序添加 i18n 支持。 我想從我的 js 代碼中獲取本地化的字符串，例如：

var helloWorld = gettext('Hello, world');
console.log(helloWorld); //should log a localized hello world message

為此，我配置了 babel (babel.cfg)：

[python: **/**.py]
[jinja2: **/**.html]
extensions=jinja2.ext.autoescape,jinja2.ext.with_
[javascript: **/**.js]
encoding = utf-8

它的初始化是（為簡單起見省略了導入）：

#main Flask app
app = Flask(__name__)

#localization
babel = Babel(app)

LANGUAGES = {
    'ca': 'Catalan',
    'en': 'English',
    'de': 'Deutsch',
    'es': 'Español',
    'fi': 'Finnish',
    'it': 'Italian'
}

@babel.localeselector
def get_locale():
    return request.accept_languages.best_match(LANGUAGES.keys())

#some more stuff...

Babel 在構建 POT/PO 語言文件時識別該字符串，但由於未定義 gettext 函數，因此我似乎無法從 js 代碼訪問這些本地化字符串。 Jinja2 似乎忽略了這一部分。

任何提示？

Answer 1

我終於找到了解決方案，雖然我不確定這是要走的路。 這個想法是將 javascript 代碼包裝在一個 html 模板中，它在呈現之前由 Jinja2 解釋，並應用自定義 Jinja2 過濾器來擺脫一些小問題。 我試圖單獨保存 js 文件，但沒有用。

似乎可以像這樣使用 gettext 函數：

var helloWorld = {{gettext('Hello, world')}};

但是，沒有插入引號，因此，js 解釋器拋出錯誤：

var helloWorld = Hello, world;

這就是我最終應用自定義過濾器的原因。 一個工作示例如下。

hello_world.html：

<script type="text/javascript">
   var x = {{gettext('Hello, world')|generate_string|safe}};
   console.log(x);    //logs the localized hello world message
</script>

應用程序.py：

#Jinja2 filters
from jinja2 import evalcontextfilter, Markup

#Mind the hack! Babel does not work well within js code
@app.template_filter()
@evalcontextfilter
def generate_string(eval_ctx, localized_value):
    if localized_value is None:
        return ""
    else:
        return Markup("\"" + localized_value + "\"").unescape()

希望這可以幫助！

Answer 2

在呈現的 JavaScript 中提供翻譯有點脆弱。 另外，我通常不使用 Jinja 生成 JavaScript，因為它使用相同類型的括號，並且在濫用時很容易變成一團糟（總是可能有動態數據和靜態 JavaScript）。

另一種輕量級方法是使用相同的 JSON 技巧，但使用數據屬性：

<div id="view-i18n" data-i18n='{{ view_i18n|tojson }}'> ... </div>

（注意：單引號！）

但它也適用於數量有限的翻譯。

也許，最可靠的方法是在 JavaScript 中使用與 Flask 應用程序中相同的翻譯。

在名為pojson的實用程序的幫助下，可以將 po 文件轉換為 json（例如，參見https://github.com/ZeWaren/flask-i18n-example ）作為構建過程的一部分（例如，對制作mo文件后）。 通過在pojson的輸出前面加上var some_unique_name =來訪問它，可以輕松地將翻譯添加到一些足夠獨特的全局命名空間變量中。 或者將static下的文件放入特定於語言環境的文件（例如static/view-es.json 、 static/view-fr.json等）並通過 ajax 調用獲取它。

不過有些事情要考慮。 如果您真的想讓 JSON 更小，您可能需要通過控制 babel 提取選項將您的翻譯域分解為單獨的 Python 和 Javascript。 此外，在 Javascript 中使用所有翻譯字符串具有安全性。 也許，您不想公開某些僅管理員認為對其他類別用戶開放的短語。 但是，不同級別的訪問需要更多的翻譯域。 此外，可能需要刪除標題信息以防止泄露翻譯人員的電子郵件等。 當然，這會使構建過程變得有些復雜，但是 JavaScript 方面隨着時間的推移需要的翻譯越多，自動化的回報就越多。