xpressengine3 테마 만들기 발표자료입니다.

1. XE Open Seminar
XE3 테마 만들기2016. 4. 29

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

3. 오늘은!!

4. http://contest.xpressengine.com/templates/basic/basic.main.html

5. 학습목표
테마를 담을 플러그인을 만들어보기
플러그인에 테마를 추가해 보기.
만든 테마를 출력해 보기.
블레이드(Blade) 템플릿 문법을 사용해 보기.
asset파일(js, css)를 로드해 보기.
테마 설정 페이지 만들어 보기

6. step1.
플러그인 생성

7. $ php artisan make:plugin
mytheme 'KhongchiPluginsMyTheme' 'my theme'
https://github.com/khongchi/plugin-mytheme

8. $ php artisan make:plugin mytheme 'KhongchiPluginsMyTheme' 'my theme'
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating autoload files
Plugin is created and activated successfully.
See ./plugins/mytheme directory. And open http://mysite.com/plugin/mytheme in your browser.
Input and modify your plugin information in ./plugins/mytheme/composer.json file.

10. step2.
테마 생성 & 등록

11. $ php artisan make:theme mytheme Basic 'BasicTheme'

12. $ php artisan make:theme mytheme Basic 'BasicTheme'
[New theme info]
plugin: mytheme
class name: KhongchiPluginsMyThemeBasic
class file: src/Theme/Basic.php
id: mytheme@basic
title: BasicTheme
description: Basic Theme supported by Mytheme plugin.
template file: views/theme/basic.blade.php
css file: assets/theme/basic.css,
config id: mytheme@mytheme@basic
config controller file: src/Controllers/Theme/ConfigController.php
Do you want to add theme? [yes|no]:
> yes
Theme is created successfully.

16. step3.
XE BASIC 템플릿 적용
하기

17. html 복붙!!!
css, js 로드!!!
meta tag 추가
파일분리
사용자정보 적용

19. XeFrontend
JS, CSS 파일 로드

20. XeFrontend::css('assets/core/xe-ui-component/xe-ui-component.css')->load();
XeFrontend::css([
'http://contest.xpressengine.com/templates/basic/css/layout.basic.css',
'http://contest.xpressengine.com/templates/basic/css/welcome.css',
])->load();
XeFrontend::js([
'http://contest.xpressengine.com/templates/basic//js/layout.basic.js',
'http://contest.xpressengine.com/templates/basic//js/colorset_test.js'
])->load();
XeFrontend::meta('viewport')->name('viewport')->content('width=1100')->load();

21. XeFrontend
동일 asset파일 중복 로드 처리
각 asset 파일간 로드 우선순위 지정
출력 위치 지정(head, body)
기타 기능 - 메타태그 추가, 브라우저타이틀 지정
...

22. Blade Template

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

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

25. step4.
Main 테마 추가하기

27. frame.blade.php
main.blade.php basic.blade.php
@extends
@section

28. src/Theme/Main.php 추가!
views/theme/main.blade.php 추가!
composer.json 파일 변경

29. step5.
테마 커스터마이징

30. 테마 설정
각 테마가 알아서 설정 페이지를 작성합니다..
PHP 코드... 작성해야 합니다.
좀 어려울 수 있지만, 완전 자유롭습니다.
</options>
<options value="C">
<title xml:lang="ko">이미지+제목(세로두배)</title>
</options>
<options value="D">
<title xml:lang="ko">이미지 + 제목 + 내용</title>
</options>
<options value="DD">
<title xml:lang="ko">이미지 + 제목 + 내용(세로두배)</title>
</options>
<options value="EE">
<title xml:lang="ko">소형 슬라이드(기본형)</title>
</options>
</var>
<var name="c_mobile9" type="select">
<title xml:lang="ko">L 위젯9 모바일 노출유무</title>
<description xml:lang="ko">모바일에서 노출유무 설정해 주십시오.</description>
<options value="">
<title xml:lang="ko">노출함</title>
</options>
<options value="N">
<title xml:lang="ko">노출안함</title>
</options>
</var>
<var name="c_title10" type="text">
<title xml:lang="ko">위젯10 타이틀</title>
<description xml:lang="ko">위젯10 타이틀을 입력해 주십시오.</description>
</var>
<var name="c_url10" type="text">
<title xml:lang="ko">L 위젯10 타이틀 링크</title>
<description xml:lang="ko">위젯10 타이틀의 링크를 입력해 주십시오.</description>
</var>
<var name="c_mid10" type="text">
<title xml:lang="ko">L 위젯10 SRL</title>
<description xml:lang="ko">위젯10의 module_srl를 입력해 주십시오.(게시판 편집에 마우스를 올리시면 화면 좌하단에 module_srl=숫자가 보입니다.
ex:112)</description>
</var>
<var name="c_box10" type="select">
<title xml:lang="ko">L 위젯10 크기형태</title>
<description xml:lang="ko">크기형태를 설정해 주십시오.</description>
<options value="">
<title xml:lang="ko">기본형</title>
</options>
<options value="box_x2">
<title xml:lang="ko">가로두배</title>
</options>
<options value="box_y2">
<title xml:lang="ko">세로두배</title>
</options>
</var>
<var name="c_style10" type="select">
<title xml:lang="ko">L 위젯10 내용형태</title>
<description xml:lang="ko">내용형태를 설정해 주십시오.</description>
<options value="">
<title xml:lang="ko">사용안함</title>
</options>
<options value="A">
<title xml:lang="ko">제목</title>
</options>
<options value="AA">
<title xml:lang="ko">제목(세로두배)</title>
</options>
<options value="B">
<title xml:lang="ko">갤러리</title>
</options>
<options value="BB">
<title xml:lang="ko">갤러리(가로두배)</title>
</options>
<options value="C">
<title xml:lang="ko">이미지+제목(세로두배)</title>
</options>
<options value="D">
<title xml:lang="ko">이미지 + 제목 + 내용</title>
</options>
<options value="DD">
<title xml:lang="ko">이미지 + 제목 + 내용(세로두배)</title>
</options>
<options value="EE">
<title xml:lang="ko">소형 슬라이드(기본형)</title>

31. 테마 설정
src/Controllers/Theme/ConfigController.php
views/theme/config.blade.php

32. 모바일 지원

33. http://xpressengine.io?_m=1

34. @mobileonly
..... code for mobile
@endmobileonly
-----------------------------------------------------------------
@desktoponly
..... code for desktop
@enddesktoponly

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

36. 향후 계획

37. XE UI Components

38. Widget Box

39. in 테마
in 위젯페이지

40. 감사합니다.