#테마를 만들기 위한 XE 테마 변수 알아보기
XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.
앞서 다뤘던 내용과, 다룰 내용
이전시간에는 XE의 의존성 관리와 플러그인 등록, 플러그인 폴더의 구조에 대해서 알아보았습니다.
이번시간에는 더미로 만들어진 테마 파일로 어떠한 코드가 무슨 역할을 하는지 알아보도록 하겠습니다.
테마의 정보
테마의 구조
내 테마의 위치는 privates 폴더에 위치한 내 플러그인의 src/Themes/테마이름/ 폴더에 위치하고 있습니다.
이 폴더안에도 플러그인 폴더와 같은 assets와 views 폴더를 가지고 있습니다.
views폴더에 이번에 우리가 수정하고 만들 blade 템플릿 파일이 위치해 있습니다.
테마의 옵션 설정 수정하기 : info.php 작성
내 플러그인의 내 테마 위치로 이동하면 info.php 파일이 있는 것을 볼 수 있습니다.
info.php 에서는 테마의 설정, 메뉴의 설정 등을 할 수 있도록 도와줍니다.
이 부분을 잘 활용하기 위해서는 어느정도의 학습이 필요하지만 알아야 하는 내용이 많지는 않으니 처음 테마를 제작하시는 분이라면 info.php를 활용하여 테마 구성을 하시기를 권장합니다.
info.php에 작성해야 할 내용으로 이글에서 다룰 부분은 view, setting, editable 이 3가지 요소만 알면 테마 세팅을 진행할 수 있습니다.
<?php
return [
'view' => 'theme',
'setting' => [
'logoImage' => [
'_type' => 'image',
'label' => '로고 이미지',
'description' => '로고 이미지'
],
'spot_title' => [
'_type' => 'text',
'_section' => '스팟 설정',
'label' => '스팟 타이틀',
'placeholder' => '스팟의 제목을 입력',
'description' => '스팟의 제목을 입력',
],
'gnb' => [
'_type' => 'menu',
'_section' => '메뉴 설정',
'label' => '메인메뉴',
]
],
'support' => [
'mobile' => true,
'desktop' => true
],
'editable' => [
'theme.blade.php',
'gnb.blade.php'
]
];위 문법은 php 배열 구성 문법이고 지정된 스펙대로 작성을 해주면 됩니다.
info.php의 구성 요소
테마 설정을 위한 info.php에는 아래의 구성 요소를 가지고 있습니다.
- view
‘editable’ => [ Code] 이 부분은 관리자 페이지에서 수정할 수 있는 views디렉토리 하위의 파일들을 지정합니다.
[관리자 페이지] -> [설정] -> [테마에디터] 페이지에 진입하면 여기에서 지정된 파일들을 편집할 수 있는 페이지가 나오게 됩니다.
editable항목에 파일이 있어야 해당 페이지에서 수정할 수 있게 됩니다. - setting
‘setting’ => [ …. ] 이라고 되어 있는 부분은 관리자화면 테마 설정페이지에서 노출될 폼필드들을 작성합니다.
이 부분을 작성하게 되면 테마 설정페이지에서 폼화면을 만들어주고 저장이 되었을때 config로 등록하여 설정 정보를 저장하는 부분까지 XE에서 작업을 자동으로 해주게 되어 설정 정보를 저장하는 페이지 구성시간을 단축해 줍니다. - ID 예> ’logoImage’ 또는 ‘spot_title’
html 컴포넌트의 name요소에 지정됩니다. 하나의 테마에 유일값으로 사용해야 합니다. 중복되는 경우 가장 먼저 선언된 Name 요소만 출력되거나 오류로 설정페이지에 진입하지 못할 수 있습니다. - _type
XE에서 정해진 스펙이 있고 그 내용대로 넣어주게 되면 text, textarea, select 등의 html 컴포넌트 또는 XE컴포넌트들을 생성해주게 됩니다.
자세한 내용은 폼빌더 가이드 를 참고! - _section
관리자 테마 설정 페이지에서 하나로 만들어질 그룹을 지정하고 타이틀을 지정합니다. - label
panel그룹내에서 해당 요소를 보여줄 명칭(title)을 정의합니다. - Description
해당 요소의 설명을 입력합니다. - placeholder
컴포넌트에 사용될 placeholder속성을 지정합니다.
위의 내용과 같이 입력하고 [관리자 페이지] -> [설정] -> [테마에디터] 페이지에 접근하면 아래와 같은 화면이 출력됩니다.
ASSET 파일 불러오기
Asset파일 불러오기
XE에서는 효과적인 파일 관리 및 가독성을 위하여 아래의 코드를 사용하여, asset파일을 불러오고 있습니다.
{{-- stylesheet --}}
{{ app('xe.frontend')->css([
$_theme::asset('../../../assets/css/theme.css'),
$_theme::asset('../../../assets/libs/slick/slick.css')
])->load() }}{{-- script --}}
{{ app('xe.frontend')->js([
$_theme::asset('../../../assets/libs/slick/slick.min.js'),
$_theme::asset('../../../assets/js/common.js')
])->appendTo('head')->load() }}
상단의 내용은 XE의 번들 기본 테마인 together의 css/js를 불러오는 코드의 일부를 가져왔습니다.
에셋 파일을로드하려면 $theme::asset() 메소드를 사용하면 됩니다.
assets 디렉토리를 기준으로 파일의 상대경로를 입력하여 불러올 수 있습니다.
★ 공부를 위한 따라하기★ (메인/서브 구분옵션)
테마에는 메인과 서브 타입이 존재합니다.
그렇다고 sub.blade.php 과 main.blade.php 를 따로 만들어서 적용하기에는 너무 번거로운 일입니다.
우리는 설정에 따라서 메인과 서브를 나눠 하나의 파일에서 관리하는 법을 알아보겠습니다.
먼저 메인과 서브를 나눌 테마의 info.php을 열어 중간 적절한 공간에 아래의 코드를 입력해주세요.
'layout_type' => [
'_type' => 'select',
'_section' => '테마 일반 설정',
'label' => '테마 형태',
'options' => [
'sub' => '서브 페이지용',
'main' => '메인 페이지용'
]
],이렇게 작성하고 저장하면 내 테마 설정에 아래와 같은 설정 항목이 나타납니다.
해당 설정을 할 페이지 또는 테마 설정에 테마 형태를 지정하면 설정값에 layout_type 항목이 저장됩니다.
이 설정을 사용하여, 아래와 같이 작성할 수 있습니다.
@if($config->get('layout_type') == 'sub')
서브 테마 코드
@else
메인 테마 코드
@endif각각 설정에 맞는 테마의 템플릿 코드를 입력하여, 설정의 폭과 자유로운 테마 설정이 가능합니다.
오늘 알아본 내용
테마를 구성하기 위한 설정 파일인 info.php를 알아보았고, info.php를 작성하고 설정하는 방법.
그리고 그 값을 통해 테마의 외형 또는 기능상 구현을 할 수 있는 방법에 대해 알아보았습니다.
다음 시간에는 테마의 if문을 사용한 메뉴의 active 상태의 class 추가 방법과, Store에 올리는 방법으로 테마 제작 이야기는 마무리 짓도록 하겠습니다.
지금 까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)
XE 익스텐션 / 테마 창작자가 내 플러그인의 팬을 만들어보세요!
XE Store 바로가기
