PXE Candy Shop은 네이버와 비슷한 포맷의 포탈 사이트를 운영하시려는 분들을 위한 XE용 레이아웃 입니다. 이 레이아웃에는 몇개의 위젯과 jQuery 플러그인이 포함되는 패키지 형태입니다. 이 레이아웃의 특징은 아래와 같습니다. 또 이 레이아웃에 대한 미리보기 링크가 활성화 되어 있습니다. 스킨을 미리 보시려면
여기를 클릭하세요
- 네이버와 최대한 비슷한 구조의 포탈 구조를 가지고 있습니다
- 페이지 설정에서 일일이 위젯을 배열하지 않아도 레이아웃 설정에서 한번의 클릭으로 대문 페이지를 곧바로 로드 할 수 있습니다
- 1단 구성과 2단 구성, 2단 포탈 구성 총 3개의 구성을 레이아웃 설정에서 선택 할 수 있습니다
- PXE Candy Shop 전용의 위젯이 3가지 포함되어 있습니다
PXE Candy Shop은 3개의 구성이 준비되어 있습니다. 1단 구성은 갤러리와 같이 넓은 폭을 필요로 하는 구성에 알맞고 2단 구성은 일반적인 게시판 형태에서 사용 할 수 있습니다. 2단 포탈 대문 구성은 이용자가 페이지 설정의 페이지 수정을 통해 위젯을 나열하지 않고도 직접 레이아웃 파일에서 필요한 요소들을 불러들여 편하게 첫페이지를 장식 할 수 있습니다
PXE_candyshop_package.zip의 압축을 풀면 3개의 폴더가 있습니다. 그중
source 폴더는 작업중 발생한 포토샵 파일등의 소스 파일이니 별도로 보관하시고,
layouts와
widgets 두 폴더를 복사하여 XE가 설치 된 폴더에 붙여넣기 합니다. 이때 덮어씌울 것을 묻는 경고창이 뜨면
예를 클릭하여 그대로 덮어 씌웁니다. 그러면 레이아웃 파일과 위젯들이 알아서 경로에 맞게 복사가 됩니다. 1개의 레이아웃과 5개의 위젯들이 복사됩니다.
이제 XE 관리자 페이지로 접속하여
사이트 설정 > 레이아웃에서
생성 버튼을 눌러
PXE 캔디샵 레이아웃을 선택하여 생성합니다
1. 구성 선택하기
XE 관리자 페이지로 접속하여
사이트 설정 > 레이아웃에서
생성 버튼을 눌러서 나오는 화면에서 아래와 같이 구성 3가지 구성 중 1개를 선택 할 수 있습니다
2. 대문에 대한 이해
2단 포탈 대문 형식을 선택하게 되면 1단, 2단과는 다르게 2단의 컨텐츠부(게시판이 출력되는 위치)에 컨텐츠 대신 대문을 장식하는 요소들이 출력 됩니다. 이 요소들은 layout.html에서 정의하고 있는 것이며 여기에는 jQuery 플러그인을 통해 여러 위젯들을 페이징 방식으로 선택 할 수 있게끔 구현하고 있습니다.
이 형식으로 선택하게 되면 온라인상의
페이지 수정을 통해서는 화면을 수정 할 수 없습니다. 이 대문 페이지를 수정하려면 직접 layout.html 파일에서 수정해야하며, 그 이유는 이 구성을 사용하게 되면 jQuery 플러그인이 정의한 영역안에 위젯들을 넣게 되는데, XE의
페이지 수정을 통해서는 jQuery가 지정하는 영역으로 위젯을 넣을 수 없기 때문입니다.
위 그림에서 왼편의 각 카테고리를 클릭하게 되면 우측의 위젯들이 그에따라 변하는 플러그인을 사용하고 있습니다. 이 기능을 이용하여 위젯을 넣으려면 XE의
페이지 수정이 아닌, layout.html을 통해서 해야 한다는 뜻이 됩니다. 만일 여러분이
2단 포탈 대문 형식을 선택 한 상태에서 XE의
페이지 수정 페이지에 접근하게 되면 페이지 수정 버튼 자체가 안보일 것 입니다.
한마디로
2단 포탈 대문 형식은, 보드 모듈에 적용하는 1개의 페이지라고 생각하면 됩니다. 만일 굳이 온라인의 페이지 수정 기능을 사용하여 컨텐츠부를 디자인하고 싶다면
layout_backup.html 파일을 사용 할 수 있습니다. 기존 layout.html 파일의 이름을 다른 것으로 변경하고 layout_backup.html의 이름을 layout.html로 바꾼 후 업로드 하시면 페이지 설정화면에서 수정 할 수 있습니다. 다만 이 파일을 사용하는 경우에는 사이트 설정의 구성선택에서
2단 포탈 대문 형식은 지정 할 수 없습니다.
3. 배너 설정
관리자 페이지의
레이아웃 설정에서는 배너에 대해 콘트롤 할 수 있습니다. 배너 이미지와 URL을 넣는 기입란이 총 3개가 있습니다. 가장 위의 항목부터 순차적으로 1, 2, 3이라고 했을 때 아래 그림과 같습니다.
1. 위젯 넣기
위젯을 넣기 위해서는 먼저 layout.html을 엽니다. 대부분은 layout.html에 모두 주석문과 샘플 코드들이 있어서 쉽게 위젯의 위치를 알 수 있습니다.
2단 포탈 대문 형식을 선택했을 경우에 왼편 컨텐츠부에 출력되는 위젯들은 아래 그림과 같습니다.
1번의 위젯 영역 부분을 살펴봅니다. layout.html을 열고 주석문에서
<!--Ajax News 1 시작--><!--Ajax News 1 끝--> 사이에 있는 코드들이 1번 박스의 코드가 됩니다.
<!--Ajax News 1 시작-->
<div class="contentsBox1">
<ul class="idTabs">
<li><a href="#tabNews01">카테고리 1</a></li>
<li><a href="#tabNews02">카테고리 2</a></li>
<li><a href="#tabNews03">카테고리 3</a></li>
<li><a href="#tabNews04">카테고리 4</a></li>
</ul>
<div id="tabNews01">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="3213,81,2738" />
</div>
<div id="tabNews02">
<img class="zbxe_widget_output" widget="tab_newest_document" skin="CS_official" colorset="default" order_target="list_order" order_type="desc" thumbnail_type="crop" display_author="Y" display_regdate="Y" display_readed_count="Y" display_voted_count="Y" module_srls="11078,11030" />
</div>
<div id="tabNews03">
추가로 원하는 위젯 3은 여기에
</div>
<div id="tabNews04">
추가로 원하는 위젯 4는 여기에
</div>
</div><!--contentsBox1 out-->
<!--Ajax News 1 끝-->
녹색으로 표시한 카테고리1과 같은 부분을 원하는 메뉴명으로 변경합니다. 그리고 밑에 빨간색의 코드가 들어간 것이 바로 관리자 페이지에서 위젯 생성창을 통해 만들어 낸 샘플 코드입니다. 이곳에 원하는 위젯 코드를 생성하여 붙여 넣으면 됩니다. 주의 할 것은, 박스 1번의 경우는
PXE 전용 탭 형태 최근 문서 출력 위젯이 위치하도록 CSS 마진이 설정되어 있습니다. 따라서 될 수 있으면 이 박스에는 위젯 생성시
탭 형태 최근 문서 출력을 선택하고
PXE Candy Shop 탭 방식 최근글 출력 기본 스킨을 선택하여 코드를 생성하시기 바랍니다.
그러면
<li><a href="#tabNews01">카테고리 1</a></li>에서 지정한 메뉴를 클릭하면
<div id="tabNews01"></div> 영역에 해당 위젯이 출력되게 됩니다. 나머지 1-2번과 2번 박스 역시 1번과 동일한 방법으로 메뉴명과 위젯이 뿌려질 위치를 각각 수정하면 됩니다.
우측 하단에 위치한 위젯 영역(마우스를 올리면 텝이 바뀌는 플러그인) 역시 이와 같은 방식으로 수정합니다. 만일 이러한 영역들의 CSS 추가, 삭제 혹은 더 고급설정이 필요하다면
2col.css를 수정하세요.
2. 서브메뉴 바 설정
더보기(확장영역) 설정PXE Candy Shop 레이아웃의 서브 메뉴바에 위치한
더보기를 클릭하면 네이버와 마찬가지로 확장영역이 토글 됩니다. 이 영역 안에 네이버와 같이 메뉴들을 넣거나 위젯을 배치 할 수도 있습니다. 확장영역에 컨텐츠를 넣으려면 layout.html 파일을 열고 아래 코드를 참고하세요.
<div id="extraArea">
메뉴나 기타 확장 컨텐츠를 담을 수 있습니다
</div><!--extraArea out-->
2차 메뉴 출력1차 메뉴의 하위 메뉴인 2차 메뉴가 생성되어 있을 경우에는 위 그림과 같이
더보기 버튼 우측에 출력되게 됩니다.
글, 댓글 랭킹 위젯 출력PXE Candy Shop에는 서브메뉴바 우측에 위치한 자동 스크롤 형식의 랭킹 위젯이 있습니다. 관리자 페이지에 접속 한 후
사이트 설정 > 위젯 > 글, 댓글 랭킹 출력의 코드 생성 버튼을 눌러 나타나는 설정창에서
PXE 랭킹 스킨을 선택한 후 설정을 마치고, 생성 된 코드를 layout.html의 아래 위치에 붙여 넣습니다. 1위부터 10위까지의 순위 이미지가 준비되어 있으므로 최대 순위는 10위까지 설정하시기 바랍니다. 아래 빨간색 코드 대신 새로 생성 된 코드를 넣으십시오.
<!--글, 댓글 랭킹 출력 위젯-->
<img class="zbxe_widget_output" widget="rank_count" skin="PXE_rank_count" colorset="default" list_count="10" rankby="comment" with_group="3,2" />
- 이 레이아웃은 XE의 모든 버전에서 작동합니다
- 이 레이아웃은 IE6/7, 가장 최신의 FireFox, Opera 그리고 Safari에서 테스트 되었습니다
- 이 레이아웃은 인터넷 익스플로러에서는 2단 포탈 대문 형식 구성이 선택 된 페이지를 로딩 할 때 일시적으로 숨겨진 레이어들이 모두 보였다가 사라지는 랜더링 버그가 있습니다. 사이트 이용에는 문제가 없지만 신경이 거슬릴 수 있는 부분이므로 유의하시기 바랍니다. 이 부분은 좀 더 안정된 jQuery 플러그인이 발견될 때 까지 유지됩니다
- 비영리 라이센스 : 40,000원
- 영리 라이센스 : 150,000원
라이센스 구입을 원하시는 분께서는 아래의 계좌로 비용을 입금 하신 후,
clubnb2@naver.com으로 입금확인 메일을 보내주세요. 메일에는 본인
아이디, 입금자명, 스킨명, 라이센스 형태 4가지를 꼭 기재해 주셔야 합니다. 비용 지불이 확인되면 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의
[다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.
PayPal을 이용해 결제를 원하시는 해외 이용자분께서는 위의 4가지 항목에 추가로 자신의
PayPal 이메일 주소를 함께 기입하시면 Request Money로 청구메일이 가게 됩니다. 입금이 확인되면 마찬가지로 다음날 오후 5시 이전 아이디가 갱신되어 본 사이트의
[다운로드] 코너에서 해당 스킨의 온라인 다운로드가 가능하게 됩니다.
위 이메일 주소로는 일체 문의내용을 받지 않습니다. 별도의 문의사항이 있으신 경우에는
문의사항 코너를 이용해 주시기 바랍니다.
국민은행 036102-04-168370 정현화
하루빨리 뜨길...그럼 바로 입금 고고
입금에 대한 내용도 올려주세요 홈페이지가 바껴서 잘 모르겠네요