Section 11-5 - 티스토리 반응형 스킨 만들기 - 카테고리 내 다른 글 보기

이번 섹션은 글 상세보기 시 하단부에 해당 글과 같은 카테고리 내에 다른 글 목록을 출력해주는 치환자를 다룹니다.

블로그 유입은 키워드 검색으로 대부분 들어오는데, 해당 글과 관련 된 글 목록이 노출되기 때문에 바로 빠져나가지 않고 한번더 다른 글을 쉽게 접근할 수 있도록 목록을 출력하는 기능입니다.
카테고리 내 다른 글 목록은 블로그 방문자들을 한 번 더 블로그에 붙잡아 둘 수 있는 미끼라고 생각하시면 쉽겠네요 후훗 ㅡ/.,ㅡ;;

그럼 작업을 시작합시다.

STEP 1. skin.html 마크업

                    
                        
                        

                            

                                티스토리 스킨만들기/Tistory One Related Articles
                            
                            

                                
                                    

                                        
                                            
                                            
                                            
                                        
                                    
                                
                                    

                                        
                                            
                                            
                                            
                                        
                                    
                                
                                    

                                        
                                            
                                            
                                            
                                        
                                    
                                
                                    

                                        
                                            
                                            
                                            
                                        
                                    
                                
                            
                             MORE
                        
                        
                    

카테고리 내 다른 글 보기 코드 구조

• <!-- //article --> 주석 아래에 카테고리 내 다른 글 보기 영역을 지정합니다.
• 카테고리 내 다른 글 보기 영역 지정은 <s_article_related></s_article_related>로 지정합니다.
• 카테고리명은 티스토리 스킨만들기/Tistory One, 링크는 당연히 /category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%EB%A7%8C%EB%93%A4%EA%B8%B0/Tistory%20One
• 다른 글 목록은 여러개의 글이 출력되어야 하므로 반복문이 돌아갈 "목록 영역"을 지정해줘야 합니다.
  목록 영역은 <s_article_related_rep></s_article_related_rep>으로 지정합니다.
1. 목록 링크는 로 걸어야 해당 포스트로 이동합니다.
   
2. 썸네일이 나오게 하려면 위와 같이 <s_article_related_rep_thumbnail></s_article_related_rep_thumbnail>이라고 영역을 지정해준 후 "//i1.daumcdn.net/thumb/C480x270/?fname="로 경로 지정을 해줍니다.
   여기서 C480x270은 썸네일 이미지 생성 크기 입니다. 원하는 크기로 변경하셔도 무방합니다. 1:1사이즈로 입력하시면 됩니다.
   만약 이미지가 안나오면 크기 지원을 안하는 것이기 때문에 100 ~ 300 이하로 지정하시면 나올 확률이 올라갑니다.
   썸네일 이미지 크기에 대한 정보는 다른 포스트를 참고하세요.
3. 목록에 나오는 생성일 치환자는
4. 목록에 나오는 제목 치환자는
• 목록에 안나오는 글을 더 보기 위하여 해당 카테고리로 이동하는 링크 치환자는 /category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%20%EC%8A%A4%ED%82%A8%EB%A7%8C%EB%93%A4%EA%B8%B0/Tistory%20One입니다.
  "더보기 또는 more"라고 버튼을 만들면 됩니다.

STEP 2. style.css 추가

/* Article Related */
.article-related {position:relative; margin:10px 0; padding:20px; background:#fff; border:1px solid #ddd;}
.article-related h1 {font-weight:normal; font-size:1.5em}
.article-related h1 a {color:#ff8149}
.article-related ul.related-list {margin-top:20px; list-style:none}
.article-related ul.related-list li {border-top:1px solid #eee}
.article-related ul.related-list li a {display:block; padding:15px 0 15px 10px; color:#999}
.article-related ul.related-list li a:after {display:block; clear:both; content:''}
.article-related ul.related-list li a:hover, .article-related ul.related-list li a:active, .article-related ul.related-list li a:focus {color:#111; background:#f7f7f7; text-decoration:none}
.article-related ul.related-list li .related-list-thumb {display:block; float:left; margin:0 30px 0 0; width:150px; height:80px; overflow:hidden}
.article-related ul.related-list li .related-list-date {display:block; margin-top:5px; font-size:1em; color:#bbb;}
.article-related ul.related-list li .related-list-title {font-weight:normal; font-size:1.25em}
.article-related .related-more {position:absolute; top:27px; right:20px}

• 빠른 진도를 위하여 묻고 따지지도 않고 날코딩했습니다. 참고만하세요 ㅡ/,.ㅡ;;

위와 같이 작업을 모두 끝냈다면 아래와 같은 결과가 나옵니다.
디자인이 똑같이 안나온다고 당황하지 마시고..치환자가 올바르게 동작하여 원하는 요소들이 빠짐없이 출력이 되었는지만 확인하시고, 디자인은 나중에 천천히 바꾸시면 됩니다.

카테고리 내 다른 글 보기 최종 결과

끝.

티스토리 반응형 스킨 만들기로 생성 된 소스는 https://github.com/nOo9ya/tistory-one 에서 다운 받으실 수 있습니다.
혹시 진도를 따라오지 못 했거나 중간부터 보신분들은 깃허브에서 확인하시면 되겠습니다.