적용버전 : XpressEngine 공통 빈 레이아웃 만들기

빈 레이아웃 만들기

레이아웃 문서 위치 : /xe/layouts/xeschool_layout/layout.html

XE 코어의 <body>와 </body> 태그 안쪽 영역에 출력되며, HTML 문서의 기본 마크업 언어인 <!DOCTYPE>,<html>,<head>,<body> 태그를 포함하지 않습니다.


빈 레이아웃(layout.html) 만들기

우리가 새로 만든 xeschool_layout에는 conf 디렉터리 안에 info.xml 문서만 들어 있습니다. XE는 이 문서의 내용을 읽어보고 "아! XE 스쿨에서 만든 레이아웃이군요! 옵션은.... 별로 많지 않네요. 요청하신대로 보여드릴께요." 라고 추가 설정에 필요한 내용을 여러분에게 보여줄 것입니다. 아직 layout.html 문서가 없지요? 오늘은 이 문서를 만들어 보고 서버에 올려서 옵션 설정이 제대로 작동하는지 확인해 보도록 하겠습니다.

info.xml 문서는 기본 제공되는 official_layout에서 가져왔지만, layout.html 문서는 바로 에디트플러스에서 만들고 저장해 봅시다. 에디트플러스를 실행하여 아래와 같이 입력해 주세요.

image

info.xml 에서 메인페이지와 서브페이지를 나눌 수 있는 추가옵션 변수가 작동하는지 먼저 확인해 보기 위해서 위와 같은 내용을 입력한 것입니다. info.xml 문서에서 레이아웃의 보기 형태를 구분하기 위해 layout_view_type 라는 변수를 만들었고 만약 메인의 형태로 사용하기를 선택하면 값(value)은 main 이 할당 되도록 설정했습니다. 따라서 layout_view_type="main" 이 되는 것이지요. 이것을 레이아웃에서 사용하려면 다음과 같이 XE의 조건문을 이용하여 사용합니다. 자세히 살펴볼까요?

<!--@if($layout_info->layout_view_type == "main")-->※ 만약에(if) 레이아웃 info 문서에서(info.xml) -> layout_view_type 라는 변수가 "메인 레이아웃 형태로 사용"(value는 main)이
│선택되면 
│<h1>메인 레이아웃 형태로 선택시에 이부분이 보입니다.</h1>
│※ 이 부분을 보여줘!<!--@elseif($layout_info->layout_view_type == "sub")-->※ 그밖에(else) 또 만약(if) "서브 레이아웃 형태로 사용"(value는 sub)하기를 선택할 수도 있겠지? 
│그러면 윗 부분이 아니고 아래를 실행해줘! 
│<h1>서브 레이아웃 형태로 선택시에는 이부분만 보입니다.</h1>
└<!--@end-->
※ 끝이야! 이게 다야! 쉽지? 꼭 확인을 부탁해!

XE 템플릿 문법이란?

PHP에서 IF (조건문) { 실행 내용 } 처럼 사용하는 조건문과 같습니다. 그런데 <!-- --> 는 HTML 문서에서 주석(설명)을 메모할 때만 쓰는 코딩 방법인데 주석문 안에 @를 넣어서 조건문을 시작하는 것이 다르군요. 이러한 방법을 XE만 사용한다고 해서 XE 템플릿 문법이라고 합니다. 좀더 간단히 풀어보지요.

<!--@if( 조건문 )-->

	 위의 조건식이 참(TRUE)일때 실행할 내용, / 거짓(FALSE)이면 다음 조건식을 확인한다.

<!--@elseif( 또 다른 조건문 )-->

	참(TRUE)일때 실행할 내용 / 이것도 거짓(FALSE)이면 end 로 끝나기 때문에 더이상 비교할 조건이 없이 끝낸다.

<!--@end-->

그리고 $layout_info->layout_view_type 에서 사용된 ->지정연산자입니다. 말 그대로 무엇을 콕 찝어 지정해 줬을까요? info.xml 문서에는 여러가지 추가 옵션을 위해 만들어 둔 변수(var)의 이름이 여러개 있었지요? 색상 선택을 위한 colorset 변수이름도 있었고, 로고 이미지를 받기 위한 logo_image 변수도 있었고, 사이트 URL을 받기 위한 index_url 변수도 있었습니다. 그리고 우리가 페이지를 구분하기 위해 만들었던 layout_view_type 변수도 있었습니다. XE는 info.xml 문서에서 사용된 변수들을 $layout_info라는 새로운 변수를 사용해서 배열로 받아 온 것입니다. 변수는 쉽게 말해서 큰 그릇인데 그 그릇 속에 여러개의 변수를 같이 담아 온 것이죠.

XE는 자기 스스로 여러분이 info.xml에서 만들었던 변수들을 클래스(Class)와 함수(Function)를 이용해 객체의 속성 배열로 받아오고 이렇게 담아온 변수는 지정연산자 -> 를 사용해서 $layout_info->layout_view_type 처럼 지정하여 불러내 사용해야 합니다.

결국 불러낸 변수의 값이 main 이면 참(TRUE)이기 때문에 그 안의 내용이 실행되고 참이 아니면(FALSE) 그 다음 조건식을 확인해서 sub 이면 참(TRUE)이기 때문에 sub 안의 내용만 실행 된다는 이야기지요. 우리는 main과 sub 만을 값으로 선택하게 했기 때문에 그밖의 따져볼만한 조건은 없습니다. 그래서 <!--@end--> 로 끝나는 것입니다.


새로운 레이아웃 만들고 옵션 확인하기

문서를 xeschool_layout 디렉터리 안에 layout.html 문서로 저장한 후 서버에 업로드하고 관리자 제어판에서 레이아웃 > 다운로드 항목을 클릭합니다.

image


새로운 레이아웃을 만들기 위해 생성 버튼을 클릭합니다.

image


업로드 했던 레이아웃을 확인한 후에 메인으로 사용할 레이아웃이라고 제목을 입력합니다.

image


옵션을 설정합니다. 컬러셋은 우선 기본으로 선택하고 홈페이지 URL과 레이아웃의 형태를 메인으로 선택합니다.
info.xml 에서 만들었던 옵션의 변수가 눈에 선하지요???

image


옵션 설정이 끝나면 저장 버튼을 클릭합니다.

image


레이아웃 목록을 확인해 보면 새로 만든 레이아웃이 생성된 것을 알 수 있습니다.

image


내용을 담을 수 있는 레이아웃을 만들었으니 메인으로 쓸 페이지를 만들어 봅니다.

image

image


페이지의 모듈 이름과 브라우저 제목을 입력하고 레이아웃은 만들어 둔 메인용 스쿨 레이아웃 예제를 선택하고 저장합니다.

image


메인으로 옵션을 선택하였는데 제대로 작동하는지 확인해 봅니다.

image


그림과 같이 조건문 속의 글이 출력된다면 정상적으로 작동하는 것입니다. 조건식에 오류가 있으면 백지가 나오겠지요.

image


레이아웃을 서브 레이아웃 형태로 사용하기로 수정하면 어떻게 될까요?

image


XE가 조건식을 확인하고 우리가 원했던 부분만 화면에 출력합니다.

image


도움말 : 조건문을 이용한 응용은 무한합니다.

info.xml 문서와 layout.html 문서가 협동하여 다양한 조건문을 사용한다면 무수히 많은 형태의 페이지를 만들 수 있습니다. 모양과 형태가 다르다고 해서 다른 레이아웃 폴더를 만들어 사용하는 것이 아닙니다. 같은 layout.html 문서 한장 만으로도 옵션과 조건식을 이용해 다른 형태의 레이아웃을 만들어 내는 것입니다. 이러한 기능은 오직 XE만 가지고 있는 매력입니다.

  • 사이드 바의 정렬을 왼쪽으로 할 것인지, 오른쪽으로 할 것이지...
  • 웹사이트의 색상을 기본, 화이트, 그레이, 핑크, 블루, 레드...등으로 조건문을 이용하면 CSS를 다르게 불러오지 않을까?
  • 로그인 한 회원에게는 좀 더 다른 화면을 보여주고 싶을때...
  • 관리자만 봐야 할 내용이 있을때...
  • 페이지, 게시판 등 각각의 모듈마다 다른 레이아웃을 형태를 주고 싶을때...