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

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

<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 = [];
Array.from(document.querySelectorAll(".ImSoHot")).forEach(a => {
hotArray.push(a.href)
}),
Array.from(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에 가상 요소를 추가해 꾸미셔도 됩니다.

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  1. 요리조리 해보다 포기했네요 ^^;
    인기글 사이드바에 ImSoHot 넣고 인덱스에 amIHot 클래스 넣고 STYLE에 ImHot 클래스 수정해 주었는데...,
    저는 안되더라구요 ㅠㅠ
    안만해도 이해를 못하고 있는가봅니다.
    언젠가는 될 날이 오겠죠???

    1. 아마 html에서 인기 글을 잘못된 위치에 놓지 않으셨을까 싶네요.
      혹 함수를 호출하지 않은 건 아니시죠?

      콘솔창 열어보시면 에러 뜰 테니 확인해보시면서 진행하시면 될 것 같습니다.