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 belge, Webpack kullanarak Weblate istemci tarafından kullanılan 3. taraf kitaplıkların nasıl kurulacağı ve yönetileceği ile ilgili yol gösterir.

Ön koşullar

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

  • Node.js.

  • Sisteminizde kurulu Yarn paket yöneticisi.

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

  • yarn install komutunu yürütün

1- Kurulum

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

yarn add lib

2- 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.

  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ığı oluşturduğunuz dosyanın içine aktarın.

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

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

3- Kitaplığı oluşturmak

Projenin kullandığı kitaplıkları derleyin ve şu komutu yürütün:

yarn build

4- 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

Ö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, 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.