• UIKit
  • SDK
  • 서버 API
Chat/
UIKit/
Web/
UIKit
  • 개요
  • 설치
    • TUIKit
      • React
      • Vue
    • TUIChat만
      • React
      • Vue
  • Features
    • 반응
    • 읽음 확인
    • 입력 상태
    • 사용자 온라인 상태
    • Message Search
    • Quote Reply
    • Voice Message To Text
    • Translate Message
  • 주제
    • UI 스타일 설정
      • Web
      • 모바일
  • 맞춤화
    • 메시지 맞춤화
    • Customize Emoji and Stickers
  • 현지화
  • Guideline for Beginners
  • 콘솔 안내
    • 애플리케이션 생성 및 업그레이드
    • 기본 구성
    • 기능 구성
    • 계정 관리
    • 그룹 관리
    • 콜백 구성
  • 제품 소개
    • 메시지 관리
      • 1대1 메시지
      • 메시지 저장
      • 오프라인 푸시
      • 그룹 메시지
      • 메시지 포맷
    • 계정 시스템
      • 로그인 인증
      • 온라인 상태 관리
    • 그룹 관련
      • 그룹 시스템
      • 그룹 관리
    • 사용자 정보 및 관계망
      • 정보 관리
      • 관계망 관리
  • 구매 가이드
    • 과금 개요
    • 가격
  • 에러코드
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

현지화

Description

Note:
Advanced international multilingual capabilities have significant improvements and changes in @tencentcloud/chat-uikit-vue v2.0.0 version and onwards.
This document demonstrates the usage of the new version. Please make sure your project dependency of @tencentcloud/chat-uikit-vue is ≥ v2.0.0.
The Vue TUIKit on Web & H5 platforms comes standard with Simplified Chinese and English language packs, serving as the display language for the interface.
According to the guide in this document, you can either utilize the default language pack or the advanced customization aspects of internationalization, which include adding new languages, new terms, or modifying existing translations.


Utilizing the Built-in Language and Lexicon

If your App requires only English/Simplified Chinese, and there's no need for new entries or modifications to the existing translations, please refer to this section.
Note:
More language support will be available in the future, stay tuned!

Specify Display Language

To set a specific language for the TUIKit interface, you must invoke the following code when initializing the App.
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
// change language to chinese
TUITranslateService.changeLanguage("zh");
// change language to english
TUITranslateService.changeLanguage("en");

Real-Time Dynamic Modification

When you opt for TUITranslateService.changeLanguage to switch languages, your current language won't be updated instantly, you need to refresh the page for the changes to take effect.
You are able to achieve real-time dynamic modification and display of language by switching the page/component key.
For example, real-time dynamic switching of TUIConversation language:
<template>
<div class="home">
<div class="button-container">
<div class="button" @click="changeLanguage('en')">English</div>
<div class="button" @click="changeLanguage('zh')">Simplified Chinese</div>
</div>
<div class="conversation-container">
<TUIConversation :key="locale" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
import { TUIConversation } from "./TUIKit";
const locale = ref("zh");
const changeLanguage = (language: string) => {
TUITranslateService.changeLanguage(language).then(() => {
locale.value = language;
});
};
</script>
<style scoped lang="scss">
.home {
width: 400px;
.button-container {
display: flex;
flex-direction: column;
.button {
margin: 10px;
background-color: #006eff;
color: #ffffff;
text-align: center;
padding: 5px;
border-radius: 30px;
cursor: pointer;
}
}
}
</style>

Custom language entries

Add Language Entry

If you need to expand or modify the Simplified Chinese, English language pack entries, you can add or modify entries in the src/TUIKit/locales directory.
Locales entries are divided into two parts, with the 'en' directory containing the English entries, and the 'zh_cn' directory containing Simplified Chinese entries.
Note:
If you need to use Simplified Chinese, English, when adding or modifying entries, please be sure to synchronize changes in the 'en' and 'zh_cn' folders under the same subdirectories.
The directory structure for the 'locales' term package is outlined in the following diagram:


Language term usage

Here the TUITranslateService.t() is used for term translation. More information about this interface can be found in TUITranslateService.
<template>
<div>{{TUITranslateService.t("TUIChat.${yourLocaleKey}")}}</div>
</template>
<script setup lang="ts">
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
</script>

Contact us

Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.