최종 수정일 :
(1년 전)
위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다.
응용하시면 본문에서도 활용 가능합니다.
<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에 가상 요소를 추가해 꾸미셔도 됩니다.
