XpressEngine

[기초] XE구조의 비밀 그 열번째 - 레이아웃, 그대가 좋아집니다..

XE의 레이아웃 기능이 참 좋습니다... 레이아웃변경만 하면 사이트 전체 디자인이 싹 바뀌면서 완전 다른 사이트로 변신하니, 말입니다..

클릭 몇번으로 사이트의 전체 디자인과 분위기를 바꿀 수 있는 건 예전에는 상상도 못했습니다.. 

예전에는 원래 소스코드 변경을 통해서만 할 수 있는 일이 였지요..


이번에는 좋은 기능! 레이아웃이 어떻게 화면에 표시될 수 있는 지 알아볼겁니다.


레이아웃은 layout모듈에서 기능수행과 관리를 담당합니다.

하지만 레이아웃을 표시하는 건 layout모듈이 직접하는 게 아니라 Core에서 담당하고 있습니다.

즉, layout모듈은 Core와 따로 분리할 수 없다는 것을 의미하지요..


최종결과물을 생성하는 ./classes/display/HTMLDisplayHandler.php 파일을 보면 레이아웃이 어떤게 표시되는 지 알 수 있습니다.


function toDoc(&$oModule)
	{
		...
		
		//모듈 템플릿파일 컴파일
		$template_path = $oModule->getTemplatePath();
		$tpl_file = $oModule->getTemplateFile();
		$output = $oTemplate->compile($template_path, $tpl_file);

		if(Context::getResponseMethod() == 'HTML')
		{
			//지정한 레이아웃이 있다면...
			if(Context::get('layout') != 'none')
			{
				//레이아웃에 모듈결과물을 삽입하기 위해 'content'라는 변수에 모듈 결과물을 저장합니다.
				//레이아웃에서 {$content}으로 모듈결과물을 삽입함
				Context::set('content', $output, false);

				//모듈에 지정된 레이아웃 경로설정
				$layout_path = $oModule->getLayoutPath();
				$layout_file = $oModule->getLayoutFile();
				$edited_layout_file = $oModule->getEditedLayoutFile();

				// get the layout information currently requested
				$oLayoutModel = getModel('layout');
				$layout_info = Context::get('layout_info');
				$layout_srl = $layout_info->layout_srl;
				
				if(!$layout_path)
				{
					$layout_path = './common/tpl';
				}
				if(!$layout_file)
				{
					$layout_file = 'default_layout';
				}
				//레이아웃파일 컴파일
				$output = $oTemplate->compile($layout_path, $layout_file, $edited_layout_file);
			}
		}
		return $output;
	}


* 일부코드를 제거했습니다. (중요한 부분만 남겼습니다.)

알기쉽게 하기위해 주석을 달아두었습니다.


위 코드의 실행은 아래와 같습니다.

  1. 실행모듈의 템플릿파일을 컴파일합니다. ($output = $oTemplate->compile($template_path, $tpl_file);)
  2. 레이아웃이 있다면 레이아웃에 모듈결과물을 삽입하기 위해 'content'라는 변수에 모듈 결과물을 저장합니다. (Context::set('content', $output, false);)
  3. 레이아웃 경로설정을 하고, 레이아웃파일도 템플릿파일이기에 컴파일합니다. 


위 실행으로 최종결과물이 완성된 건가요?

아닙니다. 지금까지 만든건 레이아웃에 모듈페이지를 붙여놓은 것뿐입니다..

아직 웹에서 보여줄 웹문서가 완성되지않았습니다.. <html></html> 태그가 없잖아요..

HTML태그(<html></html>)와 JS, CSS 호출태그,메타태그를 넣어야 완성이 됩니다..

그래서 마지막에 ./common/tpl/common_layout.html 공통레이아웃파일을 적용시켜 완성을 합니다.


*공통레이아웃파일은 웹문서로 완성시키기위한 레이아웃 파일입니다.



레이아웃의 구조

레이아웃은 ./layouts폴더에 저장합니다.

레이아웃에는 아래와 같은 파일및 폴더가 필수로 들어가야합니다.

  • conf/info.xml : 레이아웃의 정보파일
  • layout.html : 레이아웃 파일


- 레이아웃 파일은 일종의 템플릿 파일이므로 XE문법으로 작성합니다.

- 레이아웃 파일에서는 전체적인 디자인이 담기고, "{$content}"이라고 적은 부분에 모듈페이지(모듈결과물)가 표시됩니다.

- 레이아웃 파일이름은 "layout.html"이라고 XE Core에서 지정하고 있어서 임의로 변경하면 안됩니다.

- 필수폴더 말고 리소스파일이 담길 js,css,img등의 폴더가 있을 수 있습니다. (필요에 따라)


  • ?
    날아라 2014.04.05 05:58:07
    너무 좋은 강의 입니다.
  • ?
    wnsgml 2014.04.06 17:45:14
    XE의 레이아웃 기능 정말 좋습니다.
    순식간에 뚝딱!!
    다른 분들이 만든 레이아웃을 원하는데로 수정하는 능력이라도 있다면...
  • ?
    북쪽마녀 2014.07.28 18:09:13
    XE는 다좋은데 ㅠ 익스플로러에서 속도가 느린감이 있는거 같에여 ( 모든 레이아웃 포함 )
  • ?
    굿모닝 2015.01.17 18:46:45
    최고네요 정말
  • ?
    다이오니 2015.02.02 01:07:36
    layout.html 하나로 모든 디자인을 묶을 수 있는게 좋더군요~
?