Weblate ön yüzü

Ön yüz şu anda Bootstrap, jQuery ve birkaç üçüncü taraf kitaplığı kullanılarak oluşturulmuştur.

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

Bir Django projesinin istemcisine 3. taraf kitaplıklar kurmak ve yönetmek biraz zor olabilir. Bu bölümde, Webpack kullanarak Weblate istemci tarafından kullanılan 3. taraf kitaplıkların nasıl kurulacağı ve yönetileceği ile ilgili bilgiler bulunur.

Ön koşullar

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

  • A supported Node.js release.

  • Sisteminizde kurulu yarn paket yöneticisi.

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

  • Run yarn install --check-files.

Kurulum

Bir kitaplığı kurmak için öncelikle şu komutu yürütün:

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 bir <lib-name>LicenseTransfrom işlevi 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 Durağan 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 relies on Biome for formatting and linting the JavaScript and CSS code. Django templates are formatted and linted separately by djade and djlint.

Yerelleştirme

Ön yüz kodunda kullanıcı tarafından görülebilecek herhangi bir metne gerek duyuyorsanız, bu yerelleştirilebilir olmalıdır. Çoğu durumda yalnızca, metninizi gettext işlevinin içine kaydırmanız yeterlidir. Ancak kullanılabilecek daha karmaşık özellikler de vardır:

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 buraya bakın.

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.