[티스토리] hELLO 스킨 커스텀 - 글 상단바에 카테고리 나타내기

마음에 쏙 드는 스킨을 적용해도, 완벽하게 원하는 대로 사용하려면 커스텀이 필수인 것 같다.

hELLO 스킨을 적용하고 난 후 상당히 만족하며 사용하고 있고, 사소한 부분들은(특히 디자인) 내가 원하는 대로 커스텀해서 사용하는 중이다.

카테고리 디자인부터 글 헤더(제목영역), 태그 위치 등등 커스텀한 대부분은 현재 내가 사용하는 옵시디언 테마를 참고했다. 물론 옵시디언 테마도 열심히 커스텀 해서 사용하는 것이지만...

기존 hELLO 테마의 글 페이지 상단에는 

이렇게 프로그레스바와 함께 글의 제목만 표시된다.

그리고 내가 원했던 것은

이러한 형태로 카테고리까지 함께 표시되고, 이를 클릭하면 해당 카테고리 글 모아보기로 이동하는 것!

사이드바에 현재 보고있는 글의 카테고리만 펼치게 하는 코드에서 영감을 받았다

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

html에 카테고리를 가져오는 부분에 클래스를 지정해 요소를 가져오는 방식인데,

적용한 김에 이 클래스와 코드를 조금 수정해 만들었다.

1. 카테고리를 얻어올 클래스 추가

다른 점은 카테고리 리스트가 전부 필요하지 않고, 해당 글의 카테고리명(링크)만 필요하기 때문에

[ ##_article_rep_category_## ]를 감싸고 있는 <a>태그에만 전부 content-category-getter 클래스를 새로 추가

3개 정도 나온다.

2. HTML에 script 추가

</body> 태그 바로 위에 아래 스크립트 추가

<script>
    window.addEventListener('load', function () {
        const currentCate = document.querySelector(".content-category-getter").textContent;
        const categoryLink = document.querySelector(".content-category-getter").getAttribute('href')
        const divElement = document.querySelector('.now-page-article-category');
        const currentCateText = currentCate.replace(/[\uD800-\uDFFF]./g, '').replace(/\/+/g, ' / ')
        if (divElement) {
            divElement.innerHTML = '<a href = "' + categoryLink + '">' + currentCateText + '&nbsp/&nbsp;</a>';
        }
    });
 </script>

now-page-article-category는 상단바에 카테고리명을 추가할 부분,

.replace(/[\uD800-\uDFFF]./g, '').replace(/\/+/g, ' / ') 부분은 카테고리명을 붙이기 좋게 수정해주는 부분인데,

내 블로그에 카테고리를 나타내주는 부분에 유니코드 이모지를 넣어주었기 때문에 해당 이모지를 제거해줬다. 또한 하위 카테고리를 나타내는 '/' 부분 앞뒤로 공백을 넣어 가독성을 높였다. 그리고 카테고리명 마지막에도 ' /' 추가

3. 상단바에 자리 만들어주기

그 다음엔 얘가 들어갈 자리를 만들어 줘야 한다.

html을 확인하면 </aside> 태그 바로 아래에 글 상단바 영역이 위치한 것을 알 수 있다.

[ ##_page_title_## ] 이 들어간 부분이 글 제목을 나타내는 부분이므로,

바로 위에 카테고리가 들어갈 <div>를 추가하고 now-page-article-category 클래스 추가

그리고 이 두 <div> 를 또 <div>로 묶어 flex 속성을 줬다.

css는 따로 편집하지 않고 스킨에 css가 적용되어있는 클래스 이용

결과!

카테고리 이름도 잘 나오고, 이동하는 링크도 잘 작동한당!