Enable!

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