[정보] 티스토리 카테고리명 쪼개기(?)

※ 본문에 있는 티스토리 치환자에 ★을 넣은 이유는 티스토리 치환자이기 때문에 별이 없으면 자동적으로 치환되어 보이기 때문에 ★을 붙여서 치환자를 보여드리고자 함입니다. 실제로 ★이 없는 상태라고 생각하셔야 합니다.

 

 

1. 티스토리 카테고리명을 쪼개고(?) 싶은 이유

스킨을 다운로드받고 html을 수정하거나, css를 수정해 본 사람이라면 대충 다 알 것이라고 생각한다.

카테고리 리스트 치환자인 [★##_category_list_##★]를 해서 하는 경우, 카테고리명을 쪼개고 싶을 때가 없다.

 

 

왼쪽 콘텐츠 > 카테고리 관리 / 오른쪽 category list 치환자 입력 시

 

왼쪽은 내가 manage > 콘텐츠 > 카테고리 관리에서 직접 만든 것이고 이걸 바탕으로 category list 치환자를 쓰면 정말 카테고리 관리에 있는 것처럼 보이기 때문이다.

 

그런데 왜 갑자기 쪼개고 싶어졌냐고 묻는다면 다음 이미지처럼 보이기 때문이다.

 

내가 만들어 본 웹진형

 

REVIEW를 큰 카테고리, REVIEW 산하에 있는 카테고리를 작은 카테고리라고 명명해 보겠다.

 

Q. 괜찮아 보이는데요?

 

A. 괜찮아 보이는가?

그럼 아래 이미지를 봐보자.

 

모바일에서 본 웹진형

모바일로 했더니 category가 2줄이 된 데에 이어서 날짜까지 영향을 받는 모습을 볼 수 있다.

 

Q. 카테고리명을 짧게 줄이고, 달력을 짧게 줄이면 되잖아요.

A. 그렇긴 하죠. 그렇긴 한데…. 저는 그렇게 안 할래요. 난 그냥 쓰고 싶단 말이야. 쓰고 싶어요. 빼애애액. (단비 꼬야. 단비꼬야아아)

 

2. 쪼개고 싶은 애들

 

[★##_list_rep_category_##★] 치환자 같은 카테고리를 명시하는 경우에 해당한다. 이를 제외하고라도 다른 카테고리를 표현하는 치환자까지  있는데 간단한 예시를 보자면, 현재 티스토리 블로그에 카테고리명 위에 명시해 주는 그 치환자 또한 마찬가지이다. 자세한 건 구글에서 「티스토리 치환자」만 검색해도 잘 나오는 편이다.

 

음, 내가 const나 뭘 지정해서 script로 해줄 수 있는 방법은 모르겠다. 솔직히 말하자면 저 치환자뿐만 아니라 다른 치환자 같은 경우에도 그렇게 해당하기 때문이다.

 

내가 script나 좀 공부를 열심히 했다면 const건 뭐건 써먹을 수 있을 거 같은데, 솔직히 모르겠다.

 

3. 어떻게 쪼갤 건데?

A. 내가 일단은 script를 배워서 해볼게.

 

 

그동안 티스토리를 써본 짬바로 밀어붙여보기로 한다.

 

4. 힌트는 어디에서? (Shinee is back을 BGM으로 깔아다오.)

 

가장 큰 열쇠가 되었던 건, 티스토리 날짜를 외국식으로 변경하는 스크립트^[각주:1]에 대한 내용을 읽게 된다. 읽으면서 나는 split라는 값이라는 것을 처음 알게 되고 이에 대한 검색을 하기 시작했다.

 

내가 이해한 split는 일정한 것을 기준으로 나눠줘! 라는 것이었다.

 

예를 들면,

Moonlight-이 밤을-Shine on you

이런 식의 글이 있다고 했을 때 .split(-) 라고 입력을 하면, script라는 친구가 -를 기준으로 해서 정보를 나누기 시작한다.

 

이런 식으로 정보를 쪼갤 수 있다는 걸, 알게 된다.

[0] Moonlight
[1] 이 밤을
[2] Shine on you

 

근데 왜 0부터인지는 모르겠다. 일단 0부터라니까 그냥 외워보려고 한다. (이상)

 

5. 어디 한 번 적어볼까.

 

var category = '[★##_list_rep_category_##★]'.split("/");

 

var는 선언과 뭐라고 얼핏 들었던 거 같은데 기억이 나질 않는다. (이래 봬도 스크립트 1강 강의는 들었던 인간.)

일단 category라는 애를 입력해 줄 거라는 걸로 입력해 주었다. category는 맞으니까, 일단 category라고.

그리고 list_rep_category의 치환자를 붙여주고 /를 나눠달라고 부탁한다.

 

그리고 big과 small로 category를 나눠주기로 한다.

 

var category = '[★##_list_rep_category_##★]'.split("/");
var big = category[0];
var small = category[1];

 

대략 저 위에 것을 뜻을 해석해 보자면

 

1. 'REVIEW/FOOD & DRINK'를 작대기(/)로 나눈 게 category야. /를 기준으로 나눈 데이터를 가지고 있지. (엣헴)

2. big은 category의 0번 그러니까 'REVIEW'이고

3. small은 category의 1번 그러니까 'FOOD & DRINK'야.

 

여기에서 기억해야 할 것은 내가 작대기(/)를 기준으로 해서 나눠달라고 했지만 /가 없을 수도 있다.

 

예시로 내 블로그를 예시로 들자면

 

REVIEW라는 큰 카테고리 아래에 FOOD & DRINK라는 작은 카테고리가 있는 경우가 있고,

INFORMATTION이라는 큰 카테고리만 덜렁 있는 경우가 있기 때문이다.

 

그러니 기억해두어야 할 것은 큰 카테고리만 존재하면 큰 카테고리만 보일 수 있도록 하고, 작은 카테고리가 존재하는 경우에는 큰 카테고리가 안 보이게 설정하는 것이 필요하다.

 

그런데 두 번째 카테고리가 있는지 없는지는 어떻게 찾아요?

……그러게요. 어떻게 찾죠? 눈물을 머금다가 찾았죠. if와 그리고 비어있는 값 null과 undefined를요. 존재값의 유무를 찾는다고 하는데 뭘 넣어야 할지 모르겠는데, 어떤 글에서 되도록이면 null을 넣어라 그래서 일단은 그냥 null을 넣어보도록 하겠습니다.

 

undefined든 null이든 일단 작동만 되면 되는 거 아니겠어요, 여러분?(그래선 안 됨.)

 

 

<!--여기까지는 내가 지정했다면-->
var category = '[★##_list_rep_category_##★]'.split("/");
var big = category[0];
var small = category[1];

<!--여기서부터는 조건값을 넣어보기-->
if(small == null)
{document.write(big)}

 

여기에서 =와 ==와 ===가 차이가 있다. 앙마코딩이었던가, 악마코딩이었던가 기억이 안 나는데, 기초라고 들었던 것에서 =값과 ==값과 ===값이 다르다고 본 거 같다. 아니면 정말 어디서 진짜 굴러가다 본 듯. 진짜 공부는 안 하면서 야매로 뭘 주워듣고 있기는 하다. ===는 number든 text든 그런 값까지 같아야 한다고 본 거 같기도 하다. (아닐 수도 있으니 이 단락은 그냥 아, 뭔가 차이가 있구나. 정도로만 받아들여주시라.)

 

참고로 위와 같이 넣으면 small 값은 전혀 보이지 않게 된다. if는 만약에 small 값이 없으면 big만 보이게 한다는 의미이기 때문. 그리고 if문은 else를 해서 끝내야 하는 것 같다. 그 외에 조건을 덧붙일 수도 있는 것 같다.

 

if(이 조건일 때,){
쏼라쏼라
}
else if(이런 조건일 때는) {
바다 위를 넘어가자
}
else{
이것도 저것도 아닐 땐 이거지
}

 

이런 느낌? (대략 느낌적인 느낌)

 

<!--여기까지는 내가 지정했다면-->
var category = '[★##_list_rep_category_##★]'.split("/");
var big = category[0];
var small = category[1];

<!--여기서부터는 조건값을 넣어보기-->
if(small == null)
{document.write(big)}
else{document.write(small)}

 

여기까지가 내가 설정한 끝!

 

이렇게만 적어서 아무 데나 넣으면 끝이냐고? 노노. 아니다.

내가 적은 이 수식은 반드시 [★##_list_rep_category_##★]의 자리에 넣어주어야 한다.

 

예시를 들자면

 

<!--before-->
<div class="list_category">[★##_list_rep_category_##★]</div>

<!--after-->
<div class="list_category">
<script>
var category = '[★##_list_rep_category_##★]'.split("/");
var big = category[0];
var small = category[1];
if(small == null)
{document.write(big)}
else{document.write(small)}
</script>
</div>

 

이런 식으로 갈음을 해주면 된다.

 

6. 결과물

 

small만 보이지롱

 

 

이걸 바랐다. 그런데 위에 보면 category도 또 /가 있지 않은가? 그래서 저것도 아래 리스트에 small만 보이는 것처럼 변경을 해줄 예정이다. 보통 목록 위에 있는 카테고리명이 보일 때는 [★##_list_conform_##★]일 가능성이 높다. 해당 내용을 검색해 주고 그 자리 대신에 변경하면 된다.

 

대신 var category = '[★##_list_rep_category_##★]'.split("/");에 밑줄 친 부분을 [★##_list_conform_##★]로 변경해 준 해당 스크립트를 [★##_list_conform_##★] 자리에 넣으면 된다.

 

 

7. 느낀 점

 

어디까지나 야매로 한 것이다. const로 지정하고 멋지게 script로 모든 걸 일괄되게 바꾸는 방법을 모른다. 할 줄도 모르고. 다만 저렇게 변경할 수 있다는 것을 알고 또 이렇게 보이길 원하시는 분이 계시다면 이런 식으로 변경이 가능하다는 거는 아시면 괜찮지 않을까 싶다.

 

만약에 const로 한다면 category를 감싸주고 있는 div든 span이든 class 이름에 따라 달라질 수 있겠지만, 위와 같은 방법은 치환자만 찾아서 치환자 대신 저 스크립트를 넣어주면 된다는 이점은 있는 것 같다. 어느 스킨이든 상관없이. (단, html이 지저분하게 보일 수 있다는 점은 무시할 수 없을 듯...)

1. 2023. 08. 08. 이런 식으로 표기되는 걸, August 8. 2023 이런 식으로 변경하는 스크립트였다. [본문으로]