Weblate 前端#

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

Supported browsers#

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

不明確支援使用最新版的 WebKit、Blink 或 Gecko的替換瀏覽器,無論是否直接還是通過平台的 web 視圖 API。然而,Weblate應該(在多數情況下)頁在這些瀏覽器中正常顯示並工作。

其它瀏覽器也能工作,但一些特性會受到限制。

相依性管理#

yarn 軟體包管理器用於更新第三方庫。組態在:file: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'

也參考

django文件中的翻譯主題

Icons#

Weblate 目前使用 material design 圖標。如果您想找新的符號,檢查 Material Design IconsMaterial Design Resources

此外,有 scripts/optimize-svg 來減小 SVG 的大小,因為多數圖標嵌入在 HTML 中,而使路徑有風格。