#테마를 만들기 위한 테마 변수 더 들여다보기
XE3를 활용하여 테마와 스킨을 만드는 방법을 제공하고 있습니다.
XE는 웹 초보자와 코딩을 아는 웹디자이너와 개발자를 위한 다양한 컨텐츠를 생산하고 운영하고 있습니다.
#0,#1, #2, #3
앞서 다뤘던 내용과, 다룰 내용
이전 시간에는 더미로 만든 테마의 코드를 알아보고, 파일을 쪼개 경우별로 테마 블레이드 파일을 불러오는 방법에 대해서 알아보았습니다.
이번 시간에는 메뉴를 출력하고 메뉴 선택 시 active class 추가 방법, 테마 설정 별로 class를 다르게 주거나 추가 class 또는 id를 주는 방법에 대해서 알아보고, XE Store에 상품을 등록하는 방법을 간략하게 알아보겠습니다.
메뉴 출력 및 설정
메뉴 출력
메뉴 출력을 위해서는 테마 설정에 menu 타입을 설정해서 지정해야 합니다.
지난번 info.php에 작성해야 할 내용에 gnb라는 ID를 menu 타입이 있습니다.
이를 이용해서, 아래의 코드를 작성하면 메뉴가 출력됩니다.
<ul>
@foreach(menu_list($config->get('gnb')) as $menu)
<li>
<a href="{{ url($menu['url']) }}" target="{{ $menu['target'] }}">
{{ $menu['link'] }}
</a>
</li>
@endforeach
</ul>물론, 각 테마 또는 템플릿에 맞는 <ul> 또는 <li>를 치환해야 합니다.
메뉴 선택 시 Active
메뉴를 클릭했다면, 굵게 만들거나 선택한 부분을 알려줘야 합니다.
물론, 이 항목들은 css에서 각 선택된 항목에 해당하는 class의 효과 등을 작성해야 합니다.
<li @if($menu[‘selected’]) class=”active” @endif> 코드처럼 @if 문과 @endif 부분을 복사 붙여넣으면 해당 메뉴를 클릭하면 class에 active가 추가됩니다.
선택에 따른 Class 추가
테마 설정에서 컬러별 색상을 다르게 하고 싶은 경우 각 컬러 셋에 맞는 css를 작성한 후, class에 해당 값을 출력해주면 됩니다.
{{ app('xe.frontend')->bodyClass($config->get('color_set')) }}예시 코드는 body에 컬러 셋 코드를 먼저 추가한 예시입니다.
컨텐츠 출력
컨텐츠는 {{ $content }} 코드를 입력한 곳에서 출력이 됩니다.
단, 이 코드는 한 레이아웃 구성 페이지에서 하나만 사용할 수 있으며, 한개 이상의 컨텐츠 출력 코드가 작성된 경우 오류를 출력하거나, 제대로 화면 구성이 되지 않을 수 있습니다.
만약, 테마 설정에서 메인과 서브를 나누었는데 메인 또는 서브 단일 화면에서 게시판 또는 메인 위젯이 보이지 않는다면 {{ $content }}를 출력할 컨텐츠 div 컨테이너에 입력해주시면 출력됩니다.
배포를 위한 준비
XE3는 기존의 XE1과는 다르게 플러그인 단위를 묶어 배포하거나 판매할 수 있습니다.
이를 패키지라고 부르며, 테마와 위젯, 익스텐션 기능을 나눠 배포하지 않고 한꺼번에 배포하고 싶은 창작자를 위한 패키지 배포를 지원하고 있습니다.
하나의 플러그인에서 make:theme 또는 make:skin 을 사용해 만들고 플러그인을 압축하여 배포하면, 테마와 연관된 스킨을 함께 판매하거나 배포할 수 있게 됩니다.
Composer.json 수정
SSH 또는 관리자 사이트에서 생성된 플러그인 더미에는 더미를 위한 설명과 이름으로 작성되어 있습니다.
이미지처럼 extra란은 설치된 테마 목록에서 나오는 플러그인 명, 플러그인 설명입니다.
그와 더불어 author란은 이 플러그인을 작성한 창작자의 이름, 이메일 등으로 수정하여 저장하면 됩니다.
XE Store 등록
XE Store에 등록하기 위해 회원 가입 이후, 플러그인 등록을 누르면 익스텐션(기능 단위 프로그램)인지 테마인지 구분하게 됩니다.
클릭 후 테마의 카테고리를 최대 2개까지 선택하여 지정한 후, 플러그인을 압축한 소스 코드를 업로드 하면 끝!
XE Store에 내 테마를 등록하여 더 많은 팬을 만들 수 있기 바랍니다!
지금까지 창작자를 위한 XE3 테마 만드는 방법을 읽어주셔서 감사합니다 :)
XE 익스텐션 / 테마 창작자로써 내 플러그인의 팬을 만들어보세요!
XE Store 바로 가기
