Weblate 前端

前端当前使用 Bootstrap、jQuery 和一些第三方库来构建。

支持的浏览器

Weblate 支持所有主要浏览器和平台的最新的、稳定的版本。

不明确支持使用最新版的 WebKit、Blink 或 Gecko的替换浏览器，无论是否直接还是通过平台的 web 视图 API。然而，Weblate应该（在多数情况下）页在这些浏览器中正常显示并工作。

其它浏览器也能工作，但一些特性会受到限制。

依赖性管理

The yarn package manager is used to update third party libraries. The configuration lives in scripts/yarn and there is a wrapper script scripts/yarn-update to upgrade the libraries, build them and copy to correct locations in weblate/static/vendor, where all third partly frontend code is located. The Weblate specific code should be placed directly in weblate/static or feature specific subdirectories (for example weblate/static/editor).

添加了新的第三方库，典型包括：

# Add a yarn package
yarn --cwd scripts/yarn add PACKAGE
# Edit the script to copy package to the static folder
edit scripts/yarn-update
# Run the update script
./scripts/yarn-update
# Add files to git
git add .

编码风格

Weblate 依赖于 Prettier 来进行JavaScript 和 CSS 文件的代码格式化。

我们还是用 ESLint 来检查 JavaScript 代码。

本地化

如果在前端代码中需要任何用户可见的文本，那么应该将其本地化。在多数情况下，所有需要的是将文本打包到 gettext 函数内部，但也有更复杂的特性来使用：

document.write(gettext('this is to be translated'));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext('literal for the singular case',
        'literal for the plural case', object_count);

fmts = ngettext('There is %s object. Remaining: %s',
        'There are %s objects. Remaining: %s', 11);
s = interpolate(fmts, [11, 20]);
// s is 'There are 11 objects. Remaining: 20'

参见

Translation topic in the Django documentation

图标

Weblate 目前使用 material design 图标。如果你想找新的符号，检查 Material Design Icons 或 Material Design Resources。

此外，有 scripts/optimize-svg 来减小 SVG 的大小，因为多数图标嵌入在 HTML 中，而使路径有风格。