티스토리 스킨 제작기 - 카테고리 메뉴 변경

개요

카테고리의 표시 형식은 티스토리의 형식이 아닌 Bootstrap의 리스트그룹으로 표시하고 있습니다. 최초 스킨 배포자의 경우, JavaScript를 사용하여 상위 레벨의 카테고리만 표시하도록 설정을 해 놓았습니다. 저의 경우는 서브 카테고리를 사용하기에 이 역시 화면에 함께 표시를 하고자 하였습니다.

따라서 해당 리스트그룹을 접었다 폈다 할 수 있는 형식으로 변경하였습니다.

완성된 모습은 다음과 같습니다.

수정사항

기존의 코드는 다음과 같습니다.

// script.js
var categories = [];

// 전체 글 갯수 구하기
var totalNumberOfPosts = $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1];
categories.push(["All", "/category", totalNumberOfPosts]);

// 카테고리 구하기
$("ul.category_list > li > a").each(function (index) {
	var category = $.trim($(this).contents().filter(function () { return this.nodeType == 3; })[0].nodeValue);

	var href = $(this).attr('href');
	var numberOfPosts = $(this).find("span").text().match(/\(([^)]+)\)/)[1];
	categories.push([category, href, numberOfPosts]);
});

// 카테고리 메뉴 생성
var listGroup = $('.list-group');

$.each(categories, function (i) {
	var li = $('<a/>')
	.attr('class', 'list-group-item list-group-item-action d-flex justify-content-between align-items-center')
	.attr('href', categories[i][1])
	.text(categories[i][0])
	.appendTo(listGroup);

	var span = $("<span/>")
	.attr('class', "badge badge-primary badge-pill")
	.text(categories[i][2])
	.appendTo(li);
});

우선, JQuery 라이브러리가 무엇인지, 어떻게 사용하는 것인지 인터넷에 제공되는 정보를 확인해보았습니다.

검색은 “javascript $ sign”으로 하니, 원하는 답변을 얻을 수 있었습니다.

인기 있는 JavaScript 라이브러리 중 하나인 JQuery라고 합니다. 이를 바탕으로 다시 검색을 하였고 그 결과 아래의 강좌를 시청하여 JQuery의 기본 사용법을 학습하였습니다.

jQuery란? - 생활코딩

그래도 초보자인 제가 처음부터 모든것을 다시 한다는 것은 어려울 것이라고 생각하여, 기존 코드를 활용하여 약간씩 수정을 해보는 것으로 작업의 방향을 설정하였습니다.

우선, 기존 스킨의 결과물은 다음과 같습니다.

All 이라는 카테고리 항목은

// 전체 글 갯수 구하기
var totalNumberOfPosts = $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1];
categories.push(["All", "/category", totalNumberOfPosts]);

의 코드를 통해 얻을 수 있습니다. “ALL”이라는 문자열, 그리고 링크, 그리고 부트스트랩 뱃지로 표시된 포스팅 숫자를 배열에 넣습니다. (push)

이를 통해서 categories라는 변수에 표시할 내용을 넣고, 카테고리 메뉴 생성 부분의 함수에서 이를 활용하여 화면에 표시됨을 확인할 수 있습니다.

다음 코드를 확인하기 위해서 우선은카테고리를 구하는 부분과 생성된 티스토리의 html 파일을 비교해 보았습니다.

티스토리의 카테고리 부분에 해당하는 html 은 다음과 같은 구조를 갖는다고 합니다.

▼ 카테고리 목록의 구조

<ul  class="tt_category">  
  <li>
    <a  class="link_tit"  href="/category">분류 전체보기 <span  class="c_cnt">(글갯수)</span></a>  
    <ul  class="category_list">  
      <li>
        <a  class="link_item"  href="...">카테고리명 <span  class="c_cnt">(글갯수)</span></a>
        <ul  class="sub_category_list">
          <li>
            <a  class="link_sub_item"  href="...">서브 카테고리명 <span  class="c_cnt">(글갯수)</span></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>  

출처

$("ul.category_list > li > a").each(function (index) {
	var category = $.trim($(this).contents().filter(function () { return this.nodeType == 3; })[0].nodeValue);

	var href = $(this).attr('href');
	var numberOfPosts = $(this).find("span").text().match(/\(([^)]+)\)/)[1];
	categories.push([category, href, numberOfPosts]);
});

기본적으로 JQuery 는 html 문서의 요소를 선택하여 편집하는 것으로 학습하였기 때문에, 위 코드 역시 일치하는 요소를 찾는 것임을 추측할 수 있고, category_list 라는 항목을 살펴보면

<a  class="link_item"  href="...">카테고리명 <span  class="c_cnt">(글갯수)</span></a>

부분에서 필요한 정보를 읽는 것으로 보입니다. 서브 카테고리를 불러오는 기능은 이를 흉내내어 다음의 코드를 아래에 추가하여 원하는 결과를 얻었습니다.

$(this).find("ul.sub_category_list > li > a").each(function (index) {
  // ... 기능 추가 ...
}

이와 같이 기존의 코드를 조금씩 수정하여 최종적으로 얻은 코드는 다음과 같습니다.

var  categories  = [];

// 전체 글 갯수 구하기
var  totalNumberOfPosts  =  $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1];
categories.push({"title":"전체보기", "link":"/category", "posts":totalNumberOfPosts, "type":"main", "child":[]});
  
// 카테고리 구하기
$("ul.category_list > li").each(function (index) {
	var  category  =  $.trim($(this).find('a').contents().filter(function () { return  this.nodeType  ==  3; })[0].nodeValue);
	var  href  =  $(this).find('a').attr('href');
	var  numberOfPosts  =  $(this).find("span").text().match(/\(([^)]+)\)/)[1];
	var  type  =  "main";
	
	var  main  = {"title":category, "link":href, "posts":numberOfPosts, "type":type, "child":[]};
	var  parent  =  categories.length;

	$(this).find("ul.sub_category_list > li > a").each(function (index) {
		var  category  =  $.trim($(this).contents().filter(function () { return  this.nodeType  ==  3; })[0].nodeValue);
		var  href  =  $(this).attr('href');
		var  numberOfPosts  =  $(this).find("span").text().match(/\(([^)]+)\)/)[1];
		var  type  =  parent;
		main.child.push({"title":category, "link":href, "posts":numberOfPosts, "type":type});
	});

	categories.push(main);
});

// 카테고리 메뉴 생성

var  listGroup  =  $('.list-group');
$.each(categories, function (i) {
	var  div  =  $('<div/>')
	.attr('class', 'list-group-item list-group-item-action d-flex justify-content-between align-items-center')
	.appendTo(listGroup)
 
	// 추가
	if (categories[i].child.length  !=  0) {
	var  icon  =  $("<i/>")
	.attr('class', "fa")
	.html('&nbsp;')
	}

  	$('<a/>')
	.attr('class', 'collapsed')
	.attr('data-toggle', 'collapse')
	.attr('data-target', "#"  +  i)
	.attr('aria-expanded', 'false')
	.attr('aria-controls', i)
	.appendTo(div)
	.prepend(icon);
 
	$('<a/>')
	.attr('class', "mr-auto")
	.attr('href', categories[i].link)
	.text(categories[i].title)
	.appendTo(div)
	.after(function() {
		return  $("<span/>")
		.attr('class', "ml-auto badge badge-primary badge-pill")
		.text(categories[i].posts)
	})

	if (categories[i].child.length  !=  0) {
		div  =  $('<div/>')
		.attr('class', 'collapse')
		.attr('id', i)
		.appendTo(listGroup)
	 
		// 서브카테고리 추가
		for (var  j=0;j<categories[i].child.length;j++) {
			var  li  =  $('<a/>')
			.attr('class', 'list-group-item list-group-item-action d-flex justify-content-between align-items-center')
			.attr('href', categories[i].child[j].link)
			.attr('id', categories[i].child[j].type)
			.text(categories[i].child[j].title)

			$("#"+categories[i].child[j].type).append(li);
			$("<span/>")
			.attr('class', "ml-auto badge badge-primary badge-pill") // ← ml-auto 추가
			.text(categories[i].child[j].posts)
			.appendTo(li);
		}
	}
});

변경된 부분은 부트스트랩의 Collapse 기능을 활용하여 카테고리를 접고/펴는 형식으로 변경하기 위하여 해당 배열의 구조를 객체 배열로 변경하였으며, 하위 카테고리의 정보는 상위 카테고리 객체의 child 속성에 다시 배열로 추가하였습니다. 이 후, 이 정보를 바탕으로 카테고리를 main과 sub_category로 나누어 화면에 출력하였으며, 그 길이에 따라 main 메뉴의 앞부분에는 접었다 펼 수 있는 기능을 하는 아이콘을 추가하였습니다.

결론

전문 웹 개발자는 아닌 관계로 JavaScript 및 JQuery 를 사용하는 것이 숙련되지 못하여, 최대한 기존 코드를 재사용하여 구현을 하는 것을 목표로 그리고 성능이 아닌 기능 위주로 목표를 잡았습니다. 참고할 수 있는 기존의 코드를 최대한 수정 없이 가는 것으로 시작하여 원하는 기능에 따라 조금씩 소스코드를 수정하다 보니, 결국은 기존의 메뉴를 삭제하고(재사용), 이를 다시 재구성(재사용)하여 삽입하는 비효율적인 소스코드가 완성이 되었습니다.

아마 추후 필요하거나 문제가 발생하여 개선을 해야 되는 상황이 온다면 이번에는 그저, 기존에 구성되어 있는 티스토리의 카테고리 항목에 JQuery 의 addClass()와 같은 함수를 사용하여 표시 형식 및 기능만 추가하는 것으로 좀 더 간단히 원하는 기능을 구현할 수 있을 것으로 기대합니다.

이것으로 일단은 오랜시간에 걸친 (기존의) 부트스트랩 기반의 티스토리 스킨 수정을 마치도록 하겠습니다.

혹시, 해당 스킨이 필요한 경우 알려주시면 따로 배포해 드리도록 하겠습니다.