구글 블로거 Magspot 테마 날짜 표기 수정

계속 고민하고 있었던 방법이 해결 되었다. 

구글 블로그는 날짜 표기가 미국 방식으로 오늘 글을 남기면 03. 28. 2024 혹은 Aug, 28, 2024 이런 방식으로 일반적인 yy/mm/dd 가 아니라 mm/dd/yy 로 표기가 되고 있는 게 너무 싫었다. 그래서 구글링과 chatCPT를 통해 이런 저런 방법을 다 써보다가 몇 가지 방법은 찾았는데 막상 도입해보니 제대로 적용이 되는 부분이 있고 그렇지 않은 부분이 있어 어떻게 하면 좋을까 고민하다가 아래와 같은 방법으로 수정하여 성공 하였다. 

역시 chatGPT 님은 전지전능 하시다. 🙂

우선 <time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time> 가 날짜를 표기하는 코드라는 걸 확인하였으니 바로 작업을 시작하였다.

<time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date.year/>/<b:eval expr ='data:post.date.month lt 10 ? "0" + data:post.date.month : data:post.date.month'/>/<b:eval expr='data:post.date.day lt 10 ? "0" + data:post.date.day : data:post.date.day'/></time>

테마 HTML 내에 있는 모든 <time class='published' expr:datetime='data:post.date.iso8601'><data:post.date/></time> 코드를 위 코드로 바꾸고 보니 내가 원했던 yy/mm/dd 로 표기가 되었다. 

하지만 역시나 가젯쪽이 말썽이었는데 날짜는 정상적으로 yy/mm/dd 형식으로 나오는데 2024 Aug, 28 이렇게 표기가 되고 있었다. 어디가 문제일까 찾아보던 중에 스크립트 중에 이런 코드를 발견 하였다.

function getPostDate(e,t,a,s,r,i){monthNames="undefined"!=typeof monthNames?monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],dateFormat="undefined"!=typeof dateFormat?dateFormat:"{y} {m}, {d}";var n=e[t].published.$t,o=n.substring(0,4),c=n.substring(5,7),l=n.substring(8,10),d=dateFormat.replace("{m}",monthNames[parseInt(c,10)-1]).replace("{d}",l).replace("{y}",o);return i=pbt.postAuthor&&""!=pbt.postDateLabel?'<span class="sp">'+pbt.postDateLabel+"</span>":"",r=[a=!0==pbt.postDate?'<span class="entry-time mi">'+i+'<time class="published" datetime="'+n+'">'+d+"</time>

아무리 봐도 수상한 알파벳들이 나열되어 있다. 처음에는 스크립트를 추가하여 저 알파벳들을 강제로 표기 방법을 바꾸는 방법을 선택했지만 제대로 적용이 되지 않아 아래와 하면 어떨까 싶어서 수정해보았는데 성공적으로 변경되었다.

function getPostDate(e,t,a,s,r,i){monthNames="undefined"!=typeof monthNames?monthNames:["01","02","03","04","05","06","07","08","09","10","11","12"],dateFormat="undefined"!=typeof dateFormat?dateFormat:"{y}/{m}/{d}"

그렇다. 그냥 알파벳을 무식하게 숫자로 바꿔버렸다. 하지만 결과는 성공적. 역시 이가 안되면 잇몸이라도 써봐야 하는 게 맞나 보다. 

내킨 김에 F-light 테마를 쓰면서 마음에 들었던 수정 날짜까지 넣어주었다. 코드는 구글링을 통해 수아뎁 블로그에서 얻었다.

<script type="text/javascript">
  function showDateModified() {
    let var1 = document.querySelectorAll('#Blog1 script[type="application/ld+json"]');
    let var2 = document.querySelectorAll('#Blog1 .byline.post-timestamp');
    if (var1.length > 0 && var1.length === var2.length) {
      let datePublished = '';
      let dateModified = '';
      for (let i = 0; i < var1.length; i++) {
        datePublished = JSON.parse(var1[i].innerText).datePublished.substring(0, 10);
        dateModified = JSON.parse(var1[i].innerText).dateModified.substring(0, 10);
        if (datePublished !== dateModified) {
          var2[i].insertAdjacentHTML('afterend', '<span class="byline post-timestamp date-modified">수정 ' + dateModified.replace(/(\d{4})-(\d{2})-(\d{2})/, '$1.$2.$3') + '</span>');
        }
      }
    }
  }
  showDateModified();
</script>

우선 이 코드를 적용시켜준 다음 포스팅 날짜 다음에 이 수정 날짜가 나오게 해야 하니 해당 위치를 찾아주었다. Magspot 테마의 해당 위치는  <b:if cond='data:view.isPost'> 이 부근이였다. 여기에서 포스팅 날짜 다음에 아래의 코드를 넣어 주었다.

<time class='modified' expr:datetime='data:post.lastUpdated.iso8601' expr:title='data:post.lastUpdated.iso8601'>
  수정일:
  <data:post.lastUpdated.year/>/
  <b:eval expr='data:post.lastUpdated.month lt 10 ? &quot;0&quot; + data:post.lastUpdated.month : data:post.lastUpdated.month'/>/
  <b:eval expr='data:post.lastUpdated.day lt 10 ? &quot;0&quot; + data:post.lastUpdated.day : data:post.lastUpdated.day'/>
</time>

그리고 나서 CSS 로 아이콘 넣어주고 끝. 이게 맞나 싶긴 하지만 그래도 일단은 잘 적용된 듯 싶다. 

당분간은 테마에 손 안대고 사용하면서 문제가 없나 확인해보는 시간을 가져야겠다.

앗! 글을 다 쓰고 확인하다보니 포스팅날과 수정날이 같아도 수정한 날짜가 표기되는 걸 확인하였다. 급한데로 스크립트를 아래와 같은 코드를 추가하여 같은 날짜면 수정된 날짜를 숨기게 처리하였다.

<script>
  // 수정된 날짜를 표시하는 함수
  function showModifiedDate() {
    // 포스팅 날짜와 수정된 날짜를 각각 가져옵니다.
    var publishedDate = document.querySelector('.published').textContent.trim();
    var modifiedDate = document.querySelector('.date-modified').textContent.trim();

    // 수정된 날짜가 포스팅 날짜와 같은지 확인합니다.
    if (publishedDate === modifiedDate) {
      // 수정된 날짜가 포스팅 날짜와 같으면 해당 요소를 숨깁니다.
      var modifiedDateElement = document.querySelector('.date-modified');
      if (modifiedDateElement) {
        modifiedDateElement.style.display = 'none';
      }
    }
  }

  // 페이지가 로드될 때 함수를 실행합니다.
  window.onload = function() {
    showModifiedDate();
  };
</script>

window.onload 를 사용하다 보니 완벽하게 사라지게 하지는 못했다. 더 좋은 코드가 있으면 다시 수정해야겠다. 🤔