홍성범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="[email protected]" 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
감사합니다.