XE3에서 Theme 및 Skin의 구조와 제작하는 방법에 대한 소개합니다.

2. 홍성범
XpressEngine 커뮤니티 개발그룹

3. 오늘의 발표는

4. 테마?
테마의 구성
무엇을 알아야 하나?
스킨?
스킨의 구성
테마 패키지

5. 테마

6. 화면의 레이아웃과 디자인을 결정짓는 가장 중요한 요소
XE1에서는 'layout'이라 불렀음.

7. 레이아웃을 결정한다.

8. 화면의 이만큼을 담당합니다.

9. XE1과의 비교
비교항목 XE1 레이아웃 XE3 테마
템플릿 엔진
XE 자체 템플릿 문법,
2가지 버전
Blade
설정 편하다 자유롭다
패키지(묶음배포) 불가능 가능(플러그인)

10. 테마는
어떻게 구성되어 있나?

12. 필수 파일들
MyTheme.php
theme.blade.php
composer.json

13. MyTheme.php
Theme의 출력을 담당합니다.

14. <?php
namespace MyPlugin;
use XpressengineThemeAbstractTheme;
class MyTheme extends AbstractTheme
{
public function render()
{
// add code
return View::make('myplugin::views.theme');
}
}

15. composer.json
Theme를 등록할 때 필요합니다.

16. ...
"extra": {
"xpressengine": {
"title": "my plugin",
"component": {
"theme/myplugin@mytheme": {
"class": "MyPluginTheme",
"name": "my theme",
"description": "this is my theme",
"screenshot": "screenshot.jpg"
},
}
}
},
...
theme/myplugin@mytheme

17. theme.blade.php
Template 파일
Blade 템플릿 문법을 사용

18. {!! $content !!}

20. 더 알아야할 것들

21. Blade Template

22. Laravel에서 제공하는 Template Engine
매뉴얼
http://laravel.com/docs/5.1/blade
http://xpressengine.github.io/laravel-korean-docs/
docs/5.0/templates (한글)

23.
{{-- 데이터 출력 --}}
{{ $title }}
{!! $description !!}
{{-- 조건문 --}}
@if($title == '')
@endif
{{-- 반복문 --}}
@foreach($posts as $post)
@endforeach
{{-- 레이아웃 구성 --}}
@include('view.name')
@section('sidebar')
@endsection
@yield('content')
@extends('view.layout')

24. JS, CSS 파일 로드

25. Frontend를 사용하세요.
중복 로드 처리
우선순위 지정
위치 지정
기타 기능 - 메타태그 추가, 브라우저타이틀 지정...

26. Frontend::css('assets/vendor/bootstrap/css/bootstrap.css')->load();
Frontend::css(
[
'assets/common/css/grid.css',
'assets/common/css/webfont.css',
'assets/common/css/badge.css'
]
)->before('assets/vendor/bootstrap/css/bootstrap.css')->load();
Frontend::js(
[
'assets/vendor/html5shiv/dist/html5shiv.min.js',
'assets/vendor/respond/dest/respond.min.js'
]
)->appendTo('head')->target('lt IE 9')->load();

27. 테마 편집

28. 사이트 관리자가
테마를 고칠수 있게..

29. <?php
namespace MyPlugin;
use XpressengineThemeAbstractTheme;
class Theme extends AbstractTheme
{
public static function getEditFiles()
{
return [
'template' => [
'plugins/myplugin/views/theme.blade.php',
],
'stylesheet' => [
'plugins/myplugin/assets/css/style.css',
]
];
}
public function render()
{
return View::make('myplugin::views.theme');
}
}

31. 테마 설정
각 테마가 알아서 설정 페이지를 작성합니다..
PHP 코드... 작성해야 합니다.
좀 어려울수 있지만, 완전 자유롭습니다.
<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.2">
<title xml:lang="ko">doorweb basic 레이아웃</title>
<title xml:lang="en">doorweb basic Layout</title>
<description xml:lang="ko">doorweb_basic 레이아웃.</description>
<description xml:lang="en">doorweb_basic layout.</description>
<version>1.7.7</version>
<date>2015-01-27</date>
<author email_address="doorweb1@gmail.com" link="http://doorweb.net/xe">
<name xml:lang="ko">DoorWeb</name>
<name xml:lang="en">DoorWeb</name>
</author>
<menus>
<menu name="main_menu" maxdepth="3" default="true">

32. 모바일

33. Responsible Web Design

34. 모든 데이터를 모든 장치에게 다
보낼것인가?

35. Hybrid Web Design

36. Hybrid Web Design

37. Hybrid Web Design

38. Hybrid Web Design
@mobileonly
..... code for mobile
@endmobileonly
-----------------------------------------------------------------
@desktoponly
..... code for desktop
@enddesktoponly

39. 셋팅 테마
관리페이지용 테마

40. 셋팅테마도 바꿀 수 있습니다.

41. 스킨

42. 화면의 이만큼을 담당합니다.

43. XE1
- 모듈스킨, 위젯스킨 존재, 따로 따로 등록
XE3
- "스킨"
- 모든 것에 스킨을 적용할 수 있다.

44. 회원 인증 페이지 스킨(로그인, 가입 관련)
member/auth/skin/myplugin@myauth
게시판 스킨
module/board@board/skin/myplugin@myboard
member/auth/skin/myplugin@myauth

45. 패키지로 배포하세요.
(묶음배포)

46. 인덱스 테마, 서브테마, 심플테마.
게시판스킨
회원인증 스킨, 회원프로필 스킨
위젯 스킨들...

47. ...
"extra": {
"xpressengine": {
"title": "my plugin",
"component": {
"theme/alice@main": {
"class": "XpressenginePluginsAliceThemeMain",
"name": "Alice (for main)",
"description": "The First Theme for XpressEngine3. use this to index page",
"screenshot": "/plugins/alice/screenshots/main.png"
},
"theme/alice@sub": {
"class": "XpressenginePluginsAliceThemeSub",
"name": "Alice (for sub)",
"description": "The First Theme for XpressEngine3. use this to sub page",
"screenshot": "/plugins/alice/screenshots/sub.png"
},
"module/board@board/skin/alice@site": {
"class": "XpressenginePluginsAliceSkinBoard",
"name": "Alice (for site default)",
"description": "Board Skin",
"screenshot": "/plugins/alice/screenshots/board.png"
}
}
}
},
...

48. 테마 제작자 분들의 수준이 높아짐.
더 자유롭게..
자유성과 함께 편의 제공을 위해 계속 노력할 것이다.
Theme Generator, Theme Config Generator

49. 감사합니다.