웹사이트에 다국어를 추가하는 가장 쉬운 방법

13350 단어 webdevreactjavascriptbeginners
웹사이트를 확장하려면 사이트에 여러 언어 지원을 추가하여 언어가 장벽이 되지 않도록 하는 것이 좋습니다.

이제 이것은 정말 어렵고 복잡하게 들릴지 모르지만 tolgee.io 정말 쉽게 만듭니다. 말 그대로 10분 안에 다국어 웹사이트를 만들 수 있습니다. 그리고 프레임워크에 독립적입니다. 따라서 React , Vue JS 또는 원하는 프레임워크와 함께 사용할 수 있습니다. 그러나 이 기사에서는 바닐라 JavaScript 프로젝트와 함께 사용하는 방법을 볼 것입니다.

그래서 10가지 간단한 단계로 그 작업을 수행하는 방법을 보여 드리겠습니다.
1) 따라서 먼저 tolgee.io에서 계정을 만들어야 합니다.

2) 그런 다음 앱으로 이동을 클릭한 다음 추가를 클릭합니다.


3) 그런 다음 프로젝트/웹사이트의 이름을 입력해야 합니다. 그리고 웹사이트에 추가할 언어를 선택합니다.

4) 프로젝트를 클릭합니다. 해당 언어로 표시하려는 텍스트를 추가하십시오.
부담없이 사용 Google translate.
키는 변수처럼 이름을 지정해야 합니다.


5) 그런 다음 통합을 클릭하고 이 경우 JS가 될 프레임워크를 선택하고 API 키를 만듭니다. 그리고 당신이 그것을 복사했는지 확인하십시오. 우리는 잠시 후에 그것을 필요로 할 것입니다.


6) 이제 드디어 코딩 부분에 대한 준비가 되었습니다. 따라서 index.html을 만들고 그 안에 링크https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js를 넣습니다. Tolgee SDK용 CDN입니다.

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>
</body>
<script src="https://unpkg.com/@tolgee/core/dist/tolgee.umd.min.js"></script>
</script src="main.js"></script>
</html>

이상한 구문이 있습니다. %-%welcome_message%-% 및 %-%msg_long%-%는 무엇입니까? 이것들은 우리가 정의한 키일 뿐입니다. 이들은 우리가 정의한 실제 텍스트를 준수합니다.

7) 이제 main.js에서 tolgee 앱을 초기화해야 합니다.

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "The_API_key_You_coped",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run()

여기에서 inputPrefix와 inputSuffix는 기본적으로 우리 키가 감싸는 문자입니다. Vue JS에서는 중괄호에 이중 집합을 사용하고 반응에 단일 집합을 사용합니다. 그래서 우리는 여기서 비슷한 일을 하고 있습니다. 단지 데이터가 tolgee에서 오는 것뿐입니다.
이제 라이브 서버에서 index.html을 열면 이전에 tolgee 프로젝트에서 정의한 텍스트를 볼 수 있습니다.

8) 그러나 잠시 동안 이러한 표현식이 컴파일되지 않은 것을 볼 수 있습니다.
우리는 사용자가 그것을 보는 것을 원하지 않습니다. 그래서 그들을 숨기려면 전체 화면 로더를 구현할 수 있습니다.

    <div class="loader" style="height: 100vh">Loading</>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>




const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
});
tg.run().then(() => {
    //Hide the loader after tolgee has ran
    document.querySelector(".loader").style.display = "none"
})

9) 이제 사용자가 드롭다운 목록에서 언어를 선택할 수 있기를 원하며 그에 따라 웹 페이지의 언어가 변경되어야 합니다. 이를 위해 먼저 html 문서에서 선택 항목을 만들 수 있습니다.

    <select class="lang-select">
        <option value="en">Englis</option>
        <option value="hi">Hindi</option>
        <option value="zh-Hans">Chienese (Simplified.)</option>
    </select>
    <h1>%-%welcome_message%-%</h1>
    <div>%-%msg_long%-%</div>

10) 이제 마지막으로 자바스크립트에서 사용자가 언어를 선택하면 그에 따라 콘텐츠를 번역할 언어를 선택합니다.

const tg = new window["@tolgee/core"].Tolgee({
    apiUrl: "https://app.tolgee.io",
    apiKey: "71mpth0erv28oidqrt14d8l01e",
    inputPrefix: "%-%",
    inputSuffix: "%-%",
    watch: true
})
tg.run()

let langs = document.querySelector(".lang-select")
langs.addEventListener("change", (e) => {
    //Changing the language of our page
    tg.lang = e.target.value
})



그리고 이제 JavaScript와 Tolgee를 사용하여 다국어 웹사이트를 성공적으로 만들었습니다.

최종 생각:


  • Tolgee는 초보자에게 친숙하고 사용하기 쉽습니다.
  • 우리는 표면만 만졌을 뿐, Tolgee가 할 수 있는 일은 훨씬 더 많습니다. 예를 들어 페이지 추가 및 tolgee UI를 사용한 번역 편집 편집
  • 번역을 프로덕션용 JSON으로 내보낼 수 있습니다. preparing for production 팁 보기

    • 따라서 문서를 확인하고Tolgee 기술 수준을 높이십시오. 저에게 적극 추천합니다.


    .ltag__user__id__728097 .follow-action-button {
    배경색: #000000 !중요;
    색상: #ffffff !중요;
    테두리 색상: #000000 !중요;
    }



    팔로우



    Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace
    Config 관리 도구가 왜요?2021 Ver
    코드 효율을 높이는python 기술 10개

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage