제목이 좀 그런가요? 웃어주세요 ㅎㅎ;;
제로보드4, 그누보드 사용하다 XE를 만지는데 레이아웃 제작이 어렵다고요?
어렵게 생각하실거 하나도 없습니다.
똑같이 생각해봅시다. head, foot 파일을 include 하는게 제로보드4, 그누보드 기본이죠?
레이아웃도 특별한건 없습니다. 비슷하게 제작해볼까요?
우선 딱 5가지만 알면됩니다.
(제로보드4, 그누보드를 사용하셨다면 당연히 기본적으로 html/css 정도는 알고계시죠?)
1. {print_r($보고싶은해당변수)}
레이아웃을 제작하다 보면 어떤 설정이 넘어왔는지 이 $변수 는 무엇인지 궁금할때가 많을겁니다.
이럴때 1. 처럼 보고싶은 $변수를 적어 아무곳에나 넣어주면 해당하는 $변수의 값들을 제대로 출력해 줍니다.
보시고 필요한 키와 값을 사용하시면 되는겁니다. 이 함수는 디버깅 시에도 유용하죠
2. import 와 include
import 는 자바나 스타일 파일등을 불러옵니다.
<!--%import("js/xe_official.js")--> 또는 <!--%import("css/black.css")-->
include 잘 아시죠? 머리, 다리, 몸통등 해당 문서를 불러오는 겁니다.
<!--#include("_head.html")--> 이렇게 쓰입니다. 제로4, 그누보드등에선 include_once 쓰이죠
단, php 파일이 아닌 html 파일이여야 합니다.
3. foreach
배열이라고 아시나요? 한 $변수에 여러개의 키와 값이 들어있는 변수입니다.
그 배열 $변수에서 하나씩 차례로 키와 값을 뽑아줍니다.
주로 2가지 경우처럼 사용합니다. $배열['키값'] 또는 $배열->키값
레이아웃에선 메뉴의 값들이 출력됩니다. 아래와 같이 어떠한 값이 들어있나 확인해 보세요.
<!--@foreach($main_menu->list as $key => $val)-->
키값:{$key} <br /> 값:{print_r($val)} <br />
<!--@endforeach-->
4. if else
가장 많이쓰입니다.
간단합니다 해석대로 만약에 이거라면 입니다. 같이 쓰이는 else 는 이게 아니라면 입니다.
<!--@if($val['selected']===true)-->
배열 변수의 키(selected) 값이 true 라면
<!--@else-->
배열 변수의 키(selected) 값이 true 아니라면
<!--@endif-->
5. {$출력하려는변수}
해당하는 $변수를 화면에 출력해줍니다.
앞에 @ 붙는다면 출력하지 않습니다.
변수에 값을 넣을때 사용됩니다. {@ $변수 = 밀어넣어}
배열의 경우 {$배열['키값']} 또는 {$배열->키값} 처럼 사용합니다.
참고로 여러개의 변수를 사용할때는 끝에 ; 을 붙여줍니다.
{@
$변수1 = 'ㅎㅎㅎ';
$변수2 = 'ㅋㅋㅋ';
}
이거면 기본적인건 다됩니다. 실제로 기본 레이아웃을 보면 이거 말고는 특별한건 없습니다.
그럼 제로보드4나 그누보드처럼 만들어 볼까요?
우선 인덱스 파일을 만듭니다. XE 에서의 인덱스는 index.php 가 아니고 ./layouts/스킨/layout.html 입니다.
01.<!--// 자바, CSS 로드및 설정 --> 02.<!--#include("_setting.html")--> 03. 04.<div id="bodyWrap"> 05. 06. <!--// 머리 (메인메뉴) --> 07. <div class="layoutHead"><!--#include("_head.html")--></div> 08. 09. <!--// 몸통 (페이지나 게시판) --> 10. <div class="layoutBody" id="contentBody"> 11. 12. <!--// 왼쪽 (서브메뉴) --> 13. <div class="layoutLeft fl"><!--#include("_left.html")--></div> 14. 15. <!--// 오른쪽 (게시판) --> 16. <div class="layoutRight fr"><!--#include("_right.html")--></div> 17. 18. </div> 19. 20. <!--// 다리 (라이센스) --> 21. <div class="layoutFoot"><!--#include("_foot.html")--></div> 22. 23.</div>다음은 머리를 만들어 봅시다. 해더 파일은 ./layouts/스킨/_head.html 입니다.
01. <div id="header"> 02. <!--// 로고 --> 03. <h1><!--@if($layout_info->logo_image)--><a href="{$layout_info->index_url}"><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /></a><!--@else--> <!--@end--></h1> 04. <!--// 언어 선택창 --> 05. <div id="language"> 06. <strong title="{$lang_type}">{$lang_supported[$lang_type]}</strong> <a href="#selectLang" onclick="showHide('selectLang');return false;"><img src="./images/{$layout_info->colorset}/buttonLang.gif" alt="Select Language" width="87" height="15" /></a> 07. <ul id="selectLang"> 08. <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> 09. <li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li> 10. <!--@end--><!--@end--> 11. </ul> 12. </div> 13. <!-- GNB --> 14. <ul id="gnb"> 15. <!-- main_menu 1차 시작 --> 16. <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> 17. <!--@if($val['selected'])--> 18. {@ $menu_1st = $val } 19. <!--@end--> 20. <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['link']}</a></li> 21. <!--@endif--><!--@endforeach--> 22. </ul> 23. <!--// 통합 검색창 --> 24. <form action="{getUrl()}" method="post" id="isSearch"> 25. <!--@if($vid)--> 26. <input type="hidden" name="vid" value="{$vid}" /> 27. <!--@end--> 28. <input type="hidden" name="mid" value="{$mid}" /> 29. <input type="hidden" name="act" value="IS" /> 30. <input type="hidden" name="search_target" value="title_content" /> 31. <input name="is_keyword" type="text" class="inputText" title="keyword" /> 32. <input type="image" src="./images/{$layout_info->colorset}/buttonSearch.gif" alt="{$lang->cmd_search}" class="submit" /> 33. </form> 34.</div>다음은 다리입니다. 풋 파일은 ./layouts/스킨/_foot.html 입니다.
01.<ul id="footer"> 02. <li class="first-child"> 03. <address> 04. <a href="http://www.xpressengine.com" onclick="window.open(this.href);return false;"><img src="./images/powerdByXE.gif" alt="Powered By XpressEngine" width="70" height="5" /></a> 05. </address> 06. </li> 07. <!--// 하단 메뉴가 있을때 출력 --> 08. <!--@foreach($bottom_menu->list as $key => $val)--> 09. <li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li> 10. <!--@endforeach--> 11.</ul>이제 좌측 로그인, 서브 메뉴등을 출력하는 부분입니다. 좌측 파일은 ./layouts/스킨/_left.html 입니다.
01.<div id="columnLeft"> 02. <!--// 로그인 위젯 --> 03. <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" /> 04. <!--// 왼쪽 2차 메뉴 --> 05. <img src="./images/blank.gif" alt="" class="mask" /> 06. <!--// 메뉴출력 --> 07. <!--@if($menu_1st)--> 08. <ol id="lnb"> 09. {@ $idx = 1 } 10. <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])--> 11. <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['link']}</a> 12. <!--// main_menu 3차 시작 --> 13. <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )--> 14. <ul> 15. <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])--> 16. <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li> 17. <!--@endif--><!--@endforeach--> 18. </ul> 19. <!--@endif--> 20. </li> 21. {@$idx++} 22. <!--@endif--><!--@endforeach--> 23. </ol> 24. <!--@endif--> 25.</div>이제 페이지나 게시판을 출력하는 메인 몸통이 되겠네요 파일은 ./layouts/스킨/_right.html 입니다.
1.<div id="columnRight"> 2. <!--// 컨텐츠 시작 --> 3. {$content} 4.</div>
마지막으로 자바나 CSS등을 로드하고 설정등을 하는 ./layouts/스킨/_setting.html 파일입니다. 주로 최상단에 위치합니다.
01.<!--// js 파일 import --> 02.<!--%import("js/xe_official.js")--> 03. 04.<!--// 레이아웃과 연동될 css 파일 import --> 05.<!--@if($layout_info->colorset == "white")--> 06. <!--%import("css/white.css")--> 07.<!--@elseif($layout_info->colorset == "black")--> 08. <!--%import("css/black.css")--> 09.<!--@else--> 10. <!--%import("css/default.css")--> 11.<!--@end--> 12. 13.<!--@if($layout_info->background_image)--> 14.<style type="text/css"> 15. body { background:#FFFFFF url({getUrl()undefined}{$layout_info->background_image}) repeat-x left top; } 16.</style> 17.<!--@end--> 18. 19.<!--@if(!$layout_info->colorset)--> 20. {@$layout_info->colorset = "default"} 21.<!--@end-->어떤가요? 특별한 설명이 필요없이 간단한 주석 만으로 알기쉽게 쉽습니다.
안그런가요 ^^;;; 그럼 어쩔수없구요 ㅜㅜ
내용 출처 : http://www.xpressengine.com/?mid=tip&document_srl=18826939&rnd=18830147#comment_18830147
여기로 가시면 첨부파일도 받으실 수 있어요.
'Programming > WEB Hosting' 카테고리의 다른 글
| [APM] APMSETUP 6 설치 후, 아파치와 mySQL 포트변경방법 (1) | 2010.05.01 |
|---|---|
| [XE] CSS - 레이아웃 만들기/기초지식 이해편 (0) | 2010.05.01 |
| [XE] [비나무님글]xe_official_v2 레이아웃 사이트맵 없애는 방법 (0) | 2010.05.01 |
| [XE] xe_official_v2 xe공식레이아웃v2 관리자메뉴 나타나게 하기. (0) | 2010.05.01 |
| [XE] XE 1.2.4에 만기일 팁 적용시키기 (0) | 2010.05.01 |
댓글