티스토리 시간표시 반응형으로 변경 방법 소스

시간 반응형표시 방법

서근개발노트님의 정보를
바탕으로 초보자가 이해하기 쉽게
설명하도록 하겠습니다.

· Timeago 설명

일단 시간표시 반응형이란?
게시글 날짜가 2023.07.17. 이렇게
표시되는 것이 아니라 "오늘"이라고
표시되는 방식이라고 생각하시면 됩니다.
가장 많이 사용되고 있는 timeago입니다.

· 날짜 형식 변경 스크립트

아래 스크립트를 </body> 위에 복사 붙여 넣기 합니다.

<script>
/*==========티스토리 날짜 형식 변경==========*/
<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>
/*==========티스토리 날짜 형식 변경 끝==========*/
</script>

· 한글패치

위 스크립트를 잘 붙여 넣으셨다면
이젠 아래 스크립트를 바로 복사 붙여 넣기 하세요.

<!-----티스토리 날짜 형식 변경 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 끝----->

그리고 이젠 날짜를 변경할 수 있도록
HTML을 약간 수정해주시면 됩니다.

· 기존 스킨 코드 변경

수정 방법도 간단하게 설명하겠습니다.
예를 들어 아래 코드가 수정되기 전 코드

<div class="date">_cover_item_simple_date_</div>

아래처럼 수정해 주시면 됩니다.

<div class="date timeago">_cover_item_simple_date_</div>

만약 잘 안되시거나
오류가 있다거나 하시면 댓글 남겨주세요.
도움을 드릴 수 있도록 하겠습니다.