프로그래밍/블로그

[티스토리] 현재 보고 있는 페이지의 카테고리를 사이드 카테고리에 강조하기

당근천국 2023. 5. 12. 15:00

티스토리에는 지금 보고 있는 페이지가 속해있는 카테고리를 강조하는 기능이 없습니다.

아래 이미지가 사이드 카테고리에 지금 있는 페이지의 카테고리를 강조한 것입니다.

 

 

 

1. 구현 방법

구현 방법은

1) 지금 보고 있는 페이지에서

2) 카테고리 정보를 추출하여 

3) 사이드 카테고리에서 찾아서

4) CSS를 추가하는 것입니다.

 

티스토리는 멀티페이지 사이트이므로 다른 페이지로 가면 페이지가 초기화됩니다.

그러니 이미 들어있는 CSS는 뺄 필요가 없습니다.

 

 

2. 카테고리 정보 찾기

카테고리 정보가 들어있는 곳은 스킨별로 다르므로 자신에게 맞는 검색 방법을 찾아야 합니다.

 

티스토리 치환자 기준으로

포스트 보기에서는  : /m/category/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EB%B8%94%EB%A1%9C%EA%B7%B8

카테고리 내용 보기, 검색에서는 :

가 들어있는 'dom'을 찾으면 됩니다.

 

찾은 dom에서 데이터를 추출하고

이 데이터에서 필요 없는 정보를 제거한 후

찾아야 할 카테고리 정보를 얻어야 합니다.

//현제 페이지의 제목 추출
let sTitle = "";
sTitle
    = $(".PageTitle > div.Titles > div.Title")[0]
        .childNodes[2]
        .textContent
        .trim();

 

4번 줄 : jquery로 카테고리 정보를 가지고 옵니다.

제 스킨의 경우 '.PageTitle > div.Titles > div.Title' 구조로 되어 있습니다.

자신의 스킨에 맞는 구조로 검색하면 됩니다.

 

7번 줄 : 'textContent'로 텍스트를 추출하면 줄 바꿈 문자와 같은 빈 문자가 들어가므로 '.trim'을 이용하여 양쪽 공백과 필요 없는 문자를 제거합니다.

 

 

이제 'sTitle'에는 추출된 카테고리 정보가 들어가게 됩니다.

 

 

3. 사이드 카테고리의 대상 찾기

이제 'sTitle'로 사이드 카테고리의 대상을 찾아야 합니다.

 

사이드 카테고리의 대상을 찾는 방법은 2가지가 있는데

1) a태그의 href로 찾는 방법

2) a태그의 텍스트 로드로 찾는 방법이 있습니다.

 

두 번째 방법은 하위 카테고리에 같은 이름이 있는 경우 구분하지 못하므로

저는 첫 번째 것을 추천합니다.

 

 

구현 방법은

1) 추출한 정보를 슬러시(/)로 자른다.

2) 자른 정보를 반복문으로 인코딩하여 하나로 합친다.

3) 합친 문자열로 대상을 찾는다.

4) 찾은 대상에 CSS를 주입한다.

 

//제목을 구분자로 자른다.
let sTitle_Cut = sTitle.split("/");

//하위 카테고리
let sTitle_Encode = "/category";
//슬러쉬(/)까지 인코딩하면 검색이 안되므로 슬러쉬는 따로 넣는다.
for (let i = 0; i < sTitle_Cut.length; ++i)
{
    let sItem = sTitle_Cut[i];
    sTitle_Encode = sTitle_Encode + "/" + encodeURIComponent(sItem);
}

//찾은 대상 dom
let domA =
    $("#divCategory_Container a[href='" + sTitle_Encode + "']");
if (domA)
{//대상이 있다.
    domA.addClass("Selected");
}

 

2번 줄 : 찾은 정보를 슬러시로 잘라 'sTitle_Cut'에 넣습니다.

 

5번 줄 : 합칠 문자열이 '/category'으로 시작되므로 넣어준다.

 

10번 줄 : 자른 정보를 이스케이핑(escaping)하여 합칩니다.

 

15번 줄 : 합친 문자열을 가지고 사이드 카테고리의 대상을 찾습니다.

 

18번 줄 : 대상이 있다면 CSS를 추가합니다.

 

 

 

완성 코드

제 블로그(지금 보고 있는 이 블로그) 스킨을 기준으로 한 코드는 아래와 같습니다.

각자 자신의 스킨에 맞는 방법으로 구현해야 합니다.

/** 현재 페이지의 제목에 해당하는 사이드 카테고리를 찾아 css를 추가한다.  */
function CategoryActivate()
{
	//현제 페이지의 제목 추출
	let sTitle = "";
	if (7 === typePage)
	{
		sTitle
			= $(".PageTitle > div.Titles > div.Title")[0]
				.childNodes[2]
				.textContent
				.trim();
	}
	else if (1 === typePage)
	{
		sTitle
			= $("#divPost > div.PageTitle  > div.Titles > div.Category > a")[0]
				.childNodes[2]
				.textContent
				.trim();
	}

	if ("" !== sTitle)
	{//제목이 있을때만

		//제목을 구분자로 자른다.
		let sTitle_Cut = sTitle.split("/");


		if (0 < sTitle_Cut.length)
		{//자를 제목이 있다.

			//최상위 카테고리 찾기
			let sTitleTop_Encode = "/category";
			sTitleTop_Encode
				= sTitleTop_Encode + "/" + encodeURIComponent(sTitle_Cut[0]);
			let domATop
				= $("#divCategory_Container a[href='" + sTitleTop_Encode + "']");
			if (domATop)
			{//대상이 있다.
				domATop.addClass("Selected");
			}


			//하위 카테고리
			let sTitle_Encode = "/category";
			//슬러쉬(/)까지 인코딩하면 검색이 안되므로 슬러쉬는 따로 넣는다.
			for (let i = 0; i < sTitle_Cut.length; ++i)
			{
				let sItem = sTitle_Cut[i];
				sTitle_Encode = sTitle_Encode + "/" + encodeURIComponent(sItem);
			}

			//찾은 대상 dom
			let domA =
				$("#divCategory_Container a[href='" + sTitle_Encode + "']");
			if (domA)
			{//대상이 있다.
				domA.addClass("Selected");
			}
		}
	}
}

 

6번 줄 : 제가 만든 스킨의 경우 '포스트 보기'와 '카테고리 내용 보기'를 'typePage'으로 구분할 수 있도록 해놓았기 때문에 

'typePage'으로 구분하여 정보를 찾습니다.

 

 

33번 줄 : 상위카테고리도 표시하고 싶어서 'sTitle_Cut[0]'의 데이터를 가지고 대상을 찾아 CSS를 추가했습니다.

 

 

 

마무리

티스토리에서 자체 지원해 줘도 될 텐데 안 해주는 기능 중 하나인 '현재 카테고리 강조' 기능입니다.

 

제가 HTML에는 코드를 가급적 넣지 않으려고 이렇게 구현 한거지

HTML에 자바스크립트를 넣을 생각이면 티스토리 치환자를 이용하여 좀 더 편하게 구현할 수 있긴 합니다.

저작자표시