[티스토리] 티스토리에 다국어 적용(구글 번역기)

목차

티스토리에 다국어 적용(구글 번역기)👨‍👨‍👧‍👧

어제 티스토리에 구글 번역기를 추가했고 그 내용을 기록한다.

---

구글 웹사이트 번역기(google Translate)에서 나와 같은 신규 사용자에게는 제공하지 않는다고 한다.😔

구글링 해서 코드를 찾았고 코드는 아래와 같다.

<!-- 구글 번역 시작(모든 언어) --> 
<div id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
	function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: false}, 'google_translate_element');}
</script>
<!-- // 구글 번역 종료(모든 언어) -->

 

위 코드를 메뉴에 넣으면 된다.

블로그 관리자 > 꾸미기 > 스킨 편집 > html 편집

스킨마다 다르겠지만 나 같은 경우는 치환자 ##_blog_menu_##위에 넣었다.

(참고로 난 베이스캠프 스킨이다.)

저렇게 그 후 반드시 상단의 적용을 눌러야 된다.

구글 번역기를 적용을 한 모습은 아래와 같다.

난 "Google 번역에서 제공" 이라는 문구를 삭제, 원하는 언어만 표출하도록 수정했고 아래는 코드다.

<!-- 한국어, 영어, 일본어만 --> 
<!-- 구글 번역 시작 -->
<div id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'ko', 
    	// google 번역에서 제공 숨김
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
        // 한국어, 영어, 일본어만 표출
        includedLanguages : 'ko,en,ja'},
        'google_translate_element');
}
</script>
<!-- 구글 번역 종료 -->

 

기존코드와 달라진 점은 아래와 같다.

includedLanguages값에 해당되는 언어코드는 아래 사이트를 참조

언어 지원  |  Cloud Translation  |  Google Cloud

위 코드로 적용한 최종모습은 아래와 같다.

영어로 번역한 모습

일어로 번역한 모습

참조 : 어포스트, 2021.05.28, https://blogpack.tistory.com/955