Weblate ön yüzü

The frontend is currently built using Bootstrap, jQuery and few third-party libraries.

Desteklenen tarayıcılar

Weblate, tüm bilinen tarayıcıların ve platformların en yeni ve kararlı sürümlerini destekler.

Güncel WebKit, Blink ya da Gecko sürümünü kullanan alternatif tarayıcılar, doğrudan ya da platformun site görünümü API uygulaması üzerinden açıkça desteklenmez. Bununla birlikte, Weblate (çoğu durumda) bu tarayıcılarda da düzgün bir şekilde görüntülenmeli ve çalışmalıdır.

Eski tarayıcılar çalışabilir, ancak bazı özellikler sınırlı olabilir.

Bağımlılık yönetimi

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

Ön koşullar

Kuruluma başlamadan önce aşağıdaki ön koşulları karşıladığınızdan emin olun:

  • Nodejs 14 ya da üzeri sürümü.

  • The yarn package manager is installed on your system.

  • cd client komutunu yürütün.

  • yarn install komutunu yürütün

Kurulum

To install a library, first run the following command:

yarn add <lib-name>

Kitaplığı içe aktarmak

Ardından kitaplığı iki yolla içe aktarabilirsiniz:

  1. Proje geneli bir kitaplık ise (her/çoğu sayfada kullanılıyor/gerek duyuluyorsa):

    • Kitaplığı src/main.js dosyası içine aktarın.

    • Ve bunu (gerekirse) genel kapsamda tanımlayın.

  2. Sayfaya özel bir kitaplık ise (kitaplık belirli bir sayfada veya kalıpta kullanılıyorsa):

    • src/<lib-name>.js adında yeni bir dosya oluşturun.

    • Kitaplığı içe aktarın. Ardından onu genel olarak erişilebilir olması için window nesnesine ekleyin.

    • webpack.config.js dosyasına <lib-name>: "src/<lib-name>.js" kaydını ekleyin.

    • webpack.config.js dosyasında mainLicenseTransform içindeki excludePrefixes dizisine kitaplık adını ekleyin.

    • Lisans dosya adını webpack.config.js dosyasında plugins dizisindeki LicensePlugin içine additionalFiles bölümüne ekleyin.

    • Önceki adımlarda tanıtılan lisans dosyası için <lib-name>LicenseTransfrom işlevini oluşturun ve kullanın.

    Not: <lib-name> yerine 3. Taraf kitaplığın gerçek adını yazın.

Kitaplığı oluşturmak

Projenin kullandığı kitaplıkları şu komutu yürüterek derleyin:

yarn build

Kitaplığı katmak

Böylece kitaplık oluşturuldu ve kullanılmaya hazır. Katmak için şu adımları izleyin:

  1. Kitaplık src/main.js dosyası içine aktarılmışsa, başka bir adıma gerek yoktur (zaten base.html dosyasına eklenmiştir).

  2. Kitaplık src/<lib-name>.js adlı belirli bir dosya içine aktarılmışsa, weblate/templates dosyasında oluşturulan sabit JavaScript dosyasına bağlanmak için include kod imini kullanın:

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

Kodlama biçemi

Weblate, hem JavaScript hem de CSS dosyalarının kod biçimlendirmesi için Biome kullanır.

Yerelleştirme

Should you need any user visible text in the frontend code, it should be localizable. In most cases, all you need is to wrap your text inside gettext function, but there are more complex features available:

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'

Ayrıca bakınız

Django belgelerinde çeviri başlığı

Simgeler

Weblate şu anda material design simgelerini kullanıyor. Yeni simgeler arıyorsanız, Material Design Icons ya da Material Design Resources seçeneğini işaretleyin.

Ek olarak, SVG boyutunu küçültmek için scripts/optimize-svg kullanılır. Çünkü simgelerin çoğu yolların biçemine izin vermek için HTML içine gömülüdür.