Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XECon2015 :: [2-3] 홍성범 - XE3 Theme 제작 소개

413 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

XECon2015 :: [2-3] 홍성범 - XE3 Theme 제작 소개

  1. 1. 홍성범 XpressEngine 커뮤니티 개발그룹
  2. 2. 오늘의 발표는
  3. 3. 테마? 테마의 구성 무엇을 알아야 하나? 스킨? 스킨의 구성 테마 패키지
  4. 4. 테마
  5. 5. 화면의 레이아웃과 디자인을 결정짓는 가장 중요한 요소 XE1에서는 'layout'이라 불렀음.
  6. 6. 레이아웃을 결정한다.
  7. 7. 화면의 이만큼을 담당합니다.
  8. 8. XE1과의 비교 비교항목 XE1 레이아웃 XE3 테마 템플릿 엔진 XE 자체 템플릿 문법, 2가지 버전 Blade 설정 편하다 자유롭다 패키지(묶음배포) 불가능 가능(플러그인)
  9. 9. 테마는 어떻게 구성되어 있나?
  10. 10. 필수 파일들 MyTheme.php theme.blade.php composer.json
  11. 11. MyTheme.php Theme의 출력을 담당합니다.
  12. 12. <?php
 namespace MyPlugin;
 
 use XpressengineThemeAbstractTheme;
 
 class MyTheme extends AbstractTheme
 {
 public function render()
 { // add code return View::make('myplugin::views.theme');
 }
 }

  13. 13. composer.json Theme를 등록할 때 필요합니다.
  14. 14. ... "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
  15. 15. theme.blade.php Template 파일 Blade 템플릿 문법을 사용
  16. 16. {!! $content !!}
  17. 17. 더 알아야할 것들
  18. 18. Blade Template
  19. 19. Laravel에서 제공하는 Template Engine 매뉴얼 http://laravel.com/docs/5.1/blade http://xpressengine.github.io/laravel-korean-docs/ docs/5.0/templates (한글)
  20. 20. 
 {{-- 데이터 출력 --}}
 {{ $title }}
 {!! $description !!}
 
 {{-- 조건문 --}}
 @if($title == '')
 @endif
 
 {{-- 반복문 --}}
 @foreach($posts as $post)
 @endforeach
 
 {{-- 레이아웃 구성 --}}
 @include('view.name')
 
 @section('sidebar')
 @endsection
 
 @yield('content')
 
 @extends('view.layout')

  21. 21. JS, CSS 파일 로드
  22. 22. Frontend를 사용하세요. 중복 로드 처리 우선순위 지정 위치 지정 기타 기능 - 메타태그 추가, 브라우저타이틀 지정...
  23. 23. 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();
  24. 24. 테마 편집
  25. 25. 사이트 관리자가 테마를 고칠수 있게..
  26. 26. <?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');
 }
 
 }
  27. 27. 테마 설정 각 테마가 알아서 설정 페이지를 작성합니다.. 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">

  28. 28. 모바일
  29. 29. Responsible Web Design
  30. 30. 모든 데이터를 모든 장치에게 다 보낼것인가?
  31. 31. Hybrid Web Design
  32. 32. Hybrid Web Design
  33. 33. Hybrid Web Design
  34. 34. Hybrid Web Design @mobileonly
 ..... code for mobile @endmobileonly 
 -----------------------------------------------------------------
 @desktoponly ..... code for desktop 
 @enddesktoponly

  35. 35. 셋팅 테마 관리페이지용 테마
  36. 36. 셋팅테마도 바꿀 수 있습니다.
  37. 37. 스킨
  38. 38. 화면의 이만큼을 담당합니다.
  39. 39. XE1 - 모듈스킨, 위젯스킨 존재, 따로 따로 등록 XE3 - "스킨" - 모든 것에 스킨을 적용할 수 있다.
  40. 40. 회원 인증 페이지 스킨(로그인, 가입 관련) member/auth/skin/myplugin@myauth 게시판 스킨 module/board@board/skin/myplugin@myboard member/auth/skin/myplugin@myauth
  41. 41. 패키지로 배포하세요. (묶음배포)
  42. 42. 인덱스 테마, 서브테마, 심플테마. 게시판스킨 회원인증 스킨, 회원프로필 스킨 위젯 스킨들...
  43. 43. ... "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"
 } 
 }
 }
 }, ...
  44. 44. 테마 제작자 분들의 수준이 높아짐. 더 자유롭게.. 자유성과 함께 편의 제공을 위해 계속 노력할 것이다. Theme Generator, Theme Config Generator
  45. 45. 감사합니다.

×