잡동사니 보석함

the Web & Scripts

티스토리 오류: 카테고리 브라우징

2020. 12. 31.

카테고리 → 글을 선택한 경우, 다음글과 이전글 등 페이지네이션은 해당 카테고리 내 글만을 대상으로 합니다. 선택한 카테고리에 포함된 글만 차례로 볼 수 있는 기능이지요. 여기서는 카테고리 브라우징이라고 부르겠습니다.

※ 글 하단에 있는 '특정 카테고리의 다른글' 섹션은 페이지네이션과 별개이며, 이 글에서는 다루지 않습니다.

특정 조건에서 카테고리 브라우징 중 카테고리 정보를 잃어버리는 오류가 있습니다. 페이지네이션 링크를 따라 이동하다 보면, 선택한 카테고리에 속한 글만 나오는 게 아니라 블로그 내 모든 글이 다 나오는 오류입니다.

왜 발생하는지, 어떻게 회피할 수 있는지 간략히 알아보겠습니다.

발생 조건

포스트 주소를 '문자'로 설정한 경우, 카테고리 브라우징에 오류가 발생합니다.

발생 원인

페이지네이션 링크는 티스토리에서 제공하는 치환자를 사용하는데, 이 치환자가 잘못된 값을 반환하는 것으로 보입니다. 다음 3가지 치환자로, 각각 이전글, 다음글, 페이징 번호별 링크를 반환하는데 모두 동일한 이슈가 있습니다.

  • [##prev_page##]
  • [##next_page##]
  • [##paging_rep_link##]

쿼리 스트링

카테고리 브라우징은 URL 내 쿼리 스트링을 통해 이루어집니다. 현재 글이 속한 카테고리 번호가 파라미터로 전달되지요.

예를 들자면 다음과 같습니다.

https://crates.tistory.com/13?category=1162444

지금 보고 계시는 글 주소입니다. 기본 주소는 crates.tistory.com/13이고, 뒤에 이 글이. 속해있는 카테고리의 고유번호인 1162444 정보가 쿼리 스트링으로 붙어 있습니다

주소에 카테고리 정보가 붙어 있다는 것은 카테고리 브라우징 중이라는 뜻입니다. 당연히 이전/다음글로 가는 링크에도 해당 정보가 동일하게 붙어야 합니다. 이 주소는 앞에서 말한 치환자를 통해 자동으로 만들어집니다.

포스트 주소를 '문자'로 설정한 경우, 치환되는 주소에는 쿼리 스트링이 두 번 붙어 있습니다. 예를 들자면, 다음처럼요.

https://crates.tistory.com/Tistory-Markdown-Guide?category=1162649?category=1162649

링크 자체가 깨진 것은 아니라 클릭하면 해당글로 가지만, 쿼리 스트링은 잘못된 구조라 정보가 통째로 사라집니다. 결국, 다음 페이지네이션은 블로그 전체 글을 대상으로 만들어집니다. 즉, 특정 카테고리 내 글만 볼 생각이었는데, 넘기다 보면 갑자기 다른 카테고리 글이 뜨는 문제가 발생합니다.

해결 방법

가장 손쉽고 빠른 방법은 포스트 주소를 '숫자'로 설정하는 것입니다. 포스트 주소가 숫자로 설정되어 있을 때는 해당 오류가 발생하지 않습니다. 관리자 메뉴의 관리 - 블로그 - 주소 설정에서 변경할 수 있습니다.

문자 주소를 사용하고 싶다면, URL의 쿼리 스트링을 수정해야 합니다. 치환자 자체를 건드릴 수는 없으니, 치환된 값을 바꿔야겠죠. 자바스크립트를 이용하면 어렵지 않게 수정이 가능합니다. 방식은 여러가지 있는데, 제가 사용했던 방법 두 가지만 들어보겠습니다.

로딩시 주소 재할당

페이지를 읽어올 때, 주소를 확인하고 문제가 있으면 주소를 수정하는 방식입니다.

HTML의 head 태그 내에 다음 스크립트를 추가하면 됩니다.

<script type="text/javascript">
var currURL = location.href;
var blocks = currURL.split("?category=");
if (blocks.length > 2)
{
	location.href = blocks[0] + "?category=" + blocks[1];
}
</script>

간단하지만, 페이지를 다시 읽어오기에 그만큼 부하가 걸립니다.

앵커 주소 변경

링크 클릭시 연결된 주소를 확인하고 문제가 있으면 앵커의 주소 자체를 수정하는 방식입니다. 주소를 먼저 확인하기 때문에 리로딩이 없습니다. 단, 앵커만 수정하기 때문에 단축키로 이전/다음글 이동시 작동하지 않습니다.

일단 위와 같은 일을 하는 스크립트를 함수 형태로 추가합니다. 위와 마찬가지로 HTML의 head 태그 내에 삽입하면 됩니다.

<script type="text/javascript">
function categoryMod(e) {
	var blocks = e.href.split("?category=");
    if (blocks.length > 2) {
    	e.href = blocks[0] + "?category=" + blocks[1];
	}
}
</script>

그리고 HTML 하단에 <s_paging> 부분을 찾아갑니다. 대충 다음 같은 내용이 있을 겁니다. 스킨에 따라 일부 내용이 다를 수 있고, 여러번 나올 수도 있습니다.

<a [##*prev_page*##] class="prev [##*no_more_prev*##]">이전</a>
<a [##*next_page*##] class="next [##*no_more_next*##]">다음</a>
<a [##*paging_rep_link*##] class="link_num">[##*paging_rep_link_num*##]</a>

각각에서 상기 함수를 호출합니다. 파라미터로는 자신을 의미하는 this를 넘겨주면 됩니다. 다음처럼 되겠죠.

<a [##*prev_page*##] class="prev [##*no_more_prev*##]" onClick="categoryMod(this);">이전</a>
<a [##_next_page_##] class="next [##_no_more_next_##]" onClick="categoryMod(this);">다음</a>
<a [##*paging_rep_link*##] class="link_num" onClick="categoryMod(this);">[##*paging_rep_link_num*##]</a>

링크를 클릭할 때마다 연결된 URL를 확인합니다. 상기 예제 외에도 해당되는 앵커에는 모두 코드를 추가해야 합니다.

참고자료

썸네일 이미지 : 하기 2번 페이지 캡처

  1. 티스토리 치환자 - 페이징 : https://tistory.github.io/document-tistory-skin/list/paging.html
  2. 쿼리 스트링 : https://en.wikipedia.org/wiki/Query_string
  3. JS Split : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split
  4. Location.href : https://www.w3schools.com/jsref/prop_loc_href.asp
  5. Anchor.href : https://www.w3schools.com/jsref/prop_link_href.asp
  6. Events.click : https://www.w3schools.com/jsref/event_onclick.asp
1 2 3