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

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

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

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