반응형

티스토리에는 발행일을 표시하는 치환자가 있습니다. 하지만 최종 수정일은 치환자가 없지만 html 소스에는 보여집니다. 이것을 활용해 보겠습니다.

 

 

코드에서 추출

최종 수정일은 코드에서 확인할수 있는 곳이 2군데 있습니다. 

 

1. meta 태그의 article:modified_time

javascript 
<meta property="article:modified_time" content="2025-02-26T17:50:32+09:00">

content부분에 2025-02-26T17:50:32+09:00입니다.

2. <- BEGIN STRUCTURED_DATA -> ... <- END STRUCTURED_DATA - > 사이

javascript 
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
  {
    "@context":"http://schema.org",
    "@type":"BlogPosting",
    "mainEntityOfPage":
    {
      "@id":"https://keep4n.tistory.com/entry/%EB%B3%B4%EB%8D%94%EB%9E%9C%EB%93%9C-2%EC%97%90%EC%84%9C-ESC%ED%82%A4-%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0",
      "name":null
    },
    "url":"https://keep4n.tistory.com/entry/%EB%B3%B4%EB%8D%94%EB%9E%9C%EB%93%9C-2%EC%97%90%EC%84%9C-ESC%ED%82%A4-%EC%A0%81%EC%9A%A9%EB%90%98%EC%A7%80-%EC%95%8A%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0",
    "headline":"보더랜드 2에서 'ESC키' 적용되지 않는 문제 해결",
    "description":"보더랜드 3 하면서 간간히 예전게임을 해보고 싶어 보더랜드 2를 실행해 보았습니다. 하지만 간간히 Tab키가 너무 빨라 아이템이나 지도 같은 경우에는 Tab 눌러 하기보다는 I키 M키를 눌러서 하곤 했습니다. 하지만 막상 종료를 하려니 Esc키가 전혀 되질 않아 한참을 고민 중에 자동 세이브를 하곤 했는데... 이상했습니다. 너무 오랜만에 한 것이라 Esc 눌러서 종료가 아닌가 싶어서 이것저것 눌러보곤 했네요. 저같이 헤매는 사람들이나 먼 미래의 기억을 잃어버리고 또다시 헤매는 저를 위해 남겨 봅니다.windows의 설정에서 키보드 구형 형식으로 변경하기1. 설정에서 시간 및 언어 &gt; 입력으로 갑니다.&nbsp;&nbsp;2. 입력에서 언어 및 지역으로 갑니다.&nbsp;3. 언어 및 지역에서 한국어 &middot;&middot;&middot; 을 눌러 &middot;&middot;&middot;언어옵션..",
    "author":
    {
      "@type":"Person",
      "name":"AneOK4n",
      "logo":null
    },
    "image":
    {
      "@type":"ImageObject",
      "url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fua57V%2FbtsMqKiD8q7%2FAAAAAAAAAAAAAAAAAAAAAAfwZI864NWDd8BOtP490dsnxdmGOJCxQm1JReZh9rs2%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3Dv%252FW6pKv0CrwwtPQo2lpyGEKPGXk%253D",
      "width":"800px",
      "height":"800px"
    },
    "datePublished":"2025-02-21T01:42:27+09:00",
    "dateModified":"2025-02-26T17:50:32+09:00",
    "publisher":
    {
      "@type":"Organization",
      "name":"TISTORY",
      "logo":
      {
        "@type":"ImageObject",
        "url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png",
        "width":"800px",
        "height":"800px"
      }
    }
  }
</script>
<!-- END STRUCTURED_DATA -->

여기서 참고할 내용은,

  • "datePublished":"2025-02-21T01:42:27+09:00", 
  • "dateModified":"2025-02-26T17:50:32+09:00",

datePublished은 발행일시이고, dateModified은 수정일시입니다.

 

이렇게 2군데가 있습니다.

왜 발행일을 이야기하냐면 자바스크립트에 적용할 때 참조하려고 합니다. 밑에 코드 이야기 때 이야기하겠습니다.

코드적용

이제 아래 코드를 활용하여 페이지에서 적용하면 됩니다.

javascript 
document.addEventListener('DOMContentLoaded', function() {
    // meta 태그를 한 번만 조회하여 변수에 저장
    let metaTag = document.querySelector('meta[property="article:modified_time"]');
    let metaModifiedTime = metaTag ? metaTag.getAttribute('content') : null;
 
    // JSON-LD 스크립트를 조회하고 파싱합니다.
    let jsonLdScript = document.querySelector('script[type="application/ld+json"]');
    let jsonLdData = jsonLdScript ? JSON.parse(jsonLdScript.innerText) : null;
 
    let lastModifiedDate = null;
 
    // JSON-LD 데이터가 존재하고, datePublished와 dateModified가 모두 존재하며 같다면
    // 기사 게시일과 수정일이 동일하므로 업데이트된 날짜를 표시하지 않음.
    if (jsonLdData && jsonLdData.datePublished && jsonLdData.dateModified &&
        jsonLdData.datePublished === jsonLdData.dateModified) {
      lastModifiedDate = null;
    } else {
      // 위 조건에 해당하지 않으면, meta 태그의 수정 시간 또는 JSON-LD의 dateModified 값을 사용
      lastModifiedDate = metaModifiedTime || (jsonLdData ? jsonLdData.dateModified : null);
    }
 
    if (lastModifiedDate) {
      // 날짜 형식을 YYYY-MM-DD로 변환
      let formattedDate = new Date(lastModifiedDate).toISOString().split('T')[0];
 
      // 최종 수정 날짜를 표시할 요소를 찾고, HTML을 업데이트
      let lastModifiedElement = document.querySelector('.last-date');
      if (lastModifiedElement) {
          lastModifiedElement.innerHTML = '수정일: ' + formattedDate;
      }
    }
});
End of javascript code
  1. DOMContentLoaded 이벤트는 HTML 문서가 완전히 파싱 되고 모든 지연된 스크립트가 실행된 후 발생하게 하여 자칫 빨리 로드되어 에러가 날 수 있는 부분을 없앴습니다.
  2. querySelector 메서드를 사용하여 property 속성이 article:modified_time인 <meta> 태그를 선택하고, 해당 태그의 content 속성을 추출합니다.
  3. JSON-LD 데이터에서 datePublished와 dateModified가 모두 존재하고, 두 값이 동일하면 수정된 적이 없다고 판단하여 lastModifiedDate를 null로 설정합니다. 그렇지 않으면, meta 태그의 수정 시간이나 JSON-LD의 dateModified 값을 lastModifiedDate에 할당합니다.
  4. lastModifiedDate가 존재하면, 이를 YYYY-MM-DD 형식으로 변환하고, 클래스명이 last-date인 요소를 찾아 해당 요소의 HTML 내용을 수정하여 최종 수정일을 표시합니다.

이렇게 하면 최종 수정일을 skin.html에 표시할 수 있습니다.

반응형

관련된 다른 글

배움지식 category