[티스토리] 인기글인지 확인하기

카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다.

응용하시면 본문에서도 활용 가능합니다.

<s_sidebar_element>
    <!-- 이 블로그 인기글 -->
    <div class="popularPost">
        <h3>이 블로그 인기글</h3>
        <ul>
            <s_rctps_popular_rep>
                <li>
                    <a href="[##_rctps_rep_link_##]" class="ImSoHot">[##_rctps_rep_title_##]</a>
                    <span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
                    <s_rctps_rep_thumbnail>
                        <img src="[##_rctps_rep_thumbnail_##]" />
                    </s_rctps_rep_thumbnail>
                    <a href="[##_rctps_rep_category_link_##]">[##_rctps_rep_category_##]</a>
                </li>
            </s_rctps_popular_rep>
        </ul>
    </div>
</s_sidebar_element>

제일 먼저 인기 글 목록이 필요합니다. 티스토리의 가이드를 참고해 작업해주세요.

제일 중요한 건 [##_rctps_rep_link_##]가 포함된 a 태그에 ImSoHot이란 class를 추가하셔야 합니다.

function checkHot() {
    const hotArray = [];
 
    document.querySelectorAll(".ImSoHot").forEach((a) => {
        hotArray.push(a.href);
    });
 
    document.querySelectorAll(".amIHot").forEach((a) => {
        const indexQ = a.href.lastIndexOf("?");
        hotArray.includes(indexQ === -1 ? a.href : a.href.substring(0, indexQ)) && a.classList.add("ImHot");
    });
}

위 스크립트를 추가하시고(당연히 함수를 호출하셔야 합니다.), 인기 글인지 확인하고 싶은 글 목록에 있는 a 태그에 amIHot이란 class를 추가하시면 끝입니다.

<s_index_article_rep>
    <div class="list_content">
        <s_article_rep_thumbnail>
            <img src="[##_article_rep_thumbnail_url_##]" />
        </s_article_rep_thumbnail>
 
        <a href="[##_article_rep_link_##]" class="link_post amIHot">
            <strong class="tit_post">[##_article_rep_title_##]</strong>
            <p class="txt_post">[##_article_rep_summary_##]</p>
        </a>
 
        <div class="detail_info">
            <a href="[##_article_rep_category_link_##]" class="link_cate"> [##_article_rep_category_##] </a>
            <span class="txt_bar"></span>
            [##_article_rep_date_##]
        </div>
    </div>
</s_index_article_rep>

이제 CSS를 적당히 꾸며주시면 끝납니다!

.ImHot::before {
    /* something */
}

자바스크립트에서 a.classList.add("ImHot") 대신 특정 요소를 추가하도록 하셔도 되고, CSS에서 위 예시처럼 ImHot에 가상 요소를 추가해 꾸미셔도 됩니다.