이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[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">

목록 디자인을 웹진 형식으로 만들어줍니다.


list-webzine웹진 형식 목록. 대표 이미지와 요약글을 출력합니다.



<html class="list-album">

목록 디자인을 앨범 형식으로 만들어줍니다.


list-album앨범 형식 목록. 대표 이미지를 출력합니다.



<html class="list-thumb">

텍스트 형식 목록에 작은 썸네일을 출력합니다.


list-thumb썸네일 형식 목록. 텍스트 형식과 동일하나 우측에 작게 대표이미지를 출력합니다.



<html class="thumb-middle">, <html class="thumb-bottom">

목록의 대표 이미지들은 기본적으로 상단 기준으로 정렬돼있만 이 두 기능을 사용하면 중앙, 하단 기준으로 바꿀 수 있습니다.

(티에디션 제외)


default기본thumb-middle중앙 기준thumb-bottom하단 기준



<html class="notice-off">

타이틀 밑에 있는 공지사항을 숨길 수 있습니다.

회색 부분이 통채로 사라집니다.


notice-off공지사항 끄기



<html class="paging-off">

본문 하단에 이전, 다음 페이지로 이동할 수 있는 페이징 부분을 숨깁니다.


default기본paging-off페이징 숨기기



<html class="footer-type2">

하단 사이드바는 기본적으로 가로로 3개의 큰 줄이 있고 그 안에 위젯이 들어있습니다.

그러나 이 기능을 사용하면 세로로 3줄을 만들어줍니다.


default기본 가로 3줄footer-type2세로 3줄 정렬



<html class="width-1000">

블로그 가로길이를 조절해주는 소스입니다.

지원하는 크기는 1300, 1200, 1100, 1000(기본), 900,800 입니다.


800을 사용하는 분들은 사이드바를 숨기는걸 추천합니다.



<html class="mobile-sidebar-off">

모바일에서만 우측 사이드바를 숨겨주는 소스입니다.

데스크탑에선 우측 사이드바가 나타납니다.

티스토리 툴바