웹서버플밍/그밖에2011/07/31 17:33

XpressEngine 에서 모듈,스킨 만뜰때 사용되는 공용 (함수,변수,CSS) 들

XE 에서 모듈,스킨 만들때 사용되는 공용 (함수,변수,CSS) 들입니다.
찾기 쉬우라고 적어놓아요.

함수 목록 보기

언어 변수 보기



그외 변수 보기



스타일 목록 보기



스타일 버튼 보기



	저작자 표시
	비영리
	동일 조건 변경 허락
	






'웹서버플밍 > 그밖에' 카테고리의 다른 글






XpressEngine 에서 모듈,스킨 만뜰때 사용되는 공용 (함수,변수,CSS) 들  (0)


2011/07/31





XE (XpressEngine) 레이아웃 제작이 왜 어렵죠? 어렵게 생각하실거 없습니다.  (0)


2010/04/09





Nine Techniques for CSS Image Replacement (CSS IR 기법)  (0)


2010/03/15





HTML/CSS 익스 5~8 테스트 프로그램 (IETester)  (0)


2010/02/12




							

							
Posted by 파이델

							
							
								

									TAG xe,
XpressEngin
								

							
							

								Trackback 0
								Comment 0
							

							
							
							
						

					

				

				

			
				
웹서버플밍/그밖에2010/04/09 09:00

				

				

					

						

							
XE (XpressEngine) 레이아웃 제작이 왜 어렵죠? 어렵게 생각하실거 없습니다.

						

						

						
							
														
							

								

제로보드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 입니다.












 <!--// 자바, CSS 로드및 설정 --> 

<!--#include("_setting.html")--> 

 

<div id="bodyWrap"> 

 

    <!--// 머리 (메인메뉴) --> 

    <div class="layoutHead"><!--#include("_head.html")--></div> 

 

    <!--// 몸통 (페이지나 게시판) --> 

    <div class="layoutBody" id="contentBody"> 

 

        <!--// 왼쪽 (서브메뉴) --> 

        <div class="layoutLeft fl"><!--#include("_left.html")--></div> 

 

        <!--// 오른쪽 (게시판) --> 

        <div class="layoutRight fr"><!--#include("_right.html")--></div> 

 

    </div> 

 

    <!--// 다리 (라이센스) --> 

    <div class="layoutFoot"><!--#include("_foot.html")--></div> 

 

</div> 








다음은 머리를 만들어 봅시다. 해더 파일은 ./layouts/스킨/_head.html 입니다.










      <div id="header"> 

 

        <!--// 로고 --> 

        <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-->&nbsp;<!--@end--></h1> 

 

        <!--// 언어 선택창 --> 

        <div id="language"> 

            <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> 

            <ul id="selectLang"> 

                <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> 

                <li><a href="#" onclick="doChangeLangType('{$key}');return false;">{$val}</a></li> 

                <!--@end--><!--@end--> 

            </ul> 

        </div> 

 

        <!-- GNB --> 

        <ul id="gnb"> 

            <!-- main_menu 1차 시작 --> 

            <!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])--> 

                <!--@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['link']}</a></li> 

 

            <!--@endif--><!--@endforeach--> 

        </ul> 

 

        <!--// 통합 검색창 --> 

        <form action="{getUrl()}" method="post" id="isSearch"> 

            <!--@if($vid)--> 

            <input type="hidden" name="vid" value="{$vid}" /> 

            <!--@end--> 

            <input type="hidden" name="mid" value="{$mid}" /> 

            <input type="hidden" name="act" value="IS" /> 

            <input type="hidden" name="search_target" value="title_content" /> 

            <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> 

 

    </div> 










다음은 다리입니다. 풋 파일은 ./layouts/스킨/_foot.html 입니다.










     <ul id="footer"> 

        <li class="first-child"> 

            <address> 

            <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> 

            </address> 

 

        </li> 

 

        <!--// 하단 메뉴가 있을때 출력 --> 

        <!--@foreach($bottom_menu->list as $key => $val)--> 

        <li><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li> 

        <!--@endforeach--> 

    </ul>






이제 좌측 로그인, 서브 메뉴등을 출력하는 부분입니다. 좌측 파일은 ./layouts/스킨/_left.html 입니다.










         <div id="columnLeft"> 

 

            <!--// 로그인 위젯 --> 

            <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" /> 

 

            <!--// 왼쪽 2차 메뉴 --> 

            <img src="./images/blank.gif" alt="" class="mask" /> 

 

            <!--// 메뉴출력 --> 

            <!--@if($menu_1st)--> 

            <ol id="lnb"> 

                {@ $idx = 1 } 

                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])--> 

                <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> 

 

                    <!--// main_menu 3차 시작 --> 

                    <!--@if($val['list'] && ($val['expand']=='Y'||$val['selected']) )--> 

                    <ul> 

                    <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])--> 

                        <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> 

                    <!--@endif--><!--@endforeach--> 

                    </ul> 

                    <!--@endif--> 

                </li> 

                {@$idx++} 

                <!--@endif--><!--@endforeach--> 

            </ol> 

            <!--@endif--> 

 

        </div>






이제 페이지나 게시판을 출력하는 메인 몸통이 되겠네요. 완전 간단합니다. 파일은 ./layouts/스킨/_right.html 입니다.










        <div id="columnRight"> 

            <!--// 컨텐츠 시작 --> 

            {$content} 

        </div> 












마지막으로 Java나 CSS등을 로드하고 설정등을 하는 ./layouts/스킨/_setting.html 파일입니다. 주로 최상단에 위치합니다.










 <!--// js 파일 import --> 

<!--%import("js/xe_official.js")--> 

 

<!--// 레이아웃과 연동될 css 파일 import --> 

<!--@if($layout_info->colorset == "white")--> 

    <!--%import("css/white.css")--> 

<!--@elseif($layout_info->colorset == "black")--> 

    <!--%import("css/black.css")--> 

<!--@else--> 

    <!--%import("css/default.css")--> 

<!--@end--> 

 

<!--@if($layout_info->background_image)--> 

<style type="text/css"> 

    body {  background:#FFFFFF url({getUrl()undefined}{$layout_info->background_image}) repeat-x left top; } 

</style> 

<!--@end--> 

 

<!--@if(!$layout_info->colorset)--> 

    {@$layout_info->colorset = "default"} 

<!--@end-->






어떤가요? 특별한 설명이 필요없이 간단한 주석 만으로 알기쉽게 쉽습니다.


또한 include 를 사용하니 제로보드4나 그누보드의 제작 방법과 비슷합니다.




안그런가요 ^^;;; 그럼 어쩔수없구요 ㅜㅜ









추신: 글작성시 필요한 작업에 사용한 레이아웃 그대로 첨부파일에 올립니다.


 xe_official.tar.gz




	저작자 표시
	비영리
	동일 조건 변경 허락
	






'웹서버플밍 > 그밖에' 카테고리의 다른 글






XpressEngine 에서 모듈,스킨 만뜰때 사용되는 공용 (함수,변수,CSS) 들  (0)


2011/07/31





XE (XpressEngine) 레이아웃 제작이 왜 어렵죠? 어렵게 생각하실거 없습니다.  (0)


2010/04/09





Nine Techniques for CSS Image Replacement (CSS IR 기법)  (0)


2010/03/15





HTML/CSS 익스 5~8 테스트 프로그램 (IETester)  (0)


2010/02/12




							

							
Posted by 파이델

							
							
								

									TAG EX,
XpressEngine,
zeroboard,
제로보드
								

							
							

								Trackback 0
								Comment 0