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

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

치환자만 다를뿐 구조는 지난 2017/11/13 - Section 20 - 티스토리 반응형 스킨 만들기 - [사이드바] 최근글 에서 작업한 구조와 똑같습니다.

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

• <s_rctrp_rep></s_rctrp_rep> : 댓글을 반복 출력하는 영역 지정 
• : 댓글로 이동할 주소
• : 댓글의 본문 일부 
• : 댓글을 쓴 사람 이름 
• : 댓글을 쓴 시간 

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

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

최근댓글 사이드바 설정

STEP 3. skin.html 최근 댓글 코드 구조

최근댓글 사이드바 코드 구조

• "사이드바 최근 글" 코드 아래에 "사이드바 최근 댓글" 코드를 넣습니다.
• 이라는 댓글 작성 일시 치환자가 있지만 우리는 사용하지 않으니 보이지 않지만 필요하신분은 위의 코드에 추가하시면 됩니다.

STEP 4. style.css 최근 댓글 스타일 추가

/* recent-comment */
.recent-comment {}
.recent-comment ul {margin:6px 0 0; border-top:1px solid #e9e9e9; list-style:none}
.recent-comment ul li {margin-top:15px; font-size:0.875em; line-height:1}
.recent-comment ul li:after {display:block; clear:both; content:''}
.recent-comment ul li a {float:left}
.recent-comment ul li a:hover, .recent-comment ul li a:active, .recent-comment ul li a:focus {color:#ff8149; text-decoration:none}
.recent-comment ul li .comment-name {float:right; color:#999; font-size:0.75em}

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

STEP 5. 사이드바 최근 댓글 중간 결과

최근댓글 사이드바 중간 결과

• 댓글이 4개만 노출되네요? 그럼 5개가 노출되도록 해봐야겠습니다.

STEP 6. 사이드바 최근 댓글 모듈 설정

최근댓글 모듈 설정

1. 최근 댓글 갯수를 5로 설정 (저는 5개로 설정했지만 필요한만큼 수정하시면 됩니다.)
2. 글자 수를 30으로 설정 (갯수와 마찬가지)
3. 설정이 완료되었다면 "변경사항 저장" 버튼 클릭

STEP 7. 사이드바 최신 댓글 최종 결과 확인

최근댓글 사이드바 최종 결과

최근 댓글 5개가 잘 출력됩니다.

위와같이 다 나왔다면 끝!!

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