XE 템플릿 문법

참고사이트 - https://github.com/xpressengine/xe-tutorial

XE 템플릿 문법은 서버 측에서 PHP 문법으로 해석되며 DB로부터 원하는 정보를 뽑아내어 사용자 화면에 출력합니다. XE 템플릿 문법을 사용하면 모듈 또는 위젯의 기능이나 내용을 허용된 범위 안에서 확장하거나 축소할 수 있습니다.

XE 템플릿 문법을 적용하여 작성하는 방법에는 다음과 같은 네가지가 있습니다.

• HTML 주석 <!--...--> 안에 작성하는 방법
• 가상의 <block> 요소 안에 작성하는 방법
• HTML 요소에 직접 작성하는 방법
• 주석이나 요소에 의존하지 않고 작성하는 방법

<block> 요소는 HTML 표준 요소가 아니라 XE core만의 가상의 HTML 요소입니다. HTML 요소의 형식을 빌려쓰고는 있지만 제어문을 실행할 뿐 실제로 화면에 요소가 출력되지는 않습니다. cond 속성 또한 XE core만의 가상의 속성으로서 조건문 역할을 합니다.  

변수

변수는 프로그램에서 미리 선언한 내용을 출력하거나 사용자들이 입력한 내용을 다시 화면에 출력할 때 필요합니다. 사용자 화면에서 볼 수 있는 대부분의 내용이 모두 변수로 출력된 것이라 해도 과언이 아닙니다.

변수의 사용 형식은 다음과 같습니다.

기본 형식

{$string}

변수의 기본 형식은 중괄호{} 안에 변수 이름을 적고 앞에 달러($) 기호를 붙이는 것입니다. 변수 이름은 문자열로 작성해야 하고 미리 선언된 이름만 사용할 수 있습니다.

변수 속의 변수 형식

{$string->string}

{$string->string->string}

변수는 또 다른 변수를 포함하고 있을 수 있는데 이런 변수를 사용하려면 하이픈과 꺾는 괄호(->)를 사용하여 변수와 변수를 연결합니다.

변수 속의 함수 형식

{$string->string()}

{$string->string(string or integer)}

변수에 함수를 연결 연결하려면 하이픈과 꺽는 괄호(->)를 사용합니다. 함수 이름 뒤에는 항상 소괄호()가 붙습니다. 소괄호에는 함수의 내용으로 문자열이나 정수를 포함할 수 있습니다. 함수 이름으로는 미리 선언된 이름만 사용할 수 있습니다.

XE core 변수

XE core 변수란 XE core에서 사용하는 변수를 말합니다. XE core 변수는  여러 모듈에서 두루 사용할 수 있습니다. 특정 모듈에서만 사용할 수 있는 변수들도 있는데 이런 변수들은 그냥 변수라고 부릅니다. XE core 변수는 다음과 같습니다. (실제로는 종류가 더 있고, 조금 다른 부분도 있습니다.)

$is_logged (사용자의 로그인 여부를 확인)

$current_url (현재 페이지 URL)

$request_url (XE core 설치  URL)

$logged_info (로그인 사용자에게 자신의 회원 정보를 보여 줌)

$module_info (현재 모듈의 정보를 보여 줌)

조건문

주어진 조건에 따라 필요한 내용을 문맥에 알맞게 출력하거나 출력하지 않아야 할 때 조건문이 필요합니다. 조건문은 if elseif else end 와 조건식으로 이루어져 있습니다. if 문이 시작되면 반드시 end 문으로 닫아서 조건문이 끝났음을 선언해야 합니다. 조건식 내용은 PHP로 해석되기 때문에  PHP에서 사용 가능한 여러가지 연산자를 사용할 수도 있습니다.

다음은 "Welcome XE!" 라는 문장을 표현하는 다양한 조건문 사용법입니다.

조건식이 참이면 포함된 내용을 출력

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

    <p>Welcome XE!</p>

<!--@end-->

조건식이 참이면 포함된 내용을 출력

<block cond="조건식">

    <p>Welcome XE!</p>

</block>

조건식이 참이면 <p>요소와 함께 포함된 내용을 출력

<p cond="조건식">

    Welcome XE!

</p>

<p>요소는 무조건 출력하는데 조건식이 참이면 attr="value" 속성과 값을 출력

<p attr="value"|cond="조건식">

    Welcome XE!

</p>

if elseif else 문을 동시에 사용하면 참 또는 거짓뿐만 아니라 여러가지 조건을 부여하고 조건에 따라 다른 결과를 출력할 수 있습니다.

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

    <p>조건A를 만족하면 이 문장을 출력합니다.</p>

<!--@elseif(조건B)-->

    <p>조건A를 만족하지 못하고 조건B를 만족하면 이 문장을 출력합니다.</p>

<!--@else-->

    <p>조건A, 조건B를 동시에 만족하지 못하면 이 문장을 출력합니다.</p>

<!--@end-->

위와 같은 조건식을 XE core 1.4.4 버전부터 새로 추가된 cond 조건식으로 바꾸면 다음과 같이 더 단순하게 표현할 수 있습니다.

<p cond="조건A">조건A를 만족하면 이 문장을 출력합니다.</p>

<p cond="조건B">조건B를 만족하면 이 문장을 출력합니다.</p>

<p cond="!조건A && !조건B">조건A, 조건B를 동시에 만족하지 못하면 이 문장을 출력합니다.</p>

반복문

주어진 조건에 따라 필요한 내용을 반복해서 출력해야 할 때 반복문이 필요합니다. 반복문은 foreach end 와 조건식으로 이루어져 있습니다. foreach 문이 시작되면 반드시 end 문으로 닫아서 반복문이 끝났음을 선언해야 합니다.

$key값 없이 <li>...</li> 반복

<!--@foreach(배열변수명 as $value)-->

    <li>{$value}</li>

<!--@end-->

<block loop="배열변수명=>$value">

    <li>{$value}</li>

</block>

<li loop="배열변수명=>$value">{$value}</li>

$key값 포함 <li>...</li> 반복

<!--@foreach(배열변수명 as $key => $value)-->

    <li>{$key}/{$value}</li>

<!--@end-->

<block loop="배열변수명=>$key,$value">

    <li>{$key}/{$value}</li>

</block>

<li loop="배열변수명=>$key,$value">{$key}/{$value}</li>

$초기값 0부터 시작하여 <li>...</li> 100회 반복

<!--@foreach($i=0;$<100;$i++)-->

    <li>...</li>

<!--@end-->

<block loop="$i=0;$<100;$i++">

    <li>...</li>

</block>

<li loop="$i=0;$<100;$i++">...</li>

loop 속성은 HTML 표준 속성이 아니라 XE core만의 템플릿 문법 중 하나입니다. loop 는 foreach 문의 조건식을 표현할 때 사용하는 가상의 속성입니다.

간단한 PHP 사용

중괄호 안에 앳(@) 기호를 포함하면 간단한 PHP 문장을 사용할 수 있습니다.

{@$is_logged = Context::get('is_logged')}

PHP문을 사용할 때 하나의 문장은 하나의 줄에 작성해야 합니다. 예를 들어 다음과 같은 문장은 PHP에서는 문제가 없지만 XE에서는 치명적인 오류를 내기도 합니다. 여러 개의 문장이 한 줄에 작성되었기 때문입니다.

{@$test = 365; $test = $test * test}

위의 문장은 다음과 같이 한 줄에 한 문장씩 작성해야 합니다.

{@

    $test = 365;

    $test = $test * $test;
}

include 문

여러 페이지에 걸쳐 반복되는 컨텐츠 블록이 있으면 별도의 파일로 분할하여 관리하는 것이 편리합니다. 하나의 파일만 수정하면 여러 페이지에 한번에 적용할 수 있기 때문입니다. include는 별도의 파일을 현재 페이지로 불러오는 명령어입니다.

<!--#include("header.html")-->

<include target="header.html" />

<include /> 요소는 HTML 표준 요소가 아니라 XE core만의 가상의 요소입니다. HTML 요소의 형식을 빌려 쓰고는 있지만 include문을 실행할 뿐 실제로 화면에 <include /> 요소가 출력되지는 않습니다. target 속성 또한 XE core만의 템플릿 문법 중 하나입니다. target 속성에는 포함(include)하려면 파일의 경로로 작성합니다.

JS & CSS 파일 참조

JS & CSS 파일을 HTML 문서에서 참조하는 방법을 설명합니다.

JS & CSS 파일 참조

<!--%import("xe.js")-->

<!--%import("xe.css")-->

또는

<load target="xe.js" />

<load target="xe.css" />

HTML 문서의 <head> 요소에서 xe.js & xe.css 파일을 참조합니다. 결과 코드는 다음과 같습니다.

<head>

    <!-- js 파일 -->

    <script type="text/javascript" src="xe.js"></script>

    <!-- css 파일 -->

    <link rel="stylesheet" type="text/css" href="xe.css" />

</head>

<body> 요소에서의 JS 파일 참조

<load target="xe.js" type="body" />

<body> 요소에서 JS 파일을 불러오면 <body> 요소가 끝나기 직전에 JS 파일 참조가 선언됩니다. 결과 코드는 다음과 같습니다.

<body>

    ......

    <script type="text/javascript" src="xe.js"></script>

</body>

CSS 파일은 HTML 문서의 <head> 요소에서만 참조할 수 있습니다. <body> 요소에서 별도의 CSS 파일을 참조하면 HTML 문법 오류가 발생합니다.

CSS 파일 media 지정

<load target="xe.css" media="print" />

CSS 파일의 대상이 되는 미디어를 선택하여 지정할 수 있습니다. 결과 코드는 다음과 같습니다.

<head>

    <link rel="stylesheet" type="text/css" href="xe.css" media="print" />

</head>

IE 조건부 주석 사용

<load target="xe.js" targetie="IE 6" />

<load target="xe.css" targetie="IE 6" />

targetie 속성을 사용하면 JS & CSS 파일을 IE의 특정 브라우저 버전에서만 해석할 수 있도록 조건부 주석으로 출력합니다. 결과 코드는 다음과 같습니다.

<!--[if IE 6]>

    <script type="text/javascript" src="xe.js"></script>

    <link rel="stylesheet" type="text/css" href="xe.css" />

<![endif]-->

이 코드는 모든 브라우저에서 주석으로 처리하지만 IE 6 브라우저는 주석으로 처리하지 않고 해석합니다.

JS & CSS 파일 참조 선언 순서 변경

<load  target="xe.js" index="-1" />

<load  target="xe.css" index="-1" />

index 속성을 사용하면 JS & CSS 파일의 선언 순서를 변경할 수 있습니다.

index 속성의 값은 양의 정수 또는 음의 정수를 사용할 수 있습니다. 음의 정수를 사용하면 더 빨리 선언할 수 있고, 양의 정수를 사용하면 더 늦게 선언할 수 있습니다. index 값을 "-1" 로 지정하면 다른 JS & CSS 파일보다 한 줄 빠른 위치에서 선언됩니다.

CSS 파일은 동일한 명령이 충돌하는 경우 나중에 선언된 값이 우선 순위를 갖게 되기 때문에 우선 순위를 높게 두어야 하는 경우 나중에 선언하는 것이 좋습니다.

XML JS 필터 적용

XML JS 필터는 XML 형식으로 입력 항목을 정의해 두면 폼을 전송할 때 유효성 검사를 자동으로 수행하는 기능입니다. 유효성 검사는 XML 기반으로 자동으로 변환된 자바스크립트가 수행하므로 사용자는 복잡한 자바스크립트를 작성할 필요가 없습니다. XML JS 필터는 유효성 검사를 통과한 폼 데이터를 어떤 모듈의 어떤 명령어로 보낼 것인지 정하는 기능도 합니다.

XML JS 필터를 적용하는 방법은 CSS, JS 파일을 참조하는 문법과 동일합니다.

<!--%import("valid.xml")-->

이렇게 XML JS 필터를 불러오면 XML 문서는 JS 문서로 컴파일되어 소스 코드로 출력됩니다. 출력 결과는 다음과 같습니다.

<body>

    ......

    <script type="text/javascript" src="valid.js"></script>

</body>

참조 파일 제거

경로가 일치하는 참조 파일 제외

<unload target="xx.xx" />

위젯 삽입하기

위젯은 XE core 또는 모듈에 포함된 정보를 사용자에게 의미있는 형태로 가공해서 보여주는 인터페이스 역할을 합니다. 웹사이트 초기화면에 최근 게시물을 나타내는 위젯과 로그인 양식을 보여주는 위젯이 XE core에 포함되어 있습니다. 위젯이 존재하는 이유는 스킨 제작자가 복잡한 프로그램 로직을 모르는 경우에도 쉽게 원하는 기능을 구현할 수 있도록 지원하기 위해서입니다.

제작자는 템플릿 코드 한 줄만으로도 원하는 기능을 구현할 수 있습니다. 위젯을 삽입하기 위한 템플릿 코드는 <img /> 요소에 widget이라는 속성을 포함하고 있습니다. <img /> 요소는 HTML 표준이기도 하지만 widget이라는 속성을 포함하면서 XE 템플릿 문법으로 해석되어 서버에서 표준 HTML로 변환됩니다.

다음은 로그인 양식을 출력하는 위젯 삽입 코드입니다.

<img widget="login_info" skin="xe_official" />

위젯을 삽입하기 위한 코드는 XE 관리자 페이지에서 사이트 설정 > 위젯 을 선택하고 코드 생성 기능을 사용하면 자동으로 생성됩니다.

주석 처리

<!--// 주석 처리 -->