Weblate 前端

前端目前使用 Bootstrap、jQuery 和一些第三方庫來建置。

Supported browsers

Weblate 支援所有主要瀏覽器和平台的最新的、穩定的版本。

不明確支援使用最新版的 WebKit、Blink 或 Gecko的替換瀏覽器，無論是否直接還是通過平台的 web 視圖 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 中，而使路徑有風格。