使用 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));
在这种情况下需要采用实际的本地化逻辑。