Qiita などで表示される注意書きをこのブログにも追加したので、その記録です。
Hugo側で日付の判定を行うとデプロイのときにしか走らないため、リアルタイムで注意書きの表示が更新されません。
そのため、しばらくサボっていると本当は1年以上前の記事なのに注意書きが表示されないということが起こる可能性があります。
なので、日付の判定はJSで行うことにしました。
前提
それ以外でもできるとは思いますが、パーシャルやJSのクラスなどはこれを前提としています。
実装
html
1
2
3
|
挿入したい位置に下記を追加する
{{ partial "body/caution" . }}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<div class="single__caution">
<span>⚠️</span>
<p></p>
</div>
<script>
const agoYear = (singleDate) => {
let year = 0;
for(let i = 0; i < 10; ++i) {
const iYearAgo = new Date; // 一旦「今日」を取得する
iYearAgo.setFullYear(iYearAgo.getFullYear() - i); // i年前
if (iYearAgo > singleDate) {
year = i;
} else {
break;
}
}
return year;
}
const replaceCautionText = (targetYear) => {
const singleDate = Date.parse({{ .Date }});
const singleDateAgo = agoYear(singleDate);
const caution = document.querySelector('.single__caution');
if (singleDateAgo >= targetYear) {
const p = caution.lastElementChild;
p.innerHTML = `この記事は${singleDateAgo}年以上前に書かれました。内容が古くなっている可能性がありますのでご注意ください。`;
} else {
caution.classList.replace("single__caution", "hide");
}
}
replaceCautionText(1) // 1年前
</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;
}
}
|
