카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기

며칠 포스팅을 올리지 못했는데, 제가 한가지에 꽂히면 다른걸 못하는 성격이라 ;;

이번에 올리는 포스팅이 잘 해결이 안되서 며칠 올리지 못했어요.

오늘 올릴 포스트는 네이버 블로그처럼 카테고리의 다른 글 목록에 이전, 다음 버튼 만드는 방법입니다.

티스토리 블로그의 글을 보면 글 하단에 [카테고리의 다른 글] 목록의 이전, 다음 버튼이 없어서 카테고리 메뉴바를 클릭해야하는 번거로움이 있죠?

제 블로그 글 하단에 [카테고리의 다른 글] 목록에 보시면 이전, 다음 버튼이 보일것입니다.

해당 카테고리의 글이 10개 이상이어야 해당 버튼이 보입니다.

버튼을 클릭하면 아래처럼 Loading... 이 표시되면서 카테고리 목록을 불러오는 준비를 합니다.

목록이 다 불려지면 아래처럼 목록이 갱신되며, 버튼도 이전, 다음 버튼이 활성화됩니다.

다음 보기 하면 이전 버튼이 활성화되고 다음목록이 없으면 다음 버튼이 비활성화 됩니다.

해당 카테고리의 글이 10개 이상이어야 이전, 다음 버튼이 활성화됩니다. 해당 글의 카테고리의 글이 적은데(10개이하) 버튼이 안나온다고 문제가 있는것이 아닙니다.

여기서, 몇가지 문제점이 있어서 이걸 포스팅을 해야하는지 말아야하는지 고민되서 며칠 포스팅을 올리지 못했습니다.

결론은, 블로거님들의 판단에 맡기기로 했습니다. 이 기능이 쓸만하면 사용하시고, 별로다 싶으면 사용하지 마세요 ^^

몇가지 문제의 원인은 티스토리 블로그가 호스팅되는 웹서버가 아니라서 DB접속도 할수 없고, javascript로만 처리해야하기 때문에 기능 구현을 위해서 우격다짐으로 만들다 보니 아래 2가지 문제가 있습니다.

문제1) 현재 페이지가 몇페이지인지 알길이 없어서 처음 이전 또는 다음 버튼을 누르면 무조건 해당 카테고리의 첫페이지로 이동됩니다. 

         무슨말이냐면, 이전, 다음 버튼을 처음 클릭할때는 어떤 버튼을 누르든지 이전, 다음 페이지가 아닌 해당 카테고리의 1페이지로 이동합니다.ㅠㅠ

문제2) 카테고리 목록 페이지가 로딩되야 하기 때문에 로딩 시간이 좀 걸립니다. 블로그에 따라 1~3초..more...;;

이 두가지 문제에도 불구하고 이 기능을 사용하고 싶으시면 아래처럼 하시면 됩니다. 아주 간단합니다.

우선 환경설정을 위해서 관리 -> 화면설정 -> 화면출력탭에서 선택화면의 글 목록을 10개, 목록+내용으로 선택하셔야 합니다.

환경설정이 됐으면, 아래 파일을 다운로드 받아서 압축해제 하세요.

categorypaging.zip

그러면, 아래처럼 5개의 파일이 있을것입니다.

이 파일을 관리 -> HTML/CSS 편집 -> 파일업로드에 업로드하세요.

그리고 아래코드를 스크린샷처럼 </head>앞에 추가하시고 저장하세요.

<script src="./images/categorypaging.js"></script>

벌써 어렵기 시작하는건 아니죠? 더 할게 남았냐구요?? 끝입니다~~~

해보시고 아니다 싶으면 해당 코드 1줄만 삭제하시면 됩니다.

그럼 좋은 하루 되세요 ^^

공감 눌러주시는거 잊지 마시구요 ^^