xe 다국어 사이트 만드는 방법

글로벌 시대이니 만큼 사이트도 다국어로 만들어야 되는 경우가 있다. 

휴~ 참 웹쪽은 할게 많다.. 다국어.. 모바일.. 다국어.. ㅜㅜ

암튼 다국어를 쉽게 하려면 어떻게 하면 될까 연구해 봤다.

먼저 xe -> 관리자 -> 메뉴에서 를 다국어용으로 만들어 놓는다.

그리고 레이아웃에 info.xml 에 보면 (예는 xeedition 레이아웃)

<menus>

<menu name="GNB" maxdepth="3" default="true">

<title xml:lang="ko">메인 메뉴</title>

</menu>

<menu name="UNB" maxdepth="1">

<title xml:lang="ko">매거진형 추가 메뉴</title>

</menu>

<menu name="FNB" maxdepth="2">

<title xml:lang="ko">푸터 메뉴</title>

</menu>

</menus>

이렇게 있으니 다국어용으로 만들어 둔다.

레이아웃 -> 설정으로 가면 메뉴가 있고 선택하는게 나온다. 

여기서 해당것을 선택 한다. 

예를들어 위의 info.xml 을 활용해서 아래처럼 만들어 둔다고 하면

전역 메뉴(gnb_kor)

영어 전역 메뉴(gnb_eng) 

하단 메뉴(footer_nav_kor)

영어 하단 메뉴(footer_nav_eng)

메인 하이라이트 메뉴(main_highlight_kor)

영어 메인 하이라이트 메뉴(main_highlight_eng)

이렇게 해당 메뉴를 선택해준다.

<block cond="$lang_type == 'ko'">

    {@$gnb = $gnb_kor}

    {@$logo_alt = $layout_info->logo_alt_kor}

    {@$footer_nav = $footer_nav_kor}

    {@$main_highlight = $main_highlight_kor}

    {@$layout_info->indexMid = $layout_info->indexMid_kor}

    {@$notImplemented = '준비중입니다.'}

</block>

<block cond="$lang_type == 'en'">

    {@$gnb = $gnb_eng}

    {@$logo_alt = $layout_info->logo_alt_eng}

    {@$footer_nav = $footer_nav_eng}

    {@$main_highlight = $main_highlight_eng}

    {@$layout_info->indexMid = $layout_info->indexMid_eng}

    {@$notImplemented = 'Coming Soon!'}

</block>

<section class="wrap nav">

        <dl loop="$footer_nav->list=>$item">

            <dt>{$item['text']}</dt>

            <dd loop="$item['list']=>$subItem">

                <a href="{$subItem['href']}" cond="$subItem['desc'] != 'x'">{$subItem['text']}</a>

                <a href="javascript:alert('{$notImplemented}')" cond="$subItem['desc'] == 'x'">{$subItem['text']}</a>

            </dd>

        </dl>

    </section>

이런식으로 해당 언어에 맞게 해당 메뉴를 세팅해주어 표시할 수 있다.

<ul id="langSelector">

<li>

<a href="/{$layout_info->indexMid_kor}?l=ko" class="on"|cond="$lang_type == 'ko'" data-rollover="{$layout_info->path}/img/lang_kor_on.png:{$layout_info->path}/img/lang_kor.png"><img src="img/lang_kor.png" alt="한국어 페이지"></a>

</li>

<li>

<a href="/{$layout_info->indexMid_eng}?l=en" class="on"|cond="$lang_type == 'en'" data-rollover="{$layout_info->path}/img/lang_eng_on.png:{$layout_info->path}/img/lang_eng.png"><img src="img/lang_eng.png" align="English Page"></a>

</li>

</ul>

<section class="wrap" id="information">

<include target="information.kor.html" cond="$lang_type == 'ko'" />

<include target="information.eng.html" cond="$lang_type == 'en'" />

</section>

이런식으로 응용도 가능하다.

그리고 해당언어를 선택해서 페이지에 글을 쓰면 해당언어로 나온다. 즉 한국어 선택해서 글을 한국어로 쓰고, 영어 선택해서 영어로 쓴다. 이렇게 같은메뉴(언어가 다른메뉴)에 글을 해당언어에 맞게 2번 쓰면 해당 언어에 맞게 글이 나온다.