Simple Multilingual Blogging with Tabber Javascript

2008/04/28 20:03 / Tech

왜?
나는 처음부터 영어권 친구들과 한국의 방문자들을 위해 동시에 2개국어로 블로그를 운영해보고 싶었다. 그러나 정확히 어떻게 할 지 몰랐었다. 자동 번역은 아예 거들떠 보지도 않고, 일단 한 페이지에 위에는 한국어, 밑에는 영어로 직접 글을 썼다. 하지만 역시 그림등 다른 것들과 함께 작성할때는 둘 중 한 언어로만 읽어보면 좀 어색할 듯한 면이 있었다.

텍스트큐브같은 블로그에서, 시스템 코어 코드를 수정하지 않고도, 간단하게 2개국어로 블로깅을 할 수 있는 방법은? 하고 쭉 생각하던 어느날 기발한 아이디어가 떠올랐으니!

이 블로그에 예전부터 쭉 방문해왔다면 언제부터인가 메인 포스팅 제목 밑에 "사용 가능 언어"라는 문구와, 상황에 따라 "English"와 "한국어"의 옵션이 나타난 것을 발견했을 것이다.

이것이 바로 "태버" 자바스크립트를 이용해 만든 기능이다.

어떻게?
구글에서 "tabber javascript"로 검색한 수많은 결과중 무료이고, 가볍고 단순한 스크립트를 찾아냈다. 내가 선택한 것은 BarelyFitz Designs라는 사이트의 Javascript Tabifier이라는 스크립트였다.

몇분간 예제를 관찰하고 나름대로 연구한 결과 내 블로그에 알맞는 간단한 버전을 만들어 낼 수 있었다.

이 기능은 여러 방법으로 사용할 수 있겠지만, 이 포스팅에서는 텍스트큐브에서 다국어 인터페이스를 만들기 위한 튜토리얼로 설명하겠다.

동작 원리
동작 원리는 꽤나 간단하다. 말 그대로 외부 자바스크립트 파일을 이용해서 본문의 글을 탭으로 그룹해주는 것이다. (자바스크립트 언어는 잘 모르니 정확한 내부 동작 원리는 묻지 마시길. ㅋ)


1. 스크립트 파일 업로드
스크립트 작동에 필요한 파일은 단 하나: 옆의 tabber.js를 다운로드해 스킨 폴더 루트에 업로드한다.

2. 블로그에 코드 삽입
자바스크립트 기능인 만큼, 일단 스킨 (skin.html)의 헤더 부분에 다음 코드를 삽입해야한다:
<script type="text/javascript" src="./tabber.js"></script>

3. 태버 스타일시트 삽입
다음으로 탭이 페이지에 어떻게 나타날지 정해주는 CSS 코드를 메인 스킨 style.css에 삽입해야 한다. 사용 스킨에 따라 색상이나 크기를 바꿔줘야 되지만 일단은 그냥 아래 코드를 복사해서 style.css의 맨 아래 부분에 붙여넣는다:

more..


코드를 복사한 후에는 "Available Languages // 사용 가능 언어" 문구를 표시해주는 이미지 파일도 업로드해주어야 한다.

다음 두 버전중 하나를 선택해서 다운로드 해서, languages.gif로 이름을 바꾼뒤, 사용중인 스킨 폴더의 images 폴더에 업로드 해준다:

기타 스타일 지정은 좀 시행착오를 격으며 해야한다. 자신의 스킨의 색상에 맞춰서 편집해준다. 실제로 "탭"처럼 보이게 테두리를 이용해 스타일링할 수도 있지만, 여기는 단순히 "모드 변경"하는 듯한 느낌으로 오른쪽 정렬 해주고 단순히 링크처럼 호버 이펙트만 주었다.

4. 블로그 본문에 코드 삽입
마지막으로 블로그 글쓰기 모드로 들어가 HTML모드로 전환한 후에 다음 코드를 삽입하면 된다.
아예 서식으로 저장해 놓아서 글 작성할때마다 한번 클릭해서 로드할 수 있게 해 놓는것도 좋은 방법이다.
<div class="tabber">
<div class="tabbertab" title="한국어">
--한국어--
</div>

<div class="tabbertab" title="English">
--English--
</div>
</div>


코드를 붙여넣은 뒤 다시 WYSIWYG모드로 돌아가서, --한국어--부분을 지우고 한글로 글을 쓰고, 밑의 --English--부분엔 영문 버전의 글을 쓰면 된다. 위지윅모드에서는 탭 인터페이스가 보이지 않아서 어디까지가 한글이고 어디까지가 영문인지 보이지 않기 때문에 후에 HTML모드로 전환해 반드시 한글은 한글안에, 영문은 영어안에 있는지 확인해 준다.
여기까지 제대로 따라 했다면 글을 저장하고 블로그 페이지로 돌아가서 보면 탭 인터페이스가 적용된 것을 확인할 수 있을 것이다!

옵션: 다국어 외의 다른 용도로 사용?
이런 포스팅처럼 다국어 모드 전환이 아닌 다른 용도로 쓰고 싶다면,
<div class="nobg"></div><div class="tabber"> ... </div>를 감싸준다.
그러면 "언어 선택" 문구가 없이 탭 인터페이스가 표시되어 2개 이상 여러개의 탭을 사용해도 문제 없이 이용할 수 있다.


User image

다 끝났냐?

User image

끝!! 이게 다임.



* * *

하나 좋은 소식은, 얼마전 배포한 (그유명한;;ㅋ) BlackNoir2 스킨에는 이미 이 기능이 내장 되어 있다. 태버 기능을 사용하기 위해서 해야할 일은 위의 4단계의 코드를 본문에 삽입하는 것 밖에 없다! :)

[알림: 현재 알수 없는 이유로;; 텍스트큐브의 "URLKeeper" 플러그인과 충돌합니다. 둘중 하나는 포기하셔야 할 듯.. orz (한비님 감사합니다^^) ]

PS: 허접한 가이드 죄송합니다. 제가 설명하는데는 좀 서툴러서 ㅜㅜ
PS2: 당연히 XHTML1.0 Transitional /CSS2.1 W3C 웹표준 인증 통과 코드이니 안심하고 사용~
PS3: muhootsaver님, 이 기능 강추입니다!! 후후훗 :P

 
Why do it?
From the very beginning, I wanted to run this blog in two languages: English and Korean at the same time. But I didn't quite know how I could do it, and so I just tried writing in Korean and then write the same thing in English under it. However that way, when posts got longer with pictures and other stuff, it was always awkward looking with for one (translated) language.

And so I kept thinking of how I could make this work, without having to modify the source code of Textcube (this blogging platform)...
...and one day a brilliant idea came to my mind...!

How?
I tried searching Google for a "tabber javascript", and from thousands of results, I picked out a lightweight, free one: Javascript Tabifier from a site called BarelyFitz Designs

After looking at the demo source code and figuring out how it works, I succeeded in setting it appropriate for my "multilingual" purposes.

Of course, this Tabber Javascript can be used in many ways, here I'll just explain how to use this as a Multilingual "switching" interface, and specifically how to do it on Textcube.

How it works...
It's pretty simple. The script just groups parts of the text and displays it as "tabs," hiding one part when the other is showing and vice versa. Since I don't know much about Javascript itself, please don't ask me how exactly the script is made... :P


1. Download the script file
First, download the tabber.js linked on the right and upload it to the skin folder.

2. Insert code into the skin file
Then of course you have to link the script file to the skin file. (skin.html)
<script type="text/javascript" src="./tabber.js"></script>


3. Insert Tabber Stylesheet
Now you have to set the stylesheet which determines how the tabs are gonna look like. You're going to have to modify the width/height/margin etc values depending on the skin you're using, but for now just copypasta the following codes into style.css:

more..


After inserting the code, don't forget uploading the image that displays "Available Languages" in the left. (The ones I have are made for Korean/English, you can always make your own and upload it by your self)

Choose one of the following, and rename it to "languages.gif", and upload it to the "images" folder in the skin folder:

As I said before, you have to modify the CSS to match the skin, but unfortunately it seems like trial-and-error is the best way to do it.

4. Insert code to blog post
Lastly, of course you have to input codes which into the main article, that will determine which part of the text is going to be grouped as a tab. It might be a good idea to copy this and save it as a template, so that later you can load the code right away with just a click.
<div class="tabber">
<div class="tabbertab" title="한국어">
--한국어--
</div>

<div class="tabbertab" title="English">
--English--
</div>
</div>

After inserting the code, go back to WYSIWYG mode, and in place of "--한국어--" you just write in Korean,(or any other language) and in place of "--English--" below, write in English. since in WYSIWYG mode you can't see where the <div> divider ends, check often in HTML mode if your text are where they're supposed to be, that they are correctly grouped.

If you followed till here and did everything right, go back and check to your new post and see how the tabber interface works! :)

Option: Using this for different purposes?
Just like this post I wrote some time before, If you want to use this tabber interface for a different purpose other than Multilanguage, simply enclose <div class="tabber"> ... </div> with <div class="nobg"></div>.
Then the "Choose language" text(image) won't show up so you can put more than 2 tabs with long titles, etc.

User image

Ok so is it done yet?

User image

Yep that's all.



* * *

One good information is, that the BlackNoir2 Skin for Textcube already includes all the files needed to use the tabber feature. Just follow step 4 and insert the code in the main article to group text in tabs.

[Notice: I don't get why, but somehow this feature conflicts with Textcube
s "URLKeeper" Plugin. Just give up one or the other. :P (thx to 한비(Hanbi) ]


PS: sorry for sucky guide. I guess I'm not good at explaining stuff after all =_=
PS2: XHTML 1.0 Transitional / CSS2.1 W3C Validation passed.
PS3: @muhootsaver: HIGHLY reommended!  :)

responses

28 comments

  • 한비 [韓非] 2008/04/29 06:16

    Edit Reply

    오오호호호 감사합니다.
    저도 영어권나라에서 있고 다른나라 친구들도 오고 그래서 항상 궁금해했었는데...
    오감사합니다..^^
  • Draco 2008/04/30 08:49

    Edit Reply

    짤방을 너무 잘 활용하시는군요. ^^
    • Kimatg 2008/04/30 22:42

      Edit

      요즘들어 실력이(?) 많이 늘은것 같습니다 ㅎㅎㅎ
  • 다마 2008/04/30 10:25

    Edit Reply

    좋은 정보 감사합니다~ 언제 한번 따라해봐야할듯 합니다..^^
    • Kimatg 2008/04/30 22:43

      Edit

      네~ 탭은 다국어 외에도 여러 방법으로 사용할 수 있으니까요 ^^
  • 한비 [韓非] 2008/05/01 13:32

    Edit Reply

    아싸 내이름 나왔다 -_-v
    • Kimatg 2008/05/01 14:22

      Edit

      ㅎㅎ 보니 탭기능 아주 잘 사용하고 계시는군요 ^^
  • 강철지크 2008/05/01 15:06

    Edit Reply

    탭기능이 저렇게 적용되는거군요...
    잘보고갑니다
    • Kimatg 2008/05/01 20:44

      Edit

      네~ 강철지크님도 나중에 한번 시도해보세요 ^^
  • muhootsaver 2008/05/03 21:58

    Edit Reply

    헉!!! 이렇게 간단한 것이였습니까?;;; 정보 감사합니다 ^^ 한번 시험 끝나면 시험해보겠습니다 (...아직도 안끝났습니다. 이제 지겨워... orz...)
    • Kimatg 2008/05/03 23:45

      Edit

      헛!!! 정말 별거 아니죠? ㅋㅋ 시험끝나면 꼭 시험해보세요~ (looks like an unintended pun XD) 홧팅~^^
  • Leviathan 2008/05/11 00:02

    Edit Reply

    이런식으로도 되는 것이군요. 좋은글 보고 갑니다^^
  • 하타 2008/05/25 18:30

    Edit Reply

    내장되어있었군요!
    ... 근데 쓸일이 없...
    • Kimatg 2008/05/25 22:57

      Edit

      ...그냥 비장의 무기로 가지고 계세.. (??)
  • Yang, Soochul 2008/07/28 16:17

    Edit Reply

    참 좋은 정보이자 방법입니다...

    제 블로그 접속자 브라우저 통계에서

    익스7이 많아지면 그때 시도해봐야겠네요..ㅠㅠ

    (익스6 사용자)
    • Kimatg 2008/07/30 20:09

      Edit

      필요한 사람한테는 아주 유용한 정보이죠 ㅎㅎ
  • Music Life 2008/09/08 20:56

    Edit Reply

    저도 사용하긴 하는 데 영어적기가... 난감하네요... ㅠㅠ;;
    • Kimatg 2008/09/02 21:39

      Edit

      ㅎㅎ 매번 좀 수고를 해 줘야되죠.
  • ginu 2009/03/18 12:41

    Edit Reply

    this is awesome!
    (이라고 영어 댓글도 하나쯤 있어야 할 것 같아서... ㅎ)
    저도 나중에 적용해 보고 싶네요.
    • Kimatg 2009/03/18 13:40

      Edit

      lolz fricken awesome isn't it? XD

      (영어 댓글 감사합니다 ㅎㅎ)
  • 애쉬군 2009/07/21 21:21

    Edit Reply

    빠식스 주인장 서하늘님의 비밀(?!)을 알게 되었군요(......)

    잘 쓰겠습니다.

    - Sincerely, Ash(......)
    • Kimatg 2009/07/21 21:24

      Edit

      오오 그거슨 위대한 비밀(...)

      ㅎㅎ 잘 쓰세요~^^
  • 루미 2009/10/11 16:05

    Edit Reply

    좋은 팁 감사합니다!!
    그런데 쿠키를 사용하는 방식을 어떻게 적용해야 할지 모르겠네요 ㅠ_ㅠ
    예제를 보고 똑같이 했는데 페이지끼리는 쿠키를 주고 받지 못하나 봅니다.
    어떻게 하면 좋을까요? ㅠㅠ 도와주세요~
  • popeye 2009/10/22 00:46

    Edit Reply

    늘 보면서, 햐~ 이 블로그 참 이쁘다..며 감탄하고 있습니다. 오늘에야 제대로 인사를 드리는 것 같습니다. 저는 텍스트큐브닷컴 블로그인데, 위엣 설명을 적용하려니까 관리창에서는 js 파일의 업로드가 금지되어 있고.. 헤드에 스크립트태그도 금지되어 있어서 잘 안되고 있습니다. 좋은 방법이 없을까요? 꼭 사용하고픈데요...
  • 까롤로 2010/01/03 01:55

    Edit Reply

    이글루스 쓰는데 제가 만든 스킨이 아니라 공유받은 스킨이라 어떻게 해야 할 지 모르겠어요 ㅠ ㅜ
    • Kimatg 2010/01/03 20:22

      Edit

      저도 이글루스를 한번도 안써봐서 js파일이 업로드가 가능한지 잘 몰라서 어찌 설명드리기가 좀 곤란하네요^^;;

Submit