티스토리 글목록에 야매로 페이지 버튼을 만들자.

먼저 티스토리 관리자 메뉴에 들어가서 꾸미기-화면설정-화면출력-선택화면 부분에 목록+내용을 선택해준다. 그러면...

이런식으로 목록이 먼저 표시되고 아래쪽에 글이 쭉 나온다.

그런데 전체 글갯수가 현재 67개인데 한화면에 10개밖에 출력하지 않으니 페이징이 필요하다.

물론 당연히 기본 블로그에서 제공이 되는데 문제는 그게 맨 아래에 있다는 거다. 목록에도 페이지를 넘기는 버튼이 있었으면 좋겠다!!

그래서 관리자메뉴-HTML/CSS 수정에 들어가서 페이징 소스를 찾아봤다.

ctrl+f로 paging을 검색해서 아래쪽에서 <s_paging>이라는 태그를 찾을 수 있었다.

저 <s_paging> ~~~ </s_paging>을 통채로 복사해서 윗쪽에 목록 뒷부분에 붙여넣어줬다.

이런식으로 목록 태그인 <s_list> 가 끝나고 나서 복사한 코드를 붙여넣어줬다. 그리고 나서 결과를 보니..

이런식으로 목록 밑에 페이지를 고를수 있는 버튼이 생겼다.

하지만 나는 약간 강박같은 것이 있어서 저 희미한 회색 음영 라인이 <1234...7>을 감싸주지 못하는 것이 너무 신경쓰인다..;;;;;

거기다가 home 화면에서는 목록이 표시되지 않아서 맨 위에 페이지 버튼만 덩그러니 있게된다. 여러모로 마음에 안든다...

그래서 어떻게든 저 <s_list>태그 안으로 페이지 버튼을 밀어넣으려고 했지만 <s_list>태그 안에서는 무슨짓을 해도 저방식으로는 페이지 버튼이 생기지 않는다는 것만 확인했다.

게다가 더 큰 문제가 발생했으니.....

블로그의 맨 아랫부분이다.

보이는가?? 아랫쪽에 있었던 페이지 숫자 버튼이 사라져버렸다!! 넘기기 버튼은 남아있는 듯 하지만 작동이 안된다....

아마 자바스크립트로 버튼에 url을 뿌려줄 때 하나의 태그에서만 id를 뽑아서 뿌려주는 것 같다.... 즉 한 페이지에 두개 이상의 페이징 소스코드를 붙여넣으면 한쪽밖에 작동이 안된다는 뜻....

이부분을 수정할수 있으면야 수정하고 싶으나.... 찾을수가 없다. 수정할 수 없는 자바스크립트다.

그러나 나는 의지의 한국인이니... 여러가지 방법을 시도해보다가 타협점을 찾았다.

먼저 아까 복붙했던 페이징 태그를 깔끔하게 삭제해버렸다. 이로써 아래에 있는 페이지 버튼은 제대로 작동할 것이다.

그리고 <s_list>태그의 안쪽에 <div>~~~~</div> 부분을 추가해줬다.

paging_p, paging_n이라는 새로운 id를 가지는 a 태그를 추가해준 것이다.

그리고서 body의 하단에 스크립트들이 있는곳에 위와 같이 스크립트를 추가해줬다.

솔직히 자뻑이지만 머리를 잘 썼다고 생각한다.

아래쪽에 페이지 버튼들을 그대로 남겨놓고 윗쪽에서는 아래쪽에 있는 페이지버튼에서 속성값을 가져오는 것이다. 이렇게 하면 서버로부터 페이지 정보를 받을 필요 없이 자급자족이 가능해진다.

내용을 조금더 부연하자면....

이전 페이지 버튼은 더이상 이전페이지가 없을경우 class가 "no-more-prev"로 바뀐다. 그부분을 디버깅하며 포착해서

prevPage라는 아이디를 가지는 태그의 class가 "no-more-prev"일 경우 href를 변경하지 않고,

그렇지 않을경우에는 이전에 페이지가 더 남아있다는 뜻이므로 해당 태그에서 href 속성을 가져와서 새로 만든 paging_p라는 id를 가지는 a태그에 넣어준 것이다.

nextPage역시 똑같은 방식으로 만들었다.

결과를 보면

윗쪽에는 이런식으로 이전페이지, 이후 페이지 버튼이 생겼으며...(무려 목록의 선 안쪽으로 들어갔다.. 만세!!! 이제 목록이 표시되지 않을때는 저 페이지버튼도 같이 사라질 것이다.)

아랫쪽의 버튼 또한 제대로 남아있는 것을 확인했다.

끝-

ps. 추가로 윗쪽 페이지 버튼에도 숫자를 넣을수 있을까 고민중이다... 전체 페이지 갯수를 어떻게 얻어낼 것인지 짧디 짧은 자바스크립트 지식내에서 낑낑대는중...