js中的Flask-Babel本地化字符串 [英] Flask-Babel localized strings within js

问题描述

对于Python和Flask(使用Jinja2作为模板引擎)，我还是一个新手，我不确定自己是否做对了.我正在使用Flask-Babel扩展程序将i18n支持添加到我的Web应用程序中.我想从我的js代码中获取本地化的字符串，例如:

I'm pretty new to both Python and Flask (with Jinja2 as template engine) and I am not sure I am doing it the right way. I am using Flask-Babel extension to add i18n support to my web application. I want to get localized strings from my js code, for instance:

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

为此，我配置了babel(babel.cfg):

For this, I configured babel (babel.cfg):

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

其初始化为(为简单起见，省略了导入):

And its initialization is (imports omitted for simplicity):

#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忽略了这部分.

Babel identifies that string when building the POT/PO language files, but it seems I can't access these localized strings from js code since gettext function is not defined. It seems like Jinja2 is ignoring this part.

有任何提示吗?

推荐答案

我终于找到了解决方案，尽管我不确定这是否可行.这个想法是将javascript代码包装在html模板中，该模板由Jinja2解释，然后再呈现，并应用自定义Jinja2过滤器以消除一些小问题.我试图单独保存js文件，但是没有用.

I have finally found a solution, although I am not sure it is the way to go. The idea is to wrap the javascript code within an html template, which is interpretated by Jinja2 before it is rendered and apply a custom Jinja2 filter to get rid of some minor issues. I tried to keep js files separately but it did not work.

似乎可以像这样使用gettext函数:

It seems that gettext function can be used like so:

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

但是，由于没有插入引号，因此js解释器会引发错误:

But then, no quotes are inserted, and hence, js interpreter throws an error:

var helloWorld = Hello, world;

这就是为什么我终于应用了自定义过滤器的原因.一个有效的示例如下.

That's why I have finally applied a custom filter. A working example would be as follows.

hello_world.html:

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>

app.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()

希望这会有所帮助！

这篇关于js中的Flask-Babel本地化字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！