Weblate 前端

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

支持的浏览器

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

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

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

依赖项管理

Installing and managing 3rd party libraries in the client of a django project can be a bit tricky. This document provides a step-by-step guide on how to install and manage 3rd party libraries used by the client side of Weblate using Webpack.

Prerequisites

Before proceeding with an installation, make sure you have the following prerequisites:

  • Node.js.

  • Yarn package manager installed on your system.

  • Run cd client.

  • Run yarn install

1- Installation

To install a library, 1st run the following command:

yarn add lib

2- Importing the Library

Then, there are two ways to import the library:

  1. If it is a project-wide library (it is used/needed in all/most pages):

    • Import the library in src/main.js.

  2. If it is page-specific library (library is used in a specific page or template):

    • Create a new file named src/<lib-name>.js.

    • Import the library in it.

    • Add an entry in webpack.config.js: <lib-name>: "src/<lib-name>.js".

    Note: Replace <lib-name> with the actual name of the 3rd party library.

3- Building the Library

Build the libraries used by the project, run the following command:

yarn build

4- Including the Library

Now the library is built and ready for use. To include it follow these steps:

  1. If the library was imported in src/main.js, no further steps are required (as it is already included in base.html).

  2. If the library was imported in its specific file src/<lib-name>.js, in weblate/templates` use the include tags to link to the built static JavaScript file:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

代码风格

Weblate relies on Biome for formatting and linting the JavaScript and CSS 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'

参见

Django 文档中的翻译主题

图标

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

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