Weblate 前端
前端當前使用 Bootstrap、jQuery 和一些第三方庫來構建。
Supported browsers
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'
也參考
django文件中的翻譯主題
Icons
Weblate 目前使用 material design 圖標。如果您想找新的符號,檢查 Material Design Icons 或 Material Design Resources。
此外,有 scripts/optimize-svg
來減小 SVG 的大小,因為多數圖標嵌入在 HTML 中,而使路徑有風格。