xecon2015 :: [2-3] 홍성범 - xe3 theme 제작 소개

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

오늘의 발표는

테마?

테마의 구성

무엇을 알아야 하나?

스킨?

스킨의 구성

테마 패키지

테마

화면의 레이아웃과 디자인을 결정짓는 가장 중요한 요소

XE1에서는 'layout'이라 불렀음.

레이아웃을 결정한다.

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

XE1과의 비교

비교항목 XE1 레이아웃 XE3 테마

템플릿 엔진XE 자체 템플릿 문법,

2가지 버전Blade

설정 편하다 자유롭다

패키지(묶음배포) 불가능 가능(플러그인)

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

필수 파일들

MyTheme.php

theme.blade.php

composer.json

MyTheme.php

Theme의 출력을 담당합니다.

<?php namespace MyPlugin; use Xpressengine\Theme\AbstractTheme; class MyTheme extends AbstractTheme { public function render() {

// add code

return \View::make('myplugin::views.theme'); } }

composer.json

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

...

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

...

theme/myplugin@mytheme

theme.blade.php

Template 파일

Blade 템플릿 문법을 사용

{!! $content !!}

더 알아야할 것들

Blade Template

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')

JS, CSS 파일 로드

Frontend를 사용하세요.

중복 로드 처리

우선순위 지정

위치 지정

기타 기능 - 메타태그 추가, 브라우저타이틀 지정...

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

테마 편집

사이트 관리자가

테마를 고칠수 있게..

<?php namespace MyPlugin; use Xpressengine\Theme\AbstractTheme; 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'); } }

테마 설정

각 테마가 알아서 설정 페이지를 작성합니다..

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"> <title xml:lang="ko">메인메뉴</title>

모바일

Responsible Web Design

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

Hybrid Web Design

Hybrid Web Design

Hybrid Web Design

Hybrid Web Design

@mobileonly

..... code for mobile

@endmobileonly-----------------------------------------------------------------

@desktoponly

..... code for desktop@enddesktoponly

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

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

스킨

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

XE1

- 모듈스킨, 위젯스킨 존재, 따로 따로 등록

XE3

- "스킨"

- 모든 것에 스킨을 적용할 수 있다.

회원 인증 페이지 스킨(로그인, 가입 관련)member/auth/skin/myplugin@myauth

게시판 스킨module/board@board/skin/myplugin@myboard

member/auth/skin/myplugin@myauth

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

인덱스 테마, 서브테마, 심플테마.

게시판스킨

회원인증 스킨, 회원프로필 스킨

위젯 스킨들...

...

"extra": { "xpressengine": { "title": "my plugin","component": { "theme/alice@main": { "class": "Xpressengine\\Plugins\\Alice\\Theme\\Main", "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": "Xpressengine\\Plugins\\Alice\\Theme\\Sub", "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": "Xpressengine\\Plugins\\Alice\\Skin\\Board", "name": "Alice (for site default)", "description": "Board Skin", "screenshot": "/plugins/alice/screenshots/board.png" } } } },

...

테마 제작자 분들의 수준이 높아짐.

더 자유롭게..

자유성과 함께 편의 제공을 위해 계속 노력할 것이다.

Theme Generator, Theme Config Generator

감사합니다.