Weblate CDN을 사용한 HTML 및 JavaScript 번역¶

Weblate 4.2부터 자바스크립트 현지화 CDN 애드온을 사용해 JavaScript 및 HTML 현지화를 CDN으로 내보낼 수 있습니다. JavaScript 로더 없이 번역 파일을 게시하려면 번역 파일 CDN 를 사용하세요.

참고

이 기능은 Hosted Weblate에 구성되어 있습니다. 사용자의 설치에는 추가 구성이 필요합니다. LOCALIZE_CDN_URL 및 LOCALIZE_CDN_PATH 를 참조하세요. 현지화 CDN 도 참조하세요.

구성요소에 설치하면 JavaScript 현지화 애드온이 커밋된 번역(지연 커밋 참조)을 CDN으로 푸시하며, 이를 웹 페이지 현지화에 사용할 수 있습니다.

구성요소 생성¶

먼저 문자열을 보유할 단일 언어 구성요소를 만들어야 합니다. 일반적인 지침은 번역 프로젝트 및 구성요소 추가 를 참조하세요.

원문 언어 기존 저장소(예: HTML 파일이 포함된 저장소)가 있는 경우, 저장소에서 해당 원문 언어에 대한 빈 JSON 파일을 생성합니다(예: locales/en.json 참조). 내용은 빈 객체를 나타내기 위해 {} 이어야 합니다. 이 파일이 있으면 저장소를 Weblate로 가져와서 애드온 구성을 시작할 수 있습니다.

힌트

기존 번역이 있는 경우 언어 JSON 파일에 넣으면 Weblate에서 사용됩니다.

기존 저장소를 사용하지 않으려는 경우 (또는 없는 경우) 구성요소를 만들 때 처음부터 시작 을 선택하고 파일 형식으로 JSON file 을 선택하세요 (이 시점에서는 단일 언어 형식을 선택해도 됩니다).

Weblate CDN 애드온 구성¶

자바스크립트 현지화 CDN 애드온은 몇 가지 구성 옵션을 제공합니다.

번역 임계값: 이 임계값을 초과하여 번역된 번역이 CDN에 포함됩니다.
CSS 선택자: HTML 문서의 어떤 문자열이 번역 가능한지 구성합니다 ( Weblate CDN 문자열 추출 및 Weblate CDN을 사용한 HTML 현지화 참조).
언어 쿠키 이름: 사용자가 선택한 언어가 포함된 쿠키의 이름. Weblate CDN을 사용한 HTML 현지화 의 JavaScript 코드 조각에서 사용됩니다.
HTML 파일에서 문자열 추출: Weblate가 번역 가능한 문자열을 찾아 번역을 제공할 저장소의 파일 또는 URL 목록 ( Weblate CDN 문자열 추출 참조).

Weblate CDN 문자열 추출¶

번역 문자열이 Weblate에 있어야 합니다. 수동으로 관리하거나, API를 사용하여 생성하거나, HTML 파일에서 문자열 추출 에 파일 또는 URL을 나열하면 Weblate가 자동으로 추출합니다. 파일은 저장소에 있거나 Weblate가 정기적으로 다운로드하고 파싱하는 원격 URL을 포함해야 합니다. 원격 URL은 리디렉션 대상을 포함하여 ALLOWED_ASSET_DOMAINS 에 의해 제한됩니다.

CSS selector 의 기본 구성은 CSS 클래스 l10n 이 있는 요소를 추출합니다. 예를 들어 다음 코드 조각에서 두 개의 문자열을 추출함:

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

기존 코드를 수정하지 않으려는 경우 선택자로 * 를 사용하여 모든 요소를 처리할 수도 있습니다.

참고

현재 요소의 텍스트만 추출됩니다. 이 애드온은 요소 속성이나 자식이 있는 요소의 현지화를 지원하지 않습니다.

Weblate CDN을 사용한 HTML 현지화¶

HTML 문서를 현지화하려면 weblate.js 스크립트를 로드해야 합니다:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

로드 시 CSS selector 구성에 따라 일치하는 모든 번역 가능한 요소를 자동으로 찾아 텍스트를 번역으로 바꿉니다.

사용자 언어는 구성된 쿠키에서 감지되며 브라우저에 구성된 사용자 선호 언어로 폴백됩니다.

Language cookie name 은 다른 애플리케이션과의 통합에 유용할 수 있습니다 (예: Django를 사용할 때 django_language 선택).

JavaScript 현지화¶

개별 번역은 CDN 아래 이중 언어 JSON 파일로 제공됩니다. 가져오려면 다음 코드를 사용할 수 있음:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

이 경우 실제 현지화 로직을 구현해야 합니다.

번역 파일 게시¶

번역 파일 CDN 애드온은 번역 파일을 CDN에 직접 게시합니다. JavaScript 로더를 생성하거나 번역을 이중 언어 JSON으로 변환하지 않습니다.

단일 파일 번역은 언어 코드와 원래 파일 확장자를 사용해 이름이 지정됩니다. 예: cs.json 또는 de.po. 다중 파일 번역은 번역 디렉터리 기준 상대 경로를 사용하여 언어 코드 아래에 제공됩니다. 단일 언어 구성요소는 원문 언어 파일을 포함하고, 이중 언어 구성요소는 대상 언어 파일만 게시합니다. 안전한 서버 설정은 현지화 CDN 를 참조하세요.