티스토리 블로그 자동 번역 URL 생성하는 방법

예전에 번역 기능은 이미 소개한 적이 있지만 여기서 만족하지 않고 필요에 따라 블로그 링크를 오픈하자마자 바로 번역이 된다면 더욱 유용할 것 같아서 생각해 보았습니다.

 

이를 위해 다음 기능을 먼저 적용하셔야 합니다.

 

티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

 

목차

 

파라미터 파싱 함수 작성

자바스크립트 영역에서 제공하는 파라미터 파싱하는 기능은 따로 없습니다. 따라서 접속한 URL에서 파라미터 부분을 파싱하여 가져 오는 함수를 하나 만들어야 합니다. 다음과 같이 작성해 보도록 하겠습니다.

직접 구현할 수도 있지만 편의상 다른 사람이 이미 만들어 놓은 함수를 하나 가져와 보겠습니다.

function getParameterByName( name ){
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

[출처] https://stackoverflow.com/questions/9501690/javascript-documentation-on-getparameterbyname

 

파라미터에 따른 자동 번역 함수 작성

파라미터 파싱 함수를 이용하여 trans_lang 파라미터를 받아서 파라미터 값에 따라 번역을 수행하는 함수도 다음과 같이 하나 작성해 보겠습니다.

저는 빈 값이나 한국어인 경우에는 실행되지 않도록 작성하였는데 특정 언어만 번역하고 싶은 경우에는 그 언어 코드인 경우만 조건으로 걸어도 될 것 같습니다.

function autoTranslate() {
    var trans_lang = getParameterByName("trans_lang");
    if(trans_lang != "" && trans_lang != "ko") {
        doGTranslate('ko|'+trans_lang);
        return false;
    }
}

 

페이지 로드 시 자동 번역 함수 실행

작성한 autoTranslate 함수를 블로그 로드 직후 수행하는 코드도 작성해야 합니다.

$(document).ready(function() {
    autoTranslate();
});

 

자동 번역 기능 활용 방법

자신의 블로그 주소 뒤에 파라미터를 덧붙이면 됩니다.

예를 들어 링크를 열자마자 일본어로 번역이 되기를 원한다면 https://블로그주소?trans_lang=ja 라고 입력하면 됩니다.

 

자동 번역 기능 확인

제 블로그에 기능을 만들어 적용해 보았습니다. 외국인에게 내 블로그를 보여주고 싶은 경우 다음과 같이 링크를 전달하게 되면 따로 번역 기능을 설명하지 않아도 자동으로 적용되므로 매우 편리하겠죠.

https://sangminem.tistory.com/?trans_lang=ja

 

URL을 실행하면 블로그에 접속하자마자 일본어로 번역된 상태로 보이게 됩니다.

 

결과를 영상으로도 확인해 보겠습니다.

 

유용하게 사용하시길 바랍니다!