使用 Weblate CDN 翻译 HTML 和 JavaScript#

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

备注

此功能在 Hosted Weblate 上是配置好的。它需要在安装时进行额外的配置，见 LOCALIZE_CDN_URL 和 LOCALIZE_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));

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