티스토리 블로그 북클럽 스킨, 포스트 커버에 카테고리 링크 추가

 

티스토리 블로그의 "북클럽 스킨의 포스트 커버 높이 수정"글을 캡처한 이미지입니다. 

무료로 제공하는 북클럽 스킨을 기준으로 설명을 진행합니다.

 

글의 포스트 커버에는 글이 담겨있는 카테고리 이름이 있습니다.

"기타/티스토리" (위 이미지 참고)

 

해당 글을 읽고 그 카테고리를 계속해서 검색하고 싶을 경우, 일반적인 웹페이지의 경우 위의 이미지와 같이 빨간색으로 블록 처리한 부분을 클릭하면 바로 이동이 가능하게 편집되어 있습니다. 링크가 설정되어 있기 때문입니다.

 

티스토리 제공 무료 스킨들은 링크를 시키지 않고 단순하게 텍스트만 보여 줍니다. 그래서 사이드바에 배치한 카테고리로 이동하여 해당 항목을 찾는 불편함을 감수해야 합니다.

 

 

개인 취향에 따라 다르겠지만, 코드를 약간만 수정하면 방문자가 편하게 글을 검색할 수 있는 링크 설정이 가능합니다. 그리고 티스토리에서 해당 기능을 지원하는 "치환자"라는 코드를 제공하기 때문에 간단하게 편집 작업을 진행할 수 있습니다.

 

관리자로 로그인 하여 블로그 "스킨 편집" 메뉴의 "HTML 편집" 혹은 "skin.html" 파일을 직접 열고 포스트 커버(post-cover)의 화면 출력과 관련이 있는 부분을 찾습니다.

 

라인 405 부근에 관련 코드가 적혀 있습니다.

<span class="category">IT/티스토리</span>

 

<div class="inner">
<span class="category">IT/티스토리</span>
<h1>티스토리 블로그 북클럽 스킨, 포스트 커버에 카테고리 링크 추가</h1>
<span class="meta">
<span class="author">by 무찌마</span>
<span class="date">2020. 8. 16.</span>
<s_ad_div>
<a href="">수정</a>
<a href="#" onclick="">삭제</a>
</s_ad_div>
</span>
</div>

 

티스토리에서 사용하는 치환자입니다.

- 카테고리 링크

- 카테고리 이름

/category/IT/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC: 카테고리 링크

IT/티스토리: 카테고리 이름

 

"skin.html" 파일의 아래 코드를 수정하여

<span class="category">IT/티스토리</span>

 

"카테고리 링크" 치환자를 추가한 다음과 같은 코드로 변경합니다.

<span class="category">
<a href="/category/IT/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC">
IT/티스토리
</a></span>

 

다 끝났습니다. 저장하고 확인해 보세요.