북클럽 스킨 수정 - 현재 페이지의 카테고리 구별 표시

 

사이드에 있는 카테고리 목록

리스트 페이지나 글 상세 페이지내에서 현재 카테고리를 한눈에 구분할 수가 없어서 스크립트 작성

카테고리가 저렇게 적으면 큰 문제는 없지만 많아지면 찾는 것도 눈 아파서 만들었다

 

굳이 정성을 들여야 할 정도로 복잡한 게 아니라서 대충 짜서 코드는 오히려 더러운 느낌...좀 더 효율 좋은 코드도 있겠지

 

이하 코드 스킨 html 수정 페이지에서 head태그 내에 script태그 열어서 쑤셔 넣기

$(document).ready(function() {

  // 리스트 페이지 카테고리 명 
  const categoryPageTxt = document.querySelector(".post-header h1 span")?.textContent;
  // 글 상세 페이지 카테고리 명
  const categoryTxt = document.querySelector("span.category")?.textContent;
  
  //사이드 카테고리 리스트
  const categoryList = document.querySelectorAll('.category_list li > a');
  //사이드 하위 카테고리 리스트
  const subCategoryList = document.querySelectorAll('.sub_category_list li');
  
  const txt = categoryPageTxt ? categoryPageTxt.replace(/ /gi, "") : categoryTxt.replace(/ /gi, "")
  const len = txt.split("/").length
  const splitTxt = len > 1 ? txt.split("/")[1] : txt.split("/")[0]
  
  //카테고리 명을 split해서 length로 상위, 하위 카테고리 구별
  if (len > 1) {
    subCategoryList.forEach((li) => {
      if (li.textContent.replace(/ /gi, "") === splitTxt) {
        li.style.fontWeight = 'bold';
        li.style.color = "#e78111";
        li.classList.add("active");
      }
    });
  } else {
    categoryList.forEach((li) => {
      if (li.textContent.replace(/ /gi, "") === splitTxt) {
        li.style.fontWeight = 'bold';
        li.style.color = "#e78111";
        li.classList.add("active");
       }
    });
   }    
});

 

li 요소에 색도 바꿔주고 클래스까지 넣어 주고 있는데 처음에는 자스로 컬러만 바꿔줬었는데 됐다 안됐다 거리는 거 같아서 클래스를 추가하고 css도 조금 손봤다.

둘 중 무언가는 없어도 되겠지만 귀찮으니 둘 다 둬본다...

 

.sidebar .category ul li.active a {
	color: #e78111;
}

 

글자 색은 당근색 검색해서 나온 컬러를 썼다

뭔가 당근색이라고 하니까 귀여운듯?

 

 

성공!

 

스킨 마구 주무르는 재미가 있는 것 같다

이 정도면 아예 타 사이트 ui를 카피해서 만들 수도 있겠는데?

그쯤되면 스킨 제작인가...