XE에서는 사이트의 메뉴와 디자인을 레이아웃 기능을 통해서 쉽게 적용할 수 있습니다.
레이아웃은 메뉴 모듈과 위젯등을 이용해서 홈페이지, 블로그등 다양한 형태로 사이트를 운영할 수 있게 합니다.
XE의 레이아웃과 제로보드4의 헤더/푸터#
제로보드4에서 사이트의 디자인을 위해 사용되던 헤더/푸터 파일의 사용은 일괄적인 관리를 할 수 없고 그 내용에 따라 잘못된 결과물을 출력할 수 있던 방법이였습니다.
html 규격에 어긋나는 등의 좋지 않은 결과가 생겨나기도 하였구요.
반면에 XE의 레이아웃은 게시판의 스킨처럼 손쉽게 적용할 수 있고 제로보드4의 헤더/푸터 기능에 비해서 더 강력하고 쉽게 제작할 수 있습니다.
또한 공유(배포)하기에 더욱더 편리한 형태를 가지게 되었습니다.
- zb4 레이아웃
이와같이 헤더와 푸터 파일을 각각 만들필요없이 layout.html 파일 하나로 간단히 레이아웃을 제작할 수 있습니다.
레이아웃 만들기#
- 먼저 원하는데로 body부분의 레이아웃을 작성합니다.
body 외의 html태그나 head는 XE가 알아서 처리합니다. 따라서 <body></body>태그 사이에 들어갈 부분만 작업하면 됩니다.
또한 이때 컨텐츠, 통합검색, 로그인위젯, 메뉴, 언어선택 등이 차지할 공간을 미리 알맞게 비워두고 제작합니다.
-
css와 js파일 삽입방법
레이아웃 파일 가장 처음부분에 아래와 같은 방법으로 삽입합니다.
- <!--%import("(폴더)/(파일명).js")-->
<!--%import("(폴더)/(파일명).css")-->
보시는 것처럼 js파일과 css파일 삽입방법은 같습니다.
컬러셋을 여러개로 제작하실 경우엔 조건문을 사용하여 각 컬러셋마다 다른 파일을 삽입하실 수 있습니다.
- <!--@if($layout_info->colorset == "white")-->
<!--%import("css/white.css")-->
<!--@elseif($layout_info->colorset == "black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/default.css")-->
<!--@end-->
위와 같이 조건문을 사용하여 여러 컬러셋에 대해 서로다른 css파일을 삽입할 수 있습니다.
컬러셋은 info.xml에서 extra_vars로 사용자로부터 입력받을수 있게 하시고
조건문에 관한 자세한 설명은 스킨 문법을 참고하세요.
- 이제 컨텐츠, 로그인위젯, 메뉴, 언어선택 등을 넣어봅시다.
이 매뉴얼에선 XE 공식사이트 스킨(xe_official)에 쓰인 것들만 설명합니다.
-
- 컨텐츠 부분
게시판, 페이지 등이 나타날 부분으로, 꼭 넣어주셔야 합니다.
간단히 {$content} 를 넣으면 됩니다.
-
언어선택 부분
언어 선택 버튼이 나타날 부분입니다.
- <ul>
<!--@foreach($lang_supported as $key => $val)-->
<!--@if($key!= $lang_type)-->
<li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li>
<!--@end-->
<!--@end-->
</ul>
기본적으로 위와같이 넣으시면 됩니다.
꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다. (언어선택을 원치않으실 경우엔 아예 넣지 않으셔도 됩니다.)
-
1차 메뉴 부분
1차 메뉴가 나타날 부분으로, 꼭 넣어주셔야 합니다.
먼저 info.xml에서 extra_vars에서 메뉴를 받아야합니다.
그후에 레이아웃의 원하는 부분에 아래와 같은 코드를 넣어주시면 됩니다.
- <ul>
<!--@foreach($main_menu->list as $key => $val)-->
<!--@if($val['text'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end-->
<li <!--@if($val['selected'])-->class="on"<!--@end-->>
<a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['text']}</a>
</li>
<!--@end-->
<!--@end-->
</ul>
언어선택 부분과 마찬가지로 꼭 ul,li태그를 사용하실 필요는 없으며 css를 이용하여 다듬으셔도 무방합니다.
-
통합검색 부분
통합검색 폼과 검색버튼이 나타날 부분입니다.
- <form action="{getUrl()}" method="post" id="isSearch">
<input type="hidden" name="mid" value="{$mid}" />
<input type="hidden" name="act" value="IS" />
<input name="search_target" type="radio" value="title" id="search_target" class="searchOrder" checked="checked" title="search option" />
<label for="search_target" class="checked" id="search_target_label" onclick="showHide('selectOrder'); return false">{$lang->title}</label>
<ul id="selectOrder">
<li>
<input type="radio" name="search_target" value="title" id="search_target1" />
<label for="search_target1" onclick="chkIsKind(1, '{$lang->title}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}</label>
</li>
<li>
<input type="radio" name="search_target" value="content" id="search_target2" />
<label for="search_target2" onclick="chkIsKind(2, '{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="title_content" id="search_target3" />
<label for="search_target3" onclick="chkIsKind(3, '{$lang->title}+{$lang->content}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->title}+{$lang->content}</label>
</li>
<li>
<input type="radio" name="search_target" value="comment" id="search_target4" />
<label for="search_target4" onclick="chkIsKind(4, '{$lang->comment}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->comment}</label>
</li>
<li>
<input type="radio" name="search_target" value="tag" id="search_target5" />
<label for="search_target5" onclick="chkIsKind(5, '{$lang->tag}'); return false;" onmouseover="this.className='on'" onmouseout="this.style.background='none'">{$lang->tag}</label>
</li>
</ul>
<input name="is_keyword" type="text" class="inputText" title="keyword" />
<input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" />
</form>
마찬가지로 알맞게 스타일을 수정하셔도 무방합니다.
-
로그인위젯
배포가 목적이라면 로그인 위젯공간은 비워두시거나 기본 로그인스킨을 사용하시기 바랍니다. 이유는 만약 다른 사용자가 가지고있지 않은 로그인스킨 위젯 코드를 추가한다면 다른 사용자에게 혼란이 빚어질 것이기 때문입니다.
XE 기본 로그인위젯 스킨(xe_official) 코드 (제로보드XE에 기본으로 포함되어 있습니다.)
- <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
-
이외에도 여러 extra_vars를 활용해 사용자정의로 설정할수있는 여러부분을 만드실 수 있습니다.
이로써 레이아웃 틀의 제작이 끝났습니다.
-
레이아웃 설명달기 (info.xml)
- <?xml version="1.0" encoding="utf-8"?>
<layout version="0.1">
<title xml:lang="ko">레이아웃 이름</title>
<author email_address="제작자 email" link="제작자 홈페이지 주소" date="작성일">
<name xml:lang="ko">제작자 이름</name>
<description xml:lang="ko">
레이아웃에 대한 간단한 설명
</description>
</author>
</layout>
위와 같은 형식으로 간단히 작성하시면 됩니다.
레이아웃을 누가 만들었고 어떤 목적으로 만들었는지에 대한 내용을 info.xml 이라는 파일에 적어서 저장합니다.
info.xml 파일로 레이아웃의 저작자가 누구인지 알릴 수 있고 차후에 자신이 볼때도 내역을 다시 확인할 수 있습니다.
더불어 확장변수/메뉴연결 등을 지정할 수 있습니다.
info.xml은 conf폴더 내에 넣어두시면 됩니다.
파일 정리#
레이아웃 이름으로 된 폴더를 만드신 후,
위와 같이 layout.html, conf폴더와 이미지, js, css파일들을 넣으시면 됩니다.
'아야 어디가'님의 '레이아웃을 처음부터 만들고 싶은...' 강좌 시리즈