[CSS/JS] 티스토리 블로그에 태그 필터링 및 수학식 기능 추가하기

 

개발 블로그를 하다 보니, 글이 쌓일 수록 카테고리만으로는 불편하다고 생각이 들었다.

따라서 특정 태그(사용 언어)로 묶어서 보는 기능을 만들어 보려 한다.

 

또한, 수학식 표기나 추가 기능등을 만들어 보도록 하겠다.

 

 

태그 필터링 기능

 

먼저 게시글에 [Java], [Python]처럼 분류 태그를 달고,

태그 클릭 시, 해당 글만 필터링해서 띄워주는 걸 목표로 하려고 한다.

 

먼저 대분류에 언어별/공부별로 스위칭 기능을 만들고

function switchTab(type) {
    document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
    document.getElementById('tab-' + type).classList.add('active');
    renderTags(type);
}

 

 

사용할 태그들과, 동적으로 태그들을 생성 시키는 메소드를 만들었다.

const tagGroups = {
    lang: ["CSS", "JS", "React", "Spring", "Python", "C#", "Swift", "AppleScript", "MySQL", "Linux", "OS", "etc"],
    study: ["정보처리기사", "SQLD", "리눅스마스터", "TOEIC", "JLPT"]
};

function renderTags(type) {
    const tagContainer = document.querySelector('.main-tags');
    if (!tagContainer) return;

    tagContainer.innerHTML = tagGroups[type].map(tag => 
        `<button class="tag-btn" onclick="filterByTag('${tag}')">${tag}</button>`
    ).join('');

    updateActiveTagStatus();
}

 

 

이제, 태그별로 해당하는 게시글만 검색되게 만들어 주어야 하는데

보통 티스토리에서는 /search/"검색어"로 게시글을 필터링 해 줄 수 있다.

 

따라서, 태그를 선택 했을 때,

일반 태그는 티스토리 내장 검색 기능인 /search/태그명 주소를 활용하고,

대괄호가 없는 글들을 모아보는 예외 케이스인 etc는 /category 주소에 파라미터를 붙여 분기 처리해주었다.

function filterByTag(keyword) {
    if (keyword === 'etc') {
        window.location.href = window.location.origin + "/category?t_filter=etc";
        return;
    }
    window.location.href = window.location.origin + "/search/" + encodeURIComponent(keyword) + "?t_filter=true";
}

 

 

이어서 페이지가 로드 되었을 때, t_filter 파라미터를 확인하고

글 목록을 실제로 솎아내주는 기능을 구현했다.

document.addEventListener('DOMContentLoaded', function() {
    ...
    if (filterType) {
        postItems.forEach(item => {
            const titleElement = item.querySelector('.title, .link_post, strong, h3');
            if (!titleElement) return;
            const title = titleElement.innerText.trim();
            
            if (isEtcMode) {
                if (/\[.*?\]/.test(title)) item.remove();
            } else {
                const safeKeyword = currentKeyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                const regex = new RegExp(`\\[[^\\]]*${safeKeyword}[^\\]]*\\]`, 'i');
                if (!regex.test(title)) item.remove();
            }
        });
        ...
    }
});

 

 

css 작업은 필터 영역과, 태그 영역을 구성하고

티스토리의 레이아웃 특성 때문에 UI가 밀리는걸 방지하기 위해, block으로 고정

.custom-filter-wrap {
    display: block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 20px 0 !important;
    z-index: 100;
    text-align: center;
}

.filter-tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important; 
    justify-content: center !important;
    width: 100% !important;
}

 

 

언어별, 공부별 카테고리 전환을 위한 디자인 부분도 구현

.tab-item {
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4; 
}

.tab-item.active {
    opacity: 1;
    color: #555 !important;
}

.tab-divider {
    font-weight: normal;
    color: #444;
    font-size: 0.8em;
    opacity: 0.5;
}

 

 

그 외에 버튼 디자인과 다크모드 대응 작업까지 완료하면 작업은 끝이다.

 

태그 위치는 인기 글 위에 배치 했고,

미리 만든 태그 리스트에 맞게 정렬되어 배치 됐다.

 

Spring 태그를 누르면, 해당 게시글들 필터링과,

타이틀에 대괄호 태그가 없을 때 나오는 게시글은 자동 필터링해서 안보이게 처리했다.

 

 

수학식 표기 기능

 

이제 간혹, 이론 설명에서 수학식이 필요할 때가 있는데

수학식을 그대로 표현하면 이런식으로 알아보기 힘들게 나온다.

 

따라서, MathJax라는 수학식 렌더링 코드를 이용할 것인데.

$사인으로 수식을 감싸면 수학 공식으로 변환

충돌시 서브규칙은 ((수식))으로 지정했다.

<script type="text/x-mathjax-config">
   MathJax.Hub.Config({ 
       tex2jax: {
           inlineMath: [['$','$'], ['\((','\))']]
       } 
   });  
</script>

 

 

이제 수학식 분석 및 가시화 연산을 직접 업로드 하기엔 무거우므로

CDN을 이용해서 처리 했다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>

 

 

이쁘게 수식으로 나오는 모습

 

 

미리보기 필터링 기능

 

추가로 기능을 만들면서 필요한 것이 생각났는데

게시글마다, 시리즈 링크를 상단에 다니까 미리보기가 링크로 다 가려지고 있었다.

따라서, 링크 부분을 제거 할 필터링을 만들어 보도록 하자.

 

대상 타겟팅을 하고, 정규표현식을 이용해 [태그]-시리즈명-회차번호 형태로 매칭

그리고 매칭된 텍스트를 정제하여 보이지 않게 처리를 했다.

document.addEventListener('DOMContentLoaded', function() {
    const postItems = document.querySelectorAll('.post-item, .article-list li, .list-row, .cover-thumbnail-2 li');
    
    postItems.forEach(item => {
        const excerptElement = item.querySelector('.excerpt');
        
        if (excerptElement) {
            let text = excerptElement.innerText;
            const pattern = /\[.*?\]\s*-\s*.*?\s*-\s*\d+/g;
            let cleanedText = text.replace(pattern, '').trim();
            
            if (cleanedText.length > 0) {
                excerptElement.innerText = cleanedText;
            }
        }
    });
});

 

 

이제 불필요한 링크도 안보이게 되었다.

 

이로써, 필요한 작업은 모두 끝났다.

당분간은 추가적인 기능은 필요 없어 보여서 이대로 오래 유지하지 않을까 싶다.

 

 

원본 게시글

https://blog.naver.com/101artspace/224338628914

[CSS/JS] 티스토리 블로그에 태그 필터링 및 수학식 기능 추가하기