티스토리 hELLO 스킨 날짜 형식 바꾸기 / for of

<time class="header-des">[# #_article_rep_simple_date_# #]</time>

위가 글 본문 날짜의 원본이고 아래가 변경본이다.

## 부분이 띄어쓰기 처리된 것은 저렇게 하지않으면 포스팅 내에도 치환자가 반영이 되기 때문이다.

<time class="header-des">
    <script>
        const month = '[# #_article_rep_date_month_# #]' - 1;
        const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug", "Sep","Oct","Nov","Dec"];
        document.write(m[month]);
    </script>, [# #_article_rep_date_year_# #]
</time>

원본 month를 가져와서 -1을 해주면 자바스크립트는 자동으로 숫자로 변환해준다.

-1을 하는 이유는 인덱스는 0부터 시작하기 때문이다.

 

목록에 뜨는 날짜 형식도 비슷한 방법으로 변경해준다.

<time class="text-h-400 text-xs block">[# #_list_rep_regdate_# #]</time>

위가 원본이고 아래가 변경본이다.

글 본문에 들어가 있는 month는 하나라서 스크립트를 내부에 삽입하는 것으로 변경이 가능했지만, 리스트는 여러 글을 다루기에 다른 방법을 써야 한다.

우선 스타일을 변경하고자 하는 month를 span으로 감싸준다.

<time class="text-h-400 text-xs block list-date">
	<span>[# #_list_rep_date_month_# #]</span>, [# #_list_rep_date_year_# #]
</time>

그리고 body 하단에 아래의 script를 넣어준다.

기본적인 틀은 글 본문에 적용했던 스크립트와 같으나, 항목이 여러개라서 for of를 써주었다. 이렇게 하면 전체 month를 한번씩 순회하며 형식 변경 스크립트를 적용해주게 된다.

<script>
// 리스트 날짜 변경
  const months = document.querySelectorAll(".post .list-date");

  for (const month of months) {
    const monthNomber = month.firstElementChild.textContent - 1;
    const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug", "Sep","Oct","Nov","Dec"];
    month.firstElementChild.textContent = m[monthNomber];
  }
</script>