Django国际化：JS控制弹窗翻译不生效，如何关联locale文件？

问题说明 #

在mysite项目的main应用中，使用Django国际化功能时，页面静态文本翻译正常，但JavaScript控制显示的弹窗内容无法读取po文件中的翻译内容。已配置jsi18n路由并引入脚本，但不清楚如何将locale文件关联到JavaScript Catalog。

已完成配置 #

项目级URL配置 #

urlpatterns += i18n_patterns(
    path('', include("main.urls")),
    #add for i18n translation for javascript content
    path("jsi18n/", JavaScriptCatalog.as_view(), name="javascript-catalog"),
)

base.html配置 #

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

应用级模板及脚本 #

<div class="form-popup" id="myForm{{ model.id }}">
    <form action="{% url 'url' %}" class="show-venue-popup-container" method="post">
        {% csrf_token %}
        <h5 class="show-venue-popup-title">{% translate 'text to be translated_0!' %}</h5>
        <p class="show-venue-popup-text">{% translate 'text to be translated_1' %}</p>
        <button type="submit" class="btn">{% translate 'text to be translated_2' %}</button>
        <button type="button" class="btn cancel" onclick="closeForm('{{ model.id }}')">{% translate 'text to be translated_3' %}</button>
    </form>
</div>

<script>
    // Shows and hides claim window
    // Pop up when user clicks claim starts
    function openForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "block";
    }

    function closeForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "none";
    }

    // Pop up when user clicks claim ends
    function displayTab(containerId) {
        const tab = document.querySelector(containerId);
        const isOpen = !tab.classList.contains('hide');

        const allTabs = document.querySelectorAll('.tab-container');
        allTabs.forEach(container => {
            container.classList.add('hide');
            Array.from(container.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.add('hide');
                section.style.display = 'none';
            });
        });

        if (!isOpen) {
            tab.classList.remove('hide');
            Array.from(tab.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.remove('hide');
                section.style.display = 'flex';
            });
        }
    }
</script>

locale/language/django.po配置 #

#: .\main\templates\template
msgid "text to be translated_0!"
msgstr "xxxx"

解决步骤 #

1. 确保模板加载i18n标签 #

在使用{% translate %}标签的模板开头添加：

{% load i18n %}

未加载该标签时，{% translate %}不会生效，弹窗文本会保持原始msgid不变。

2. 配置JavaScriptCatalog包含目标应用 #

修改项目级URL配置，为JavaScriptCatalog指定packages参数，确保包含main应用：

path("jsi18n/", JavaScriptCatalog.as_view(packages=['main']), name="javascript-catalog"),

默认情况下，JavaScriptCatalog仅包含Django核心翻译，手动指定应用后，应用内的翻译才能被JS访问（若JS中直接使用翻译函数）。

3. 重新生成并编译翻译文件 #

• 提取所有翻译字符串（覆盖模板和JS场景）：

  python manage.py makemessages -l [你的语言代码] -d django -d djangojs
  

  -d django处理模板中的翻译，-d djangojs处理JS中的翻译。
• 编译翻译文件：

  python manage.py compilemessages
  

  确认locale/[语言代码]/LC_MESSAGES/目录下生成了django.mo和djangojs.mo文件。

4. 适配动态弹窗的JS翻译逻辑 #

如果弹窗是通过JavaScript动态创建（而非模板预渲染），需在JS代码中使用Django提供的翻译函数：

// 示例：动态创建弹窗标题
const popupTitle = document.createElement('h5');
popupTitle.textContent = django.gettext('text to be translated_0!');

5. 验证当前语言设置 #

• 查看页面源代码中jsi18n脚本的URL，确认包含正确的语言前缀（如/zh/jsi18n/）。
• 在视图或模板中输出request.LANGUAGE_CODE，确认语言代码与翻译文件匹配。

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