(티스토리) 날짜를 현재 중심적 시간표시 하는 방법 (며칠 전, 몇 개월전..)

오늘은 댓글에서 요청해주셨던 포스팅 또는 댓글 등의 날짜를 현재 중심적인 시간으로 동적 표시하는 방법에 대해 알아볼까 합니다. 이 스크립트를 사용하게 되면, 하루 전, 며칠 전, 몇 개월 전, 약 몇 년 전처럼 나타낼 수 있습니다.

 

날짜를 현재 중심적 시간 표시하는 방법

제 블로그에 적용되어있는 스크립트는 크게 두 가지입니다. 하나는 nubiz 님께서 만드신 스크립트와 또 하나는 timeago 플러그인입니다.

 

둘 다 각자의 장점이 있는 거 같아서 저는 둘 다 사용하고 있습니다. 

nubiz 스크립트

nubiz님께서 작성하신 스크립트는 아래 블로그에서 그대로 적용하면 되는데, 왜인지 모르게 옛날에 작성하신 스크립트인지 본문의 게시글에서는 적상적으로 표시가 되지 않는 오류가 있었습니다.

 

또, 1년이 넘어가면 1년 전 이 아닌 전체 날짜를 yyyy/dd/mm으로 표시해주기 때문에 스크립트의 수정이 불가피했습니다.

 

아참! nubiz님께서 스크립트 안 날짜 계산 오타가 나셔서 그 부분도 수정했습니다.

---

이 스크립트를 사용하게 되면,

 

4분 이내는 방금 전, 1시간 이내는 N분 전, 24시간 이내는 N시간 전, 7일 이내는 N일 전, 60일 이내는 N주 전, 12개월 이내는 N개월 전, 추가로 12개월 이후는 N 년 전으로 되도록 스크립트를 수정했습니다.

 

티스토리에 스크립트를 적용하는 방법에 대해 기초지식이 없으시다면 아래 포스팅을 읽고 진행해주세요.

(티스토리) 스킨 편집 기초 상식

 

아래 스크립트는 </body> 제일 위쪽에 추가해줬습니다.

<script>
/*==========티스토리 날짜 형식 변경==========*/
function modDate(a){$("."+a+" a").addClass("abuseReport");$(".abuseReport").each(function(b,c){$(c).parent().parent().append(c)});$("."+a).each(function(){if(!$(this).is(".modDate")){var l,f,n,i,g,h,e,c,d,k,j,b,m;l=$(this).text().trim();e=new Date();c=new Date();switch(l.length){case 4:b=l;e.setFullYear(b);break;case 5:if(l.match(":")){g=l.substring(0,2);h=l.substring(3,5);e.setHours(g,h)}else{if(l.match(".")){n=l.substring(0,2);i=l.substring(3,5);e.setMonth(n-1,i)}}break;case 8:g=l.substring(0,2);h=l.substring(3,5);e.setHours(g,h);break;case 10:f=l.substring(0,4);n=l.substring(5,7);i=l.substring(8,10);e.setFullYear(f,n-1,i);break;case 16:f=l.substring(0,4);n=l.substring(5,7);i=l.substring(8,10);g=l.substring(11,13);h=l.substring(14,16);e.setFullYear(f,n-1,i);e.setHours(g,h);break;default:m=true;break}if(!m){if(g){j=e.getFullYear()+"년 "+(e.getMonth()+1)+"월 "+e.getDate()+"일 "+e.getHours()+"시 "+e.getMinutes()+"분"}else{if(n){j=e.getFullYear()+"년 "+(e.getMonth()+1)+"월 "+e.getDate()+"일"}else{j=e.getFullYear()+"년"}}d=e.getTime();k=c.getTime();b=k-d;$(this).attr("title",j);b=b/1000;if(g){if(b<240){$(this).text("방금")}else{if(b<3600){b=Math.round(b/60);$(this).text(b+"분 전")}else{if(b<86400){b=Math.round(b/3600);$(this).text(b+"시간 전")}}}}else{if(b<86400){b=j;$(this).text("오늘")}}if(b>=86400){b=b-c.getHours()*60*60;b=Math.ceil(b/86400);if(b<7){$(this).text(b+"일 전")}else{if(b<60){b=Math.round(b/7);$(this).text(b+"주 전")}else{if(b<365){b=Math.round(b/30.5);$(this).text(b+"개월 전")}else{if(b>365){b=Math.round(b/365);$(this).text(b+"년 전")}}}}}$(this).addClass("modDate")}}})};modDate("date");
/*==========티스토리 날짜 형식 변경 끝==========*/
</script>

스크립트가 정상적으로 입력되었다면, 티스토리 블로그에서 날짜가 현재 중심적인 날짜로 변경되었음을 확인할 수 있습니다.

Timeago 플러그인

두 번째는 Timago 플러그인입니다. 위에 nubiz님이 만드신 스크립트를 사용하면 본문 포스팅에서는 적용이 안됐다고 했었죠? 이 부분을 해결하기 위해(스크립트를 수정할 엄두가 안 나서..) Timeago 플러그인을 사용할 수 있습니다.

 

혹은, nubiz님의 스크립트를 사용하지 않고 Timeago 플러그인만 사용해도 무방합니다.

스크립트 추가

우선 /body 바로 위에 아래 스크립트를 추가합니다.

<!-----티스토리 날짜 형식 변경 Timeago----->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
    <!--한글패치-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.ko.min.js"></script>

<script>
$(document).ready(function(){
  $('time.timeago').timeago();
});
</script>

<!-----티스토리 날짜 형식 변경 Timeago 끝----->

현재 최신버전 ver 1.6.7

HTML 날짜 클래스 수정

위 스크립트를 보시면 time이라는 태그를 사용했고, 클래스명은 timeago로 설정했죠? 어려우시다면 바로 적용해볼게요.

 

우선 찾아야 할 태그가 있는데, 보통은 class="date"를 검색하시면 아래처럼 검색 결과가 나옵니다.

div 태그나 span 태그로 감싸져 있을 텐데, 이것을 time 태그로 변경해주고, timeago 클래스를 추가해준 뒤, dateTime을 넣어주기만 하면 됩니다.

 

복잡하지 않으니 천천히 따라와 주세요.

<time class="date timeago" datetime=""></time>

수정한 건 <div> ➜ <time>  /  timeago 추가  /  datetime="[치환자]"  /  </div> ➜ </time>  입니다.

 

이해가 되셨으리라 생각됩니다..! 치환자는 글마다 위치마다 다르기 때문에 datetime="" 안에 정확한 치환 자명을 넣으셔야 됩니다.

 

이제 확인해볼게요.

훨씬 깔끔하죠? :)

 

추가로 Timeago Github에도 자세하게 사용하는 방법에 대해 나와있으니 참고해주세요

Timeago Github

제가 아까 둘만의 장점이 있다고 했었는데, Timeago로 전부 수정하기에는 너무 귀찮아서 nubiz님의 스크립트로 우선 추가하고, 정상적으로 작동하지 않은 부분은 Timeago플러그인으로 수정해주시면 될 거 같습니다.

---

오늘은 이렇게 포스팅 또는 댓글 등의 날짜를 현재 중심적인 시간으로 동적 표시하는 방법에 대해 알아보았습니다.

 

혹시 하시다가 막히시면 댓글 남겨주세요.

 

읽어주셔서 감사합니다 🤟

 

 

티스토리 시간을 예쁘게 표시하기. 현재중심적 시간표시

jquery-timeago - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers