Section 22 - 티스토리 반응형 스킨 만들기 - [사이드바] 글 보관함

이번 섹션은 "사이드바 글 보관함" 입니다.

글 보관함은 년/월별 글을 한눈에 볼 수 있게 해주는 기능입니다.
2017년11월에 몇개의 글이 남겨있는지? 2017년 10월에는 몇개에 글을 작성했는지 쉽게 알 수 있도록 목록형태로 출력해주는 사이드바 모듈입니다.

지난 섹션에서 작업했던 것들과 큰 차이가 없으므로 바로 코드 작업 들어갑니다.

STEP 1. skin.html 사이드바 글 보관함 코드 추가

• <s_archive_rep></s_archive_rep> : 월별 글 보관함을 반복 출력영역 지정 
• : 각 월별 보관함으로 이동할 주소 
• : 년과 월을출력 
• : 각 월별에 속한 글의 갯수

STEP 2. 사이드바에 글 보관함 모듈 추가

• 블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정

사이드바 글 보관함 설정

1. "글 보관함 모듈"을 사이드바2에 추가
2. "변경사항 저장" 버튼을 클릭하여 저장

STEP 3. skin.html 사이드바 글 보관함 코드 구조

사이드바 글 보관함 코드 구조

• 글 보관함 현황만 보여주고 싶으면 치환자를 이용한 링크를 빼시면 됩니다.
  
• 는 년/월을 현재 년/월을 기준으로 노출 설정한만큼 이전 년/월을 출력합니다.
• 해당 년월에 작성한 포스트 갯수를 출력합니다.(이것또한 필요없으면 빼셔도 됩니다.)

STEP 4. style.css 사이드바 글 보관함 스타일 추가

/* archive */
.archive {}
.archive ul {margin:6px 0 0; padding:5px 0 0; border-top:1px solid #e9e9e9; list-style:none}
.archive ul:after {display:block; clear:both; content:''}
.archive ul li {font-size:0.875em; width:50%; float:left; padding:4px 0}
.archive ul li a {}
.archive ul li a:hover, .archive ul li a:active, .archive ul li a:focus {color:#ff8149; text-decoration:none}
.archive ul li a .cnt {font-size:0.75em; color:#ff8149}

• HTML 코드와 마찬가지로 "사이드바 최근 댓글(recent-comment)" 스타일 아래에 위의 코드를 넣습니다.

STEP 5. 사이드바 글 보관함 중간 결과

사이드바 글 보관함 중간 결과

짜잔.....4개월치가 나옵니다.
저는 6개월(반년)이 나와도 길어지지 않게 하기위하여 한줄에 2개월이 나오도록 디자인하였더니 더 없어 보이므로, 6개월의 글 보관함이 출력되도록 설정해보겠습니다.

STEP 6. 사이드바 글 보관함 모듈 설정

사이드바 글 보관함 모듈 설정

1. 글 보관함은 6 개월까지 표시로 변경
2. "변경사항 저장" 버튼 클릭으로 저장

STEP 7. 사이드바 글 보관함 최종 결과

짜잔!!

2016년 11월 이후에 2016년 5월까지 글이 하나도 작성되지 않으니 노출이 안됩니다;;
블로그 포스트를 부지런히 올리지 않으면 티가 많이나는걸 확인하면서 이번 섹션을 마무리합니다.

고생하셨습니다~

다음 섹션은 "사이드바에 달력 달기"입니다 ㅡ/.,ㅡ;;