Tistory 태그 글

Lovely Pink 스킨 2.1.0 업데이트

스킨 소개 먼저, 글꼴을 인피니티산스와 가나초코로 변경했습니다. 기본적으로 인피니티산스를 사용하고, 제목에 가나초코를 사용합니다. 또한, 썸네일이 조금 덜 각지게 표시되게 업데이트했고, 슬라이더의 디자인을 조금 다듬었습니다. 드로어를 여는 버튼에 커서를 올리면 화살표로 변하는 애니메이션을 추가하고, 카테고리 상단에 구분 선을 추가했습니다. 하위 카테고리 목록에도 배경을 추가해 구분이 뚜렷하여지게 했습니다. 댓글 / 방명록을 입력하는 부분의 여백을 통일감 있게 수정했습니다.

티스토리에서 Lazy Load 사용하기

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 완벽하게 작동하기 위해선 서버사이드에서 이미지의 경로를 삽입하지 않거나, loading="lazy"란 옵션을 줘야 하기 때문에, 티스토리에선 완벽하게 작동하기 힘듭니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될

[티스토리] 태그로 글 가져오기

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. 1. Array를 반환하는 버전 async function getPostsByTag({ tag, selector, title, date, desc, thumbnail }) {     const tagArray = await Promise.all(         tag.map((tagString) =>             getPosts({    

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

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <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>