티스토리 hELLO 스킨 현재 카테고리만 펼치기

사이드바의 카테고리 목록 중, 현재 보고 있는 글이 속한 카테고리만 펼쳐지게 하고 싶었다.

1. HTML </body> 바로 윗부분에 아래의 스크립트 삽입

<script>
  	const cateLists = document.querySelectorAll(".sub_category_list");
    const currentPageCate = document.querySelector(".category-getter").textContent; 

    window.addEventListener('DOMContentLoaded', function() {
      function cateHandler(category) {
        const cateText = category.parentNode.childNodes[1].childNodes[0].textContent.trim();
        if(currentPageCate.includes(cateText)){
          category.parentNode.firstChild.click();
        }
      }
      cateLists.forEach(cateHandler);
    });
</script>

sub_category_list 클래스는 카테고리의 세부 목록에 해당하는 클래스다. 펼쳐야 하는 카테고리는 해당 세부 목록이 있는 카테고리기에 해당 클래스를 변수로 선언해준다.

2. category-getter라는 css클래스를 '카테고리명이 들어가는 페이지'에 해당하는 HTML 부분에 넣어준다.

1. 카테고리를 눌렀을 때 뜨는 '해당 카테고리의 글 목록' 페이지 : 상단의 카테고리 타이틀이 표시되는 부분
2. 글을 눌렀을 때 볼 수 있는, '해당 글'의 페이지 : 상단의 카테고리가 표시되는 부분

이렇게 두 군데에 넣어주면 된다. 각각 해당하는 HTML 부분은 아래와 같다.
치환자 특성 상 # #로 표시된 부분은 원래 ##이다. (띄어쓰기 없음)

1. [# #_list_conform_# #] 을 감싸고 있는 h1에 클래스를 추가해준다.
   • 해당 치환자의 의미 : 리스트의 카테고리 이름, 검색어, 태그명이 나오는 부분.
   • `ctrl+f` 로 검색했을 때 1건밖에 나오지 않을 것이다.
2. [# #_article_rep_category_# #] 을 감싸고 있는 a에 클래스를 추가해준다.
   • 해당 치환자의 의미 : 글 정보 중 카테고리 명이 나오는 부분.
   • `ctrl+f` 로 검색했을 때 3 건이 검색되는데, 맨 윗쪽에 있는 곳에만 추가해주면 된다.

<h1 class="font-bold mt-4 text-2xl lg:text-4xl category-getter">[# #_list_conform_# #]</h1>

<s_article_rep>
<s_permalink_article_rep>
  <div id="permalink">
    <header class="mt-20 mb-10 flex flex-col justify-end px-5 w-full lg:max-w-screen-lg lg:w-pem lg:px-0 lg:mx-auto">
      <div class="description text-h-800 dark:text-h-200 lg:mx-0">
      <s_article_rep_thumbnail>
      <div class="mb-6 header-thumbnail"><img class="header-thumbnail" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc19eoz%2FbtseDVx93kX%2Fdk0KwLZKvAJfU1vUSPCgD0%2Fimg.png" width="140" height="140"></div>
      </s_article_rep_thumbnail>
        <h1 class="font-extrabold mt-4 text-3xl lg:text-4xl">티스토리 hELLO 스킨 현재 카테고리만 펼치기</h1>
        <div class="flex gap-x-2 mt-2 text-sm flex-wrap text-h-500 dark:text-h-200 font-medium">
          <div class="mt-4 mr-2">
            <a class="text-sm category-getter header-des-cate" href="/category/Project%20Record/Customize%20Tistory">Project Record/Customize Tistory</a>

위와 같이 class 안에 `category-getter` 를 넣어준다.

 

치환자에 대해서는 아래 링크를 참조하면 된다.

치환자 구조 · GitBook

---

sub_category_list 클래스로 가져온 변수에 trim한 이유

이 때 a가 감싸고 있는 카테고리는 양쪽에 공백이 있다. 따라서 textContent로 가져온 텍스트에 trim을 적용해 공백을 제외해줘야 한다.

include로 문자열 비교

그리고 category-getter로 가져온 전체 카테고리명에, 사이드바의 카테고리명이 포함되는지 확인하는 include를 사용했다. category-getter가 적용되어있는 카테고리명은 상위카테고리/하위카테고리 이런 식으로 표시되기 때문에 무조건 더 많은 텍스트가 표시되게 된다.