[XE 1.x 강좌] 3.2. 레이아웃 기본 틀 만들기2017. 2. 1. 18:59
XE 레이아웃의 파일 구조
XE 레이아웃은 conf 폴더와 layout.html, thumbnail과 css와 js 파일로 이루어져 있다. conf 폴더에는 info.xml이 있는데, 이 파일은 레이아웃의 정보를 저장한다. layout.html은 레이아웃의 뼈대가 되는 파일이며, css는 레이아웃을 꾸며주는 역할, js는 레이아웃에 사용되는 자바스크립트 코드를 불러온다. thumbnail은 레이아웃 선택 과정에서 보여주는 미리보기 이미지이다. 사용자의 필요에 따라 사진 등 다양한 요소를 더 추가할 수 있다.
info.xml
이 파일의 기본 구조는 다음과 같다.
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
<title xml:lang="ko">테스트 레이아웃</title>
<description xml:lang="ko">디자인이 없는 테스트 레이아웃입니다. 새 스킨을 만들 때 이 레이아웃 사본을 사용하면 좋습니다.</description>
<version>1.0</version>
<date>2010-12-24</date>
<author email_address="user@user.com" link="http://user-define.com/">
<name xml:lang="ko">제작자 이름</name>
</author>
<menus>
<menu name="global_menu" maxdepth="3" default="true">
<title xml:lang="ko">전역 메뉴</title>
</menu>
</menus>
</layout>
첫 번째 줄은 xml의 버전과 인코딩을 지정한다. 건드릴 필요는 없다. 두 번째 줄은 레이아웃 정보를 선언하는 것이다. title은 이 레이아웃의 이름을 지정한다. 이때 xml:lang:="ko"는 XE 언어가 한국어일 때 출력할 문자열을 선언한다. description은 레이아웃의 설명을 의미한다. version은 레이아웃의 버전, date는 레이아웃을 제작한 날짜이다. author은 제작자의 정보를 입력하는 곳이다. menu는 XE 설정에서 만든 메뉴와 연결시키는 부분이다. 여러 개의 메뉴를 만들 게 아니라면 수정하지 않아도 된다. 이제 레이아웃 폴더를 하나 만들고 conf 폴더를 만든 후 위의 양식을 복사하여 info.xml를 만들어라.
info.xml의 확장변수
XE는 레이아웃에도 사용자 변수를 지원한다. 이 기능을 통해 직접 파일을 수정하지 않고도 레이아웃을 조정하게 할 수 있다. 다음은 간단한 예시이다. 설명은 //표시를 하고 달아놓겠다. 여기서는 간단히 참고만 하고 넘어가겠다.
<extra_vars> //확장변수 시작
<var name="colorset" type="select"> //변수의 이름은 colorset으로 지정, 변수 입력은 select 태그로 받음
<title xml:lang="ko">컬러셋</title> //변수 이름
<description xml:lang="ko">원하는 컬러셋을 선택해주세요.</description> //설명
<options value="black"> //변수의 실제 값 지정
<title xml:lang="ko">Black (기본)</title> //값의 이름
</options>
<options value="white">
<title xml:lang="ko">White</title>
</options>
</var>
<var name="logo_image" type="image"> //변수는 이미지 타입
<title xml:lang="ko">로고 이미지</title>
<description xml:lang="ko">페이지 상단에 출력할 로고이미지를 입력하세요.</description>
</var>
<var name="logo_url" type="text"> //변수는 한 줄 텍스트 타입
<title xml:lang="ko">로고 이미지 링크</title>
<description xml:lang="ko">로고 이미지를 클릭할 때 이동할 URL을 입력해 주세요.</description>
</var>
<var name="title_description" type="textarea"> //변수는 여러 줄 텍스트 타입
<title xml:lang="ko">본문 상단 내용</title>
<description xml:lang="ko">본문 상단에 표시되는 영역의 내용을 입력해주세요.(HTML 사용 가능)</description>
</var>
</extra_vars> //확장변수 끝
layout.html의 뼈대 만들기
layout의 기본 구조는 다음과 같다. 역시 설명은 //로 달아두겠다.
<load target="layout.css" /> //layout.css를 불러옴
<load target="layout.js" type="body" /> //layout.js를 body에 불러옴
<div class="layout_container"> //레이아웃 전체를 감싸는 div 선언
<div class="header">//header 시작
<div class="title">Site name</div> //사이트 이름
<div class="menu"> //메뉴 시작
<ul> //메뉴 목록 시작
<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul> //2차 메뉴
</li> //1차 메뉴
</ul> //메뉴 목록 끝
</div> //메뉴 끝
</div> //header 끝
<div class="content">{$content}</div> //내용 부분 시작
<div class="footer"> //footer 시작
Top //top 버튼
<p class="copyright">(C){$copyrightYear = date("Y");$copyrightYear} Site</p> //카피라이트
</div> //footer 끝
</div> //컨테이너 끝
이 내용을 //를 지우고 저장해보자. 그리고 css와 js는 빈 파일로 저장하고 설치폴더/layouts에 업로드하자. 이 레이아웃을 적용하면 이렇게 뜰 것이다.
척 봐도 막막하다. 이제 다음 장에서 본격적으로 꾸며보자.
참고문헌
https://github.com/xpressengine/xe-tutorial/tree/master/Make_Layout/03_write_layout_info
'자유잡담' 카테고리의 다른 글
[XE 1.x 강좌] 3.5. 레이아웃 상단 코딩 3(검색창), 컨텐츠 영역, 하단 코딩 (0) | 2017.02.24 |
---|---|
[XE 1.x 강좌] 3.3. CSS 기본 설정, 컨테이너, 상단 코딩 1 (1) | 2017.02.24 |
[XE 1.x 강좌] 3.1. 레이아웃 구상 (2) | 2017.02.01 |
[XE 1.x 강좌] 2. 기본 개념, 템플릿 문법의 이해 (0) | 2017.01.20 |
[XE 1.x 강좌] 1. 프롤로그, 준비, 관련 사이트 (1) | 2017.01.20 |