使用 Weblate CDN 翻译 HTML 和 JavaScript#

从 Weblate 4.2 开始能够使用 JavaScript 本地化 CDN 附加组件将本地化导出到 CDN。

备注

此功能在 Hosted Weblate 上是配置好的。它需要在安装时进行额外的配置,见 LOCALIZE_CDN_URLLOCALIZE_CDN_PATH

在安装到您的部件后,它会将已提交的翻译(请参见 惰性提交)推送到 CDN,这些翻译可以在您的网页中用于本地化。

创建部件中#

首先您需要新建单语言部件,它将保持您的字符串,其一般指示请参见 添加翻译项目和部件

在您已有仓库来开始的情况下(例如一个包含 HTML 文件的仓库),在仓库中为源语言新建空的 JSON 文件(请参见 源语言),例如 locales/en.json。内容应该是``{}``,来指示空的对象。一旦具有了它,仓库就可以导入到 Weblate 中,而您可以通过配置附加组件来开始。

提示

在您已有翻译的情况下,您可以将其放置在语言 JSON 文件中,而那些将在 Weblate 中使用。

对于那些不想要使用(或不具有)现有仓库的人,当新建部件时选择 Start from scratch,并选择 JSON file 作为文件格式(这是选择任何单语言格式都可以)。

配置 Weblate 内容分发网络附加组件#

JavaScript 本地化 CDN 附加组件提供了一些配置选项。

译文阈值

在这个阈值之上的翻译将包含在 CDN 中。

CSS 选择器

配置 HTML 文档中的哪些字符串是可翻译的,请参见 Weblate 内容分发网络的字符串提取使用 Weblate 内容分发网络对 HTML 进行本地化操作

语言 cookie 名称

包含用户所选择的语言的 cookie 的名称。在JavaScript 代码段中用于 使用 Weblate 内容分发网络对 HTML 进行本地化操作

从 HTML 文件中提取字符串

仓库中文件的列表,或 Weblate 寻找可翻译字符串并提供它们用于翻译的 URLs,请参见 Weblate 内容分发网络的字符串提取

Weblate 内容分发网络的字符串提取#

翻译字符串必须在 Weblate 中出现。你可以手动管理这些字符串,使用 API 来创建它们,或者使用 从 HTML 文件中提取字符串 列出文件或 URL,Weblate 将自动提取这些字符串。这些文件必须出现在仓库中,或者包含 Weblate 将定期下载和解析的远程 URL。

CSS 选择器 的默认配置是提取 CSS 类为 l10n 的元素,例如它会从以下代码片段中提取两条字符串:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

在不想修改现有代码的情况下,还可以使用 * 作为选择器处理所有元素。

备注

目前只有元素的文本被提取。这个附加组件不支持元素属性或具有子类的元素的本地化。

使用 Weblate 内容分发网络对 HTML 进行本地化操作#

为了将 HTML 文档本地化,需要加载 weblate.js 脚本:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

加载时,会自动发现所有匹配的翻译元素(基于 CSS selector ),并用翻译替换其文本。

从配置的 cookie 检测到用户语言,并退回到在浏览器中配置的用户首选语言。

Language cookie name 可以用于与其它应用集成(例如当使用 Django 时选择 django_language)。

JavaScript本地化#

单独的翻译在内容分发网络下暴露为双语 JSON 文件。要获取一个,你可以使用以下代码:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

在这种情况下需要采用实际的本地化逻辑。