Weblate 프런트엔드¶

프런트엔드는 현재 Bootstrap, jQuery 및 몇 가지 타사 라이브러리를 사용하여 구축되었습니다.

지원 브라우저¶

Weblate는 모든 주요 브라우저 및 플랫폼의 최신 안정 릴리스를 지원합니다.

직접 또는 플랫폼의 웹 뷰 API를 통해 최신 버전의 WebKit, Blink 또는 Gecko를 사용하는 대체 브라우저는 명시적으로 지원되지 않습니다. 그러나 Weblate는 대부분의 경우 이러한 브라우저에서도 올바르게 표시되고 작동해야 합니다.

이전 브라우저도 작동할 수 있지만 일부 기능이 제한될 수 있습니다.

접근성¶

Weblate는 실용적인 범위에서 새로 추가되거나 변경된 사용자 대상 기능에 대해 WCAG 2.2 Level AA를 목표로 합니다. 사용자 지정 상호작용 코드를 추가하기 전에 의미론적 HTML과 Bootstrap 구성요소를 사용하세요.

프런트엔드를 변경할 때:

모든 상호작용 컨트롤을 키보드로 접근하고 사용할 수 있게 만드세요.
초점 순서를 논리적으로 유지하고 보이는 초점 스타일을 보존하세요.
사용자 지정 위젯보다 기본 버튼, 링크, 입력, 선택, 테이블을 우선하세요.
적용 가능한 경우 모든 양식 컨트롤을 라벨, 도움말 텍스트, 유효성 검사 오류와 연결하세요.
상태를 전달하는 유일한 방법으로 색상, 아이콘 모양 또는 위치를 사용하지 마세요.
보조 기술에 다른 방식으로 보이지 않는 동적 상태 변경을 알리세요.
애니메이션이나 스크롤 동작에서는 동작 줄이기 환경설정을 존중하세요.
변경된 워크플로를 키보드 전용 탐색으로 테스트하고, 실용적인 경우 스크린 리더로 간단히 확인하세요.

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.

의존성 관리¶

Django 프로젝트의 클라이언트 에서 타사 라이브러리를 설치하고 관리하는 것은 약간 까다로울 수 있습니다. 이 섹션에서는 Webpack 을 사용하여 Weblate의 클라이언트 측 에서 사용하는 타사 라이브러리를 설치하고 관리하는 단계별 가이드를 제공합니다.

전제 조건¶

설치를 진행하기 전에 다음 전제 조건을 확인하세요:

지원되는 Node.js 릴리스.
시스템에 yarn 패키지 관리자가 설치되어 있어야 합니다.
cd client 를 실행하세요.
yarn install --check-files 를 실행하세요.

설치¶

라이브러리를 설치하려면 먼저 다음 명령을 실행하세요:

yarn add <lib-name>

라이브러리 가져오기¶

그런 다음 라이브러리를 가져오는 두 가지 방법이 있음:

프로젝트 전체 라이브러리인 경우 (모든/대부분의 페이지에서 사용/필요):
- src/main.js 에서 라이브러리를 가져옵니다.
- 필요한 경우 전역 범위에서 선언합니다.
페이지별 라이브러리인 경우 (특정 페이지 또는 템플릿에서 사용되는 라이브러리):
- src/<lib-name>.js 라는 새 파일을 만듭니다.
- 라이브러리를 가져옵니다. 그런 다음 window 객체에 주입하여 전역적으로 접근할 수 있도록 합니다.
- webpack.config.js 에 항목을 추가함: <lib-name>: "src/<lib-name>.js".
- webpack.config.js 의 mainLicenseTransform 에서 excludePrefixes 배열에 라이브러리 이름을 추가합니다.
- webpack.config.js 의 plugins 배열에서 LicensePlugin 의 additionalFiles 에 라이선스 파일 이름을 추가합니다.
- 이전 단계에서 도입된 라이선스 파일에 대한 <lib-name>LicenseTransform 함수를 만들고 사용합니다.
참고: <lib-name> 을 타사 라이브러리의 실제 이름으로 바꾸세요.

라이브러리 빌드¶

다음 명령을 실행하여 프로젝트에서 사용하는 라이브러리를 빌드함:

yarn build

라이브러리 포함¶

이제 라이브러리가 빌드되어 사용할 준비가 되었습니다. 포함하려면 다음 단계를 따르세요:

라이브러리가 src/main.js 에서 가져온 경우 추가 단계가 필요하지 않습니다 (base.html 에 이미 포함되어 있으므로).
라이브러리가 특정 파일 src/<lib-name>.js 에서 가져온 경우 weblate/templates 에서 include 태그를 사용하여 빌드된 정적 JavaScript 파일에 연결함:

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

코딩 스타일¶

Weblate는 JavaScript 및 CSS 코드의 포맷팅과 린팅에 Biome 을 사용합니다. Django 템플릿은 djade 및 djlint 로 별도로 포맷팅하고 린팅합니다.

현지화¶

프런트엔드 코드에서 사용자에게 보이는 텍스트가 필요한 경우 현지화 가능해야 합니다. 대부분의 경우 텍스트를 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 문서의 번역 주제

아이콘¶

Weblate는 현재 Material Design Icons 를 사용합니다. 새 심볼을 찾고 있다면 여기를 확인하세요.

또한 대부분의 아이콘이 경로 스타일링을 허용하기 위해 HTML 내에 포함되어 있으므로 SVG 크기를 줄이는 scripts/optimize-svg 가 있습니다.