如何使用Django国际化工具翻译JS配置中的按钮文本？

我正在基于Django搭建双语网站，前端并非由我开发，且无法联系到原开发者。当前按钮文本定义在如下JS配置中：

const configButton = {
    purchases: {
        attr: 'data-out',
        default: {
            class: 'button_style_blue',
            text: '<span class="icon-plus button__icon"></span>Add to purchase list'
        },
        active: {
            class: 'button_style_light-blue-outline',
            text: '<span class="icon-check button__icon"></span>Recipe in purchase list'
        }
    }
}

解决方案 #

下面提供三种可行的实现方式，无需大幅改动原有代码结构：

1. 将JS配置嵌入Django模板，直接使用翻译标签

把独立的JS配置代码移到模板的<script>标签中，对纯文本部分使用{% trans %}标签，保留HTML结构不变：

<script>
const configButton = {
    purchases: {
        attr: 'data-out',
        default: {
            class: 'button_style_blue',
            text: '<span class="icon-plus button__icon"></span>{% trans "Add to purchase list" %}'
        },
        active: {
            class: 'button_style_light-blue-outline',
            text: '<span class="icon-check button__icon"></span>{% trans "Recipe in purchase list" %}'
        }
    }
}
</script>

之后按Django国际化流程，运行makemessages提取翻译字符串，完成翻译后执行compilemessages生成编译文件即可。

2. 使用Django的JavaScript国际化目录（javascript_catalog）

适合需要保留独立JS文件的场景：

• 在项目urls.py中配置JS翻译路由：

from django.views.i18n import javascript_catalog

urlpatterns = [
    # ... 其他路由
    path('jsi18n/', javascript_catalog, {'packages': ('your_app_name',)}, name='javascript-catalog'),
]

• 在页面模板中引入JS翻译脚本：

<script src="{% url 'javascript-catalog' %}"></script>

• 修改原有JS文件，用gettext()包裹需要翻译的文本：

const configButton = {
    purchases: {
        attr: 'data-out',
        default: {
            class: 'button_style_blue',
            text: '<span class="icon-plus button__icon"></span>' + gettext('Add to purchase list')
        },
        active: {
            class: 'button_style_light-blue-outline',
            text: '<span class="icon-check button__icon"></span>' + gettext('Recipe in purchase list')
        }
    }
}

• 同样执行makemessages和compilemessages完成翻译流程。

3. 模板注入全局翻译变量，让JS读取

如果不想修改原有JS文件，可在模板中先定义全局翻译对象，再让JS配置引用：

• 在模板的<script>中注入翻译：

<script>
window.buttonTranslations = {
    addToPurchase: '{% trans "Add to purchase list" %}',
    inPurchaseList: '{% trans "Recipe in purchase list" %}'
}
</script>
<!-- 引入原有的JS配置文件 -->
<script src="/path/to/your/config.js"></script>

• 修改原JS配置文件，替换文本为全局变量：

const configButton = {
    purchases: {
        attr: 'data-out',
        default: {
            class: 'button_style_blue',
            text: '<span class="icon-plus button__icon"></span>' + window.buttonTranslations.addToPurchase
        },
        active: {
            class: 'button_style_light-blue-outline',
            text: '<span class="icon-check button__icon"></span>' + window.buttonTranslations.inPurchaseList
        }
    }
}

注意事项 #

• 翻译时仅处理纯文本部分，不要包含HTML标签，避免破坏页面结构。
• 若文本包含动态内容，可使用{% blocktrans %}标签处理。
• 确保项目已开启国际化配置（settings.py中USE_I18N = True，并配置LOCALE_PATHS）。

内容的提问来源于stack exchange，提问作者maskalev