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.

Accessibility¶

Weblate targets WCAG 2.2 Level AA for new and changed user-facing functionality where practical. Use semantic HTML and Bootstrap components before adding custom interaction code.

When changing the frontend:

Make all interactive controls reachable and usable with a keyboard.
Keep focus order logical and preserve visible focus styling.
Prefer native buttons, links, inputs, selects, and tables over custom widgets.
Associate every form control with a label, help text, and validation errors where applicable.
Do not use color, icon shape, or position as the only way to convey state.
Announce dynamic status changes that are not otherwise visible to assistive technology.
Respect reduced-motion preferences for animation or scrolling behavior.
Test changed workflows with keyboard-only navigation and, when practical, a screen reader spot check.

User interface conventions¶

Documentation links¶

Use the information icon for contextual links to the Weblate documentation instead of a textual Documentation button. In Django templates, use the documentation_icon template tag so that the link has consistent styling, labeling, and external-link behavior. Documentation icons are interactive links and have to remain keyboard-focusable. Keep textual documentation links when they are part of explanatory prose rather than a contextual action.

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:

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

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