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

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

<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(0indexQ)
        ) && 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에 가상 요소를 추가해 꾸미셔도 됩니다.

profile

이메일은 공개되지 않습니다.

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.
    loading