Section 20 - 티스토리 반응형 스킨 만들기 - [사이드바] 최근글

이번섹션은 "사이드바 최근글 목록"을 만들도록 하겠습니다.

최근글 목록은 말 그대로 최근에 올라온 글 목록을 모듈형태로 노출/비노출 시킬 수 있는 사이드바 요소입니다.
사이드바 요소들의 코드는 간단하기 때문에 코드와 치환자만 살펴보는 것만으로도 얼마든지 응용이 가능하기때문에 바로 작업들어갑니다.

STEP 1. skin.html 사이드바 최근글 목록 코드 추가

                    ... 공지사항 사이드바 코드 생략 ...

                    

• <s_rctps_rep></s_rctps_rep> : 최근에 올라온 글을 반복 출력하는 영역 지정
• : 최근글로 이동할 주소 
• : 최근글의 제목 
• : 최근글에 달린 댓글 갯수 
• : 작성자 이름

STEP 2. 사이드바에 최근글 모듈 추가

• 블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정
• "최근에 올라온 글 목록" 코드를 넣으면 사이드바 메뉴에서 모듈 확인이 가능합니다.
• 모듈을 사이드바2 -> 공지사항 모듈 아래에 추가합니다.
• 추가 완료 후 꼭 "변경사항 저장" 버튼을 눌러주세요.

※ 우리는 사이드바1 영역에 블로그 옵션 설정 모듈(블로그 비노출)만을 넣고, 사이드바2 영역에는 블로그에 노출되는 모듈을 구분해서 넣기위하여 사이드바1 영역을 미리 만들어두었습니다. 참고만하세요~

최근글 모듈 사이드바 추가1

최근글 모듈 사이드바 추가2

STEP 3. skin.html 코드 구조

최근글 코드 구조

• "공지사항 모듈" 코드 아래에 위와같이 "최근글 모듈" 코드를 추가합니다.
• 모든 사이드바 요소는 <s_sidebar_element></s_sidebar_element> 태그로 시작하고 끝납니다. 잊지마세요. 기본입니다!!
• <s_rctps_rep></s_rctps_rep> 는 "최근글" 데이터가 반복되어 출력되는 영역입니다.

STEP 4. style.css 사이드바 최근글 스타일 추가

/* recent-post */
.recent-post {}
.recent-post ul {margin:6px 0 0; padding:5px 0 0; border-top:1px solid #e9e9e9; list-style:none}
.recent-post ul li:before {font-weight:bold; content:"· "}
.recent-post ul li:after {display:block; clear:both; content:''}
.recent-post ul li {font-size:0.875em}
.recent-post ul li a {display:inline-block; padding:4px 0 0;}
.recent-post ul li a:hover, .recent-post ul li a:active, .recent-post ul li a:focus {color:#ff8149; text-decoration:none}
.recent-post ul li a .cnt {font-size:0.75em; color:#ff8149}

• "사이드바 공지사항 모듈" 스타일 아래에 "사이드바 최근글 모듈" 스타일을 위와 추가합니다.

STEP 5. 사이드바 최근글 모듈 중간 결과 확인

사이드바 최근글 모듈 중간결과

• 사이드바 최근글 목록은 기본적으로 4개가 출렵됩니다. 티스토리 스킨 최초 파일 작성시 index.xml 안에 <recentEntries>4</recentEntries>로 기본 셋팅을 했기때문입니다.

STEP 6. 사이드바 최근글 목록 설정

• 블로그 관리 -> 꾸미기 -> 사이드바 메뉴 설정 -> 사이드바 설정
• 사이드바 설정은 최근 글, 최근 댓글, 최근 공지, 글 보관함, 링크, 태그 설정을 할 수 있습니다.
  앞으로 만드는 사이드바 요소들의 설정을 하는 곳이므로 숙지합니다.

최근글 모듈 설정

STEP 7. 사이드바 최근글 모듈 최종 결과

최근글 모듈 최종결과

최근 글 목록 5개, 글자 수 37로 맞춘 최종 결과입니다.

지금까지 "사이드바 최근글 모듈" 코드 및 사이드바 설정 방법에 대하여 알아봤습니다.
다음 섹션에선 "사이드바 최근 댓글 모듈"을 만들어 보도록 하겠습니다.

고생하셨습니다~