티스토리 블로그: 현재 보고있는 카테고리 강조시키기

자바스크립트를 이용하여 현재 내 블로그에서 보고 있는 게시글의 카테고리, 또는 보고 있는 카테고리를 사이드바에서 강조 시켜보려고 한다.

아래처럼!

 

 

 

우선, 글을 볼 때 강조하는 방법과, 카테고리를 볼 때 강조하는 방법이 다르다.

현재 주소에서 블로그주소/category일때, 블로그주소/entry일때의 경우를 다르게 처리해주면 된다.

 

카테고리를 보고 있을 때 카테고리 불러오기

카테고리를 보고 있을 때의 현재 주소를 보자.

블로그주소/category/카테고리/서브카테고리 형식으로 되어 있다.

현재 카테고리를 알아내기 위해, 현재 URL에서 가져오면 될 것 같다!

 

const curr_path = location.pathname;

// /category/PS/Leetcode

location.pathname을 통해서 브라우저 현재 URL이 현재 사이트에서 어디로 접근했는지 가져올 수 있다.

 

 

글을 보고 있을 때 카테고리 불러오기

글을 보고 있을 때에는 불러오는 방법이 좀 더 복잡하다.

우선, 현재 보고있는 게시글에서 소속된 카테고리로 넘어오는 하이퍼링크가 필요하다.

그리고, 저 부분에 대한 id가 있어야 한다. 다른 방법도 가능하지만, id가 있는 경우, 가장 편리하게 불러올 수 있다.

 

 

현재 나의 스킨은 아래와 같이 되어있다.

<div class="article-category" id="article-category">
	<a href="/category/SEO%20%2B%20%EB%B8%94%EB%A1%9C%EA%B7%B8">
		<< SEO + 블로그
    </a>
</div>

 

저 부분을 가져오기 위해, getElementById를 이용한다.

innerHTML을 이용해서 안에 있는 앵커 태그 부분을 문자열로 가져온다.

문자열에서 처음 나오는 '/'부터 '>'이 나오기 앞 부분까지 문자열을 자른 부분이 카테고리를 보고 있을 때와 똑같은 경로라고 할 수 있다.

const category_anchor = document.getElementById("article-category").innerHTML;
const curr_path = category_anchor.substring(category_anchor.indexOf("/"), category_anchor.indexOf(">") - 1);

// /category/PS/Leetcode

 

 

 

카테고리 강조시키기

이제, 카테고리를 문자열로 가져왔으니, 강조를 해보자.

 

문자열 카테고리를 배열로 변환하기 위해, split()을 이용한다. 리스트를 만들었을 때, 앞에는 공백으로 된 요소가 하나, category가 하나 있는데, 순수 카테고리만 남기기 위해서 배열의 인덱스 2번부터만 저장하기로 하자.

const target_arr = path.split('/').splice(2);

 

왼쪽 사이드바의 카테고리를 가져오기 위해, getElementById로 카테고리 요소를 불러오고, querySelectorAll(ul li a)를 이용하여

카테고리의 a 태그들을 모두 가져온다.

const listItems = document.getElementById('category-list').querySelectorAll("ul li a");

 

 

모두 가져온 a태그들에 대하여 글에서 카테고리를 불러올 때와 같이 문자열 자르기를 이용하여 태그 안의 카테고리 이름만 가져온다.

추출한 카테고리 이름이 강조 해야 할 목록과 같다면, 그 a태그에 대해 클래스를 추가하여 현재 보고있는 카테고리임을 명시한다.

for (const listItem of listItems) {
	const curr_category = listItem.innerHTML.substring(1, listItem.innerHTML.indexOf('<') - 1);
   	if (target_arr.includes(curr_category)) {
        listItem.classList.add("curr-category");
	}
}

 

 

이제, css로 현재 보는 카테고리에 대한 스타일을 추가해주면 된다!

티스토리에서 큰 카테고리 요소의 클래스는 link_item, 작은 카테고리 요소의 클래스는 link_sub_item이라고 되어 있으므로, 아래와 같이 해준다.

.category .link_item.curr-category,
.category .link_sub_item.curr-category {
    color: #7FC7D9;
}

 

 

문제 해결: 카테고리가 영문이 아닌 경우

카테고리가 영문이 아닌 경우, URL을 불러오면 인코딩이 되어있는 경우가 있을 수 있다.

리스트에서 비교를 할 수 없어서, 강조되지 않을 수 있다.

 

자바스크립트로 URL디코딩하는 법을 참고하여 해결하도록 하자.

 

 

전체 코드

아래 코드는 다른 기능 추가를 위해 로직들을 더 잘라놓은 것으로, 불필요한 코드분리를 한 것처럼 보일 수는 있다.

// 카테고리일떄 다음을 실행
function category_function() {
	category_emphasize_in_category();
}

// 게시글일때 다음을 실행
function entry_function() {
	category_emphasize_in_article();
}

// 카테고리 탐색기에서 카테고리 강조
function category_emphasize_in_category() {
	const curr_path = location.pathname;

	category_emphasize(curr_path);
}

// 게시글에서 카테고리 강조시키기
function category_emphasize_in_article() {
	const category_anchor = document.getElementById("article-category").innerHTML
	const curr_path = category_anchor.substring(category_anchor.indexOf("/"), category_anchor.indexOf(">") - 1);

	category_emphasize(curr_path);
}


// 현재 path를 받아서 카테고리 탐색 후 강조 클래스 부여
function category_emphasize(path) {
	const target_arr = decode(path);

	const listItems = document.getElementById('category-list').querySelectorAll("ul li a");
	for (const listItem of listItems) {
		const curr_category = listItem.innerHTML.substring(1, listItem.innerHTML.indexOf('<') - 1);
		if (target_arr.includes(curr_category)) {
			listItem.classList.add("curr-category");
		}
	}
}

function decode(path) {
	target_arr = path.split('/').splice(2);
	target_arr.forEach((v, i, arr) => arr[i] = decodeURIComponent(arr[i]));
	return target_arr;
}

// 페이지가 로드되면
window.onload = function () {
	const curr_path = location.pathname;
	let firstPath = curr_path.split('/')[1];

	if (firstPath === 'category') {
		category_function();
	} else if (firstPath === 'entry') {
		entry_function();
	}
}