메뉴 건너뛰기

1 / 1

레이아웃 스킨정보 파일 작성

스킨정보파일 작성 예

?
스킨 정보파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
    <title xml:lang="ko">나의 레이아웃</title>
    <title xml:lang="en">My laytout</title>
    <description xml:lang="ko">
        나의 첫번째 레이아웃입니다.
        Author : phiz
    </description>
    <description xml:lang="en">
        It's My first layout.
        Author : phiz
    </description>
    <version>1.0</version>
    <date>2017-01-21</date>
    <link>http://phiz.kr/</link>
 
    <author email_address="phiz@phiz.kr" link="http://phiz.kr/">
        <name xml:lang="ko">phiz</name>
        <name xml:lang="en">phiz</name>
    </author>
    <extra_vars>
     
    </extra_vars>
    <menus>
        <menu name="main_menu" maxdepth="3" default="true">
            <title xml:lang="ko">상단 메뉴</title>
            <title xml:lang="en">Top menu</title>
        </menu>
    </menus>
</layout>

 

코드 설명
<?xml version="1.0" encoding="UTF-8"?> xml 문서형식선언
<layout version="0.2"> 레이아웃 정보문서임을 선언. 여기에 작성하는 버전은 XE Core에서 지원하는 버전을 표기해야하며 XE 1.4.4.2 이후 0.2입니다.
<title xml:lang="ko">...</title> 레이아웃 이름.
<description xml:lang="ko">...</description> 레이아웃 설명
<version>...</version> 레이아웃 스킨의 버전. 레이아웃이 변경됨에 따라 제작자 버전을 표기합니다.
<date>YYYY-MM-DD</date> 레이아웃 스킨 제작 날짜. 년-월-일(YYYY-MM-DD) 형식으로 작성합니다.

<author email_address="..."link="...">

  <name xml:lang="ko">...</name>
</author>

 레이아웃 스킨 제작자 정보. 이메일 주소, 웹 사이트 주소,제작자 이름을 작성합니다.

<menus> 
  <menu name="main_menu" maxdepth="2" default="true">
  <title xml:lang="ko">...</title>
  </menu>

</menus>

XE 관리자 페이지의 제어판에서 생성한 메뉴를 레이아웃에 연결합니다. 

<menus>...</menus> 요소 안에 2 개 이상의 <menu>...</menu>를 작성할 수 있습니다.
<extra_vars>...</extra_vars>

확장변수. <extra_vars> 요소안에 여러타입의 사용자 정의 변수를 추가할 수 있습니다.

레이아웃 설정에서 select, image, text, textarea 타입의 데이터를 입력받아 레이아웃 스킨에서 변수로 사용할 수 있습니다.

 

확장변수 작성 예

?
확장변수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
 ...
 <extra_vars>
 <var name="colorset" type="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>

 

코드 설명
<extra_vars>...</extra_vars>

확장변수 컨테이너. 이 요소 안에 확장변수를 정의합니다.

확장변수는 <group></group>요소로 그룹으로 나누어 작성할 수 있습니다.
 <var name="colorset" type="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>

확장변수 이름은 "colorset"이라 명명했으며, select type입니다.

여기서 option은 "black"과 "white"입니다.

레이아웃 스킨에서 {$layout_info->colorset}의 형태로 출력할 수 있습니다.

레이아웃 스킨에서 다음과 같이 사용할 수 있습니다.

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

<load target="css/white.css" />

<!--@else-->

<load target="css/black.css" />

<!--@end-->

레이아웃 설정에서 colorset를 "white"를 선택했으면 white.css를 "black"를 선택했으면 black.css를 참조하게 하여 다른 디자인을 출력할 수 있습니다.

* 위 구문에 사용된 if문과 load문은 xe 템플릿 문법으로 xe에서만 사용하는 코드입니다.(xe 템플릿 문법 참조)
 <var name="logo_image" type="image">
 <title xml:lang="ko">로고 이미지</title>
 <description xml:lang="ko">페이지 상단에 출력할 로고이미지를 입력하세요.</description>
 </var>

확장변수 이름은 "logo_image"이며 image type입니다.

레이아웃 설정에서 이미지를 업로드할 수 있으며 업로드한 이미지는 {$layout_info->logo_image}로 출력할 수 있습니다.

레이아웃 설정에서 다음과 같이 활용합니다.

<a class="logo-image" href="{$layout_info->logo_url}" ><img src="{$layout_info->logo_image}" alt="" /></a>
 <var name="logo_url" type="text">
 <title xml:lang="ko">로고 이미지 링크</title>
 <description xml:lang="ko">로고 이미지를 클릭할 때 이동할 URL을 입력해 주세요.</description>
 </var>

text type의 확장변수

{$layout_info->logo_url} 형식으로 출력 
 <var name="title_description" type="textarea">
 <title xml:lang="ko">본문 상단 내용</title>
 <description xml:lang="ko">본문 상단에 표시되는 영역의 내용을 입력해주세요.(HTML 사용가능)</description>
 </var>

textarea type의 확장변수 

레이아웃에 위젯코드나 html코드 삽입 등에 유용합니다.

 

 

이전글 - 레이아웃 디렉토리 구조 XE 템플릿 문법 - 다음글
Copyright © phiz.kr. All rights reserved.