This page looks best with JavaScript enabled
⚠️

この記事は1年以上前に書かれました。内容が古くなっている可能性がありますのでご注意ください。

【Hugo】古い記事に「1年以上前の記事です」の注意書きを表示する

 ·  ☕ 2 分で読めます
✏️

Qiita などで表示される注意書きをこのブログにも追加したので、その記録です。

image

Hugo側で日付の判定を行うとデプロイのときにしか走らないため、リアルタイムで注意書きの表示が更新されません。
そのため、しばらくサボっていると本当は1年以上前の記事なのに注意書きが表示されないということが起こる可能性があります。

なので、日付の判定はJSで行うことにしました。

前提

  • Hugo
  • Zzo

それ以外でもできるとは思いますが、パーシャルやJSのクラスなどはこれを前提としています。

実装

html

1
2
3
挿入したい位置に下記を追加する

{{ partial "body/caution" . }}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="single__caution">
  <span>⚠️</span>
  <p>この記事は1年以上前に書かれました。内容が古くなっている可能性がありますのでご注意ください。</p>
</div>

<script>
  const singleDate = Date.parse({{ .Date }});
  const oneYearAgo = new Date; // 一旦「今日」を取得する
  oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
  if (singleDate > oneYearAgo) {
    const caution = document.querySelector('.single__caution');
    caution.classList.replace("single__caution", "hide");
  }
</script>

{{ .Date }}が記事公開日です。
最終更新日は{{ .Lastmod }}で取得できるので、「最終更新日から1年以上経過しています」の場合はこちらを使います。

SCSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.single {
  &__caution {
    display: flex;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: bold;
    background-color: #f7dce5;
    padding: 12px;
  }
  &__caution span {
    color: #8f6672;
    margin-right: 4px;
  }
}
Share on

END
END
@aiandrox

目次