XE Open seminar 테마만들기

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

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

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

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

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

$ 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.

XE Open seminar 테마만들기

$ php artisan make:theme mytheme Basic 'BasicTheme'

$ 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.

step3.
XE BASIC 템플릿 적용
하기

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

XeFrontend
JS, CSS 파일 로드

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();

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

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

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

step4.
Main 테마 추가하기

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

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

step5.
테마 커스터마이징

테마 설정
각 테마가 알아서 설정 페이지를 작성합니다..
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>

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

http://xpressengine.io?_m=1

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

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

XE Open seminar 테마만들기

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to XE Open seminar 테마만들기 (20)

XE Open seminar 테마만들기

Editor's Notes