Weblate 前端#

前端目前是使用 Bootstrap、jQuery 和少量第三方库构建的。

支持的浏览器#

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

不明确支持使用最新版 WebKit、Blink 或 Gecko 内核的替代浏览器,无论是直接使用还是通过平台的 web view API。但是,Weblate 应该(在大多数情况下)能在这些浏览器中正常显示和运行。

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

依赖项管理#

yarn 软件包管理工具用于更新第三方库。配置在 scripts/yarn 中,并且有个打包脚本 scripts/yarn-update 来更新库、构建它们,并复制到 weblate/static/vendor 中的正确位置上,所有的第三方前端代码都位于此目录。Weblate 特定的代码应该直接放在 weblate/static 或特性相关的子目录中(例如 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 relies on Prettier for the code formatting for CSS files and Biome for formatting and linting the JavaScript code.

本地化#

如果在前端代码中需要任何用户可见的文本,那么应该将其本地化。在多数情况下,所有需要的是将文本打包到 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'

图标#

Weblate 目前使用 material design 图标。如果你正在找新符号,请查看 Material Design IconsMaterial Design Resources

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