[gabriel] 카테고리별 목록 다르게 만들기와 기능 소개
Gabriel 3.0 버전부터 추가된 기능입니다.
카테고리별로 목록 디자인을 다르게 설정할 수 있습니다.
물론 블로그 전체적에 적용할 수 있구요.
소스는 의외로 간단하게 구성되어 있는데요, skin.html 파일 제일 하단을 보시면
if(title=="웹진") { root.className += ' list-webzine'; };
if(title=="웹진/사이드바 제거") { root.className += ' list-webzine sidebar-off'; };
if(title=="웹진/사이드바 좌측") { root.className += ' list-webzine sidebar-left'; };
if(title=="앨범") { root.className += ' list-album'; };
if(title=="앨범/사이드바 제거") { root.className += ' list-album sidebar-off'; };
if(title=="앨범/사이드바 좌측") { root.className += ' list-album sidebar-left'; };
if(title=="텍스트/사이드바 제거") { root.className += ' sidebar-off'; };
if(title=="텍스트/사이드바 좌측") { root.className += ' sidebar-left'; };
if(title=="썸네일") { root.className += ' list-thumb'; };
if(title=="썸네일/사이드바 제거") { root.className += ' list-thumb sidebar-off'; };
if(title=="썸네일/사이드바 좌측") { root.className += ' list-thumb sidebar-left'; };
if(patch=="/tag") { root.className += ' sidebar-off' };
if(patch=="/location") { root.className += ' sidebar-off' };이런 소스가 있습니다.
if(title=="텍스트/사이드바 좌측") { root.className += ' sidebar-left'; };이 소스를 예로들어 설명하면
페이지가 로드될 때 붉게 표시한 페이지 타이틀을 체크해서 "텍스트/사이드바 좌측" 이 맞으면 <html> 에 class=" sidebar-left" 를 추가합니다.
그리고
if(patch=="/tag") { root.className += ' sidebar-off' };는 블로그 주소가 http://블로그/tag 일 경우 <html> 에 class=" sidebar-off" 를 추가합니다.
patch 기능을 응용하면 게시물 주소가 http://블로그/13 인 글에 사이드바를 숨기거나 좌측으로 이동하게 만들 수 있습니다.
만약 목록 디자인을 웹진으로 하고 사이드바를 숨기려면
root.className += ' sidebar-off list-webzine'이렇게 설정하시면 됩니다.
띄어쓰기에 주의해주세요.
그럼 사이드바 제거, 사이드바 좌측 이동 이외에 어떤 기능이 있나 알아볼까요?
<html class="list-webzine">
목록 디자인을 웹진 형식으로 만들어줍니다.
<html class="list-album">
목록 디자인을 앨범 형식으로 만들어줍니다.
<html class="list-thumb">
텍스트 형식 목록에 작은 썸네일을 출력합니다.
<html class="thumb-middle">, <html class="thumb-bottom">
목록의 대표 이미지들은 기본적으로 상단 기준으로 정렬돼있만 이 두 기능을 사용하면 중앙, 하단 기준으로 바꿀 수 있습니다.
(티에디션 제외)
 기본 |  중앙 기준 |  하단 기준 |
<html class="notice-off">
타이틀 밑에 있는 공지사항을 숨길 수 있습니다.
회색 부분이 통채로 사라집니다.
<html class="paging-off">
본문 하단에 이전, 다음 페이지로 이동할 수 있는 페이징 부분을 숨깁니다.
 기본 |  페이징 숨기기 |
<html class="footer-type2">
하단 사이드바는 기본적으로 가로로 3개의 큰 줄이 있고 그 안에 위젯이 들어있습니다.
그러나 이 기능을 사용하면 세로로 3줄을 만들어줍니다.
 기본 가로 3줄 |  세로 3줄 정렬 |
<html class="width-1000">
블로그 가로길이를 조절해주는 소스입니다.
지원하는 크기는 1300, 1200, 1100, 1000(기본), 900,800 입니다.
800을 사용하는 분들은 사이드바를 숨기는걸 추천합니다.
<html class="mobile-sidebar-off">
모바일에서만 우측 사이드바를 숨겨주는 소스입니다.
데스크탑에선 우측 사이드바가 나타납니다.