技術ブログでよく見る「この記事は公開されてから1年以上経過しています」というメッセージを、 Hugo で作ったブログの記事にも表示するようにしてみました。

やること

下記の JavaScript を head 内に記述します。

function showInfoNotifiesOldPost() {
  const nowDate = new Date();
  const oldTs = 60 * 60 * 24 * 365 * 1000; // 1 year (millisecond)
  const nowTs = nowDate.getTime();
  const postDateElem = document.querySelector('p.post-date > time.dt-published');
  if (postDateElem !== null) {
    try {
      const postDateStr = postDateElem.getAttribute('datetime');
      const postDate = new Date(postDateStr);
      const postTs = postDate.getTime();
      if (nowTs - postTs > oldTs) {
        const entrySectionElem = document.querySelector('section.content.e-content');
        if (entrySectionElem !== null) {
          const infoElem = '<div id="old-entry-notifier">この記事は公開されてから 1 年以上経過しています。情報が古い可能性がありますので、ご注意ください。</div>';
          entrySectionElem.insertAdjacentHTML('afterbegin', infoElem);
        }
      }
    } catch {
      console.warn('failed to get post date.');
    }
  }
}

window.onload = () => {
  showInfoNotifiesOldPost();
};

スタイルを調整します。

#old-entry-notifier {
    background-color: #ffcc80;
    border: 2px solid #ff6d00;
    font-weight: 900;
    margin: 15px 0;
    padding: 15px;
}
old entry message

以上です。


以上、よっしー (michimani) でした。

Share to ...

0

Follow on Feedly


comments powered by Disqus