tiCategory :: Tistory 블로그 카테고리 데이터 얻기

Intro

스킨을 개발하면서 카테고리를 좀 더 디테일하게 꾸미고 싶었으나, 카테고리의 구조가 복잡하고, 접힌 카테고리와 펼쳐진 카테고리의 구조가 너무나도 다르기 때문에 스타일을 수정하기가 까다롭다. 그래서 그냥 카테고리 목록을 데이터화해서 이용 가능하도록 만들었다. 라이브러리 형태로 제공된다. 처음 공개하지만 v2.0인 이유는 필자가 스킨을 만들면서 비슷한 형태를 한 번 만든 경험이 있었지만, 급하게 만든 탓에 배포하기에 적당하지 않았다.

Download

tiCategory_2.0.js

Usage

tiCategory.target = $("#categry"); tiCateogry.init(); var categoryData = tiCategory.getList;

먼저 jQuery가 사용 가능해야 한다. tiCategory.js를 추가시킨 후 카테고리가 어디에 있는지 명시해줘야 하는데, 티스토리에서 제공하는 category 치환자의 직계 부모 요소여야만 한다. category 엘리먼트 자체를 지정해주면 안 된다. 다음 예제를 참고해보자.

<div id="category"> <h4>Category</h4> <div class="category"> [＃＃_category_＃＃] </div> </div>

위와 같은 구조일 경우 div.category를 타깃으로 해줘야 한다. div#category를 하면 안 된다. 무조건 직계 부모 요소여야만 한다.

APIs

tiCategory.target = $("#category"); // 카테고리 부모요소 명시 tiCategory.init(); // 카테고리 데이터화 tiCategory.getList; // 배열 타입의 카테고리 데이터 tiCategory.isForld // 닫힌 카테고리: true 반환, 열린 카테고리: false 반환 tiCategory.ver // tiCategory.js의 버전 반환 var categoryData = tiCategory.getList; // tiCategory.getList로 얻은 배열의 형식 categoryData[0] // 분류 전체보기 정보 categoryData[1] // 첫번째 카테고리 정보 categoryData[2].title // 두번째 카테고리의 이름 categoryData[2].count // 두번째 카테고리의 글 갯수 categoryData[2].link // 두번째 카테고리의 주소 categoryData[2].isNew // 두번째 카테고리의 새 글 여부. 0: 새 글 없음, 1: 새 글 있음 categoryDate[2].children // 두번째 카테고리의 하위 카테고리 categoryData[2].children[0] // 두번째 카테고리의 하위 첫번째 카테고리 categoryData[2].children[0].title // 두번째 카테고리의 하위 첫번째 카테고리의 이름 categoryData[n].children[m].title // n번째 카테고리의 하위 (m-1)번째 카테고리의 이름

상위카테고리의 0번 인덱스는 '분류 전체보기' 정보이므로 첫번 째 카테고리는 1번 인덱스부터 시작함에 유의하자.

Demo

// Adapt Sidebar Category // This block need tiCateogry.js (function() { tiCategory.target = $("#category div.list-group"); tiCategory.init(); var categoryData = tiCategory.getList; tiCategory.target.html(""); for (var i = 0; i < categoryData.length; i++) { tiCategory.target.append("<a class='list-group-item' href='" + categoryData[i].link + "'><b>" + categoryData[i].title + "</b><span class='badge pull-right'>" + categoryData[i].count + "</span></a>"); var temp = categoryData[i].children; if (!temp) { continue; } for (var j = 0; j < temp.length; j++) { tiCategory.target.append("<a class='list-group-item' href='" + temp[j].link + "'>" + temp[j].title + "<span class='badge pull-right'>" + temp[j].count + "</span></a>"); } } })();

위 코드는 BooTistrap에 실제 사용된 코드이다.