XE 사이트 만들기

XE3 플러그인 / 컴포넌트 제작방법

Study4U, 2019-01-14 10:59:38

조회 수
81
추천 수
0

XE3 가 정식 출시되면서 XE3에 사용되는 다양한 컴포넌트를 제작하면서 필요한 내용을 기록 하려한다.


## 플러그인 제작 단계 ##

XE3는 '플로그인' 등록을 통해 컴포넌트를 제작할 수 있다.

컴포넌트'는 XE의 다양한 테마(레이아웃), 스킨, 위젯, 에디터, 모듈등의 구성요소를 통틀어 지칭하는 용어이다.

 

플러그인 개발자들은 컴포넌트를 제작하여 XE3에 등록할 수 있다. 만약 자신만의 컴포넌트를 만들어 사용하고 싶다면 먼저 플러그인을 하나 생성한 다음 플러그인에 컴포넌트를 추가해 넣는다. 그 다음, 플러그인을 활성화하면 자신이 제작한 컴포넌트를 XE3에서 사용할 수 있다.


예를 들어 새로운 테마를 만들어서 자신의 사이트에 적용하고 싶다면, 먼저 빈 플러그인을 하나 생성한 후, 플러그인 안에서 테마 컴포넌트를 만든다. 만약 테마와 함께 게시판 스킨과 위젯도 만들어서 사이트에 적용하고 싶다면, 이 두가지 컴포넌트도 같은 플러그인에 추가하면 된다. 플러그인을 활성화하면 플러그인에 포함된 컴포넌트들을 XE3에서 모두 사용할 수 있다.


XE에서는 각 컴포넌트를 따로 XE에 추가해야 했다. XE3에서는 하나의 플러그인에 컴포넌트를 모두 포함하여 한번에 추가할 수 있다. 배포할 때에도 마찬가지로 각 컴포넌트를 따로 배포하지 않고, 플러그인 하나에 담아서 배포하면 된다.


1. 플로그인 생성


# php artisan make:plugin <name> <vendor>

예시: 

# php70 artisan make:plugin myPlugin Study4U


2. 플로그인 설치/ 업데이트 / 삭제

# php artisan plugin:install <name>

# php artisan plugin:update <name>

# php artisan plugin:uninstall <name>

예시: 

# php70 artisan plugin:uninstall myPlugin -f


3. 플로그인 정보 수정

플로그인 생성하면 'plugin/myPlygin' 폴더 하위에 composer.json 라는 파일이 생성되어 있다. 이 파일의 내용을 수정하면 된다.

{

  "name": "xpressengine-plugin/myPlugin",

  "description": "This Package is Xpressengine Plugin - myPlugin plugin.",

  "keywords": [

    "xpressengine",

    "plugin"

  ],

  "license": "LGPL-2.1",

  "version": "1.0.0",

  "type": "xpressengine-plugin",

  "support": {

    "email": "input@your.email"

  },

  "authors": [

    {

      "name": "input your name",

      "email": "input@your.email",

      "homepage": "http://input.your.site",

      "role": "Developer"

    }

  ],

  "extra": {

    "xpressengine": {

      "title": "MyPlugin plugin",

      "component": {}

    }

  },

  "require": {

  },

  "autoload": {

    "psr-4": {

      "Study4U\\XePlugin\\MyPlugin\\": "src/"

    }

  }

}



## [테마 컴포넌트 제작단계] ##


1. 테마 생성

# php artisan make:theme <plugin> <name>

예시:

# php70 artisan make:theme myPlugin mytheme


2. 테마 설정 파일 수정

생성된 테마는 '/plugins/myPlugin/src/Themes' 폴더 하위에 테마 폴더가 생성된다.

생성된 'info.php' 의 내용을 수정하면 된다.

XE1 에서의 /layouts/레이아웃명/conf/info.xml 에 설정항목을 등록하였는데, XE3에서는 'plugins/myPlugin/src/Themes/테마명/info.php' 에 설정항목을 등록하면 된다.


기본 예시:

<?php

return [

    'view' => 'theme',

    'setting' => [

        'logo_title' => [

            '_type' => 'text',

            '_section' => '로고 설정',

            'label' => '로고 타이틀',

            'placeholder' => '로고 제목을 입력하세요',

            'description' => '로고 제목을 입력하세요',

        ],

        'show_spot' => [

            '_type' => 'select',

            '_section' => '스팟 설정',

            'label' => '스팟 출력 ',

            'options' => [

                'hide' => '출력 안 함',

                'show' => '출력 함'

            ]

        ],

        'spot_title' => [

            '_type' => 'text',

            '_section' => '스팟 설정',

            'label' => '스팟 타이틀',

            'placeholder' => '스팟에 출력할 제목을 입력하세요',

            'description' => '스팟에 출력할 제목을 입력하세요',

        ],

        'spot_content' => [

            '_type' => 'textarea',

            '_section' => '스팟 설정',

            'label' => '스팟 내용',

            'placeholder' => '스팟에 출력할 내용을 입력하세요',

            'description' => '스팟에 출력할 내용을 입력하세요',

        ],

        'spot_image' => [

            '_type' => 'image',

            '_section' => '스팟 설정',

            'label' => '스팟 이미지',

            'description' => '스팟에 출력할 이미지를 등록하세요'

        ],

        'gnb' => [

            '_type' => 'menu',

            '_section' => '메뉴 설정',

            'label' => '메인메뉴',

        ]

    ],

    'setting.assets' => [

        'js' => ['js/theme.js'],

        'css' => ['css/theme.css']

    ],

    'support' => [

        'mobile' => true,

        'desktop' => true

    ],

    'editable' => [

        'theme.blade.php',

        'gnb.blade.php'

    ]

];


3번째 라인에 'view' => 'theme' 구문이 있다.

view 필드는 테마를 출력할때 사용되는 템플릿 파일을 지정하는 필드로서, 첫 시작 문서경로는  '/plugins/플로그인명/src/Themes/테마명/views/ 이며, 문서는 'theme.blade.php' 이다.

setting 필드에는 테마 설정 페이지에서 사용할 설정 항목에 대한 정보를 지정한다.

setting.assets 필드에는 테마 설정 페이지에서 로드할 javascript, css파일을 지정한다. 경로는 assets 하위 디렉토리부터 지정한다.

support 필드에는 이 테마가 데스크탑 버전과 모바일 버전을 지원하는지를 지정한다.

editable 필드에는 테마 편집 페이지에서 편집할 수 있는 파일의 목록을 지정하면 된다.


3. 템플릿 파일 제작

<!-- theme.blade.php -->


{{ XeFrontend::css(

    $theme::asset('css/theme.css')

)->load() }}


{{ app('xe.frontend')->js([

    'assets/vendor/bootstrap/js/bootstrap.min.js'

])->load() }}


@include($theme::view('header'))

@if($config->get('logoImage', false))

<img src="{{ $theme::asset('img/logo.png') }}" alt="로고 이미지">

@else

<img src="{{ $config->get('logoImage.path') }}" alt="로고 이미지">

@endif


<div class="content" id="content">

{!! $content !!}

</div>

@include($theme::view('footer'))


테마의 템플릿 파일에서 뷰의 파일을 지정할 때에는 $theme::view() 메소드를 사용한다.  경로는 뷰 폴더 하위에 위치한다.  즉 /views/header.blade.php 이다.

그리고, 이미지, JS, CSS등의 파일을 로드할때는 $theme::asset() 메소드를 사용하여 상대경로로 파일경로를 입력하면 된다.


특별히 JS 로드할경우,

HEAD 나 BODY 에 로드해야할 경우 다음과 같이 사용될 수 있다.


XeFrontend::js('assets/core/common/js/xe.js')->load();

// xe.js파일이 body의 하단에 로드된다.

XeFrontend::js('assets/core/common/js/xe.js')->appendTo('head')->load();

XeFrontend::js('assets/core/common/js/xe.js')->prependTo('body')->load();

// 단, CSS파일은 appendTo, prependTo 메소드를 지원하지 않는다.


// bootstrap.js이 로드된 이후에 xe.js파일이 로드되도록 우선순위 지정할 수 있다. 반대의 경우, after 메소드를 사용한다.

XeFrontend::js('assets/core/common/js/xe.js')

->before('assets/vendor/bootstrap/js/bootstrap.js')

->appendTo('body')->load();


// 다수의 파일을 동시에 로드할 경우, 기입한 순서대로 우선순위가 정해진다.

XeFrontend::js([

  'assets/vendor/jquery/jquery.min.js',

  'assets/core/common/js/xe.js',

  'plugin/board/assets/js/my.js'

)->load();


// 언로드

XeFrontend::js('assets/core/common/js/xe.js')->unload();


테마 설정 페이지의 변수값은 $config 변수의 get() 메소드를 사용하여 참조할 수 있다.

'$config->get('logoImage', false)' 구문은 logo_image 항목 설정값이 존재하지 않을 경우, 기본값으로 false를 반환한다.

테마설정에 업로드한 이미지를 가져올때는 $config->get('logoImage.path') 하면 된다.



메뉴 출력은 menu_list 함수를 사용하여 메뉴 정보를 가져올수 있다.


@foreach(menu_list($config->get('gnb')) as $menu)

  ...

@endforeach


메뉴정보의 프로퍼티는 다음과 같다.

$menu['url'] - 메뉴의 링크주소

$menu['link'] - 메뉴의 링크텍스트

$menu['selected'] - 현재 페이지에 해당하는 메뉴일 경우 true를 가진다.

$menu['children'] - 자식 메뉴아이템 리스트


메타테그 등록

app('xe.frontend')->meta()->name('viewport')->content(

    'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'

)->load()


html 메소드를 사용하면 자유롭게 원하는 코드를 추가할 수 있습니다.

XeFrontend::html($alias)->content('

<script>

    $(function () {

        $('[data-toggle="tooltip"]').tooltip()

    })

</script>

')->appendTo('body')->load();


0 댓글

Board Menu

목록

Page 1 / 4
번호 제목 날짜 조회 수
64

소셜XE twitter의 Callback URLs 설정방법

2019-03-10 30
63

XE3 플러그인 / 컴포넌트 제작방법

2019-01-14 81
62

XE3 설치 for Synology

2019-01-14 70
61

XE 메일 설정하는 방법

2016-05-19 1282
60

ruleset 기본 예제

2015-10-01 224
59

다국어 추가하는 방법

1
2015-07-24 213
58

레이아웃에 템플릿 또는 컬러셋 적용방법

  • file
2015-02-20 309
57

확장변수 항목에 required 와 placeholder 적용

  • file
2014-12-09 291
56

그룹에 따라 선택적으로 권한 부여하기

2014-11-14 3861
55

XE Trigger 완전 정복하기 4편

  • file
2014-08-03 390
54

XE Trigger 완전 정복하기 3편

2014-08-03 619
53

XE Trigger 완전 정복하기 2편

  • file
2014-08-03 799
52

XE Trigger 완전 정복하기 1편

  • file
2014-08-03 1163
51

XE 회원 메뉴 또는 팝업메뉴 추가, 편집방법

2014-05-20 1017
50

윈도우에서 웹서버 [ NGINX + PHP + MySQL ] 설치방법

2012-11-08 7131
49

XE 모듈 만들기

2012-09-13 7401
48

게시글 본문에 동영상이나 이미지 슬라이드가 자동 출력되게 하는 방법

4
2012-09-11 3427
47

소셜댓글을 게시판의 기본 댓글로 사용하는 방법입니다.

2012-09-10 3435
46

xe 슬라이더 사용방법

  • file
2012-07-21 3188
45

XE 에서 일반 PHP 구문 사용방법

2012-07-03 5074

Board Links

Page Navigation