Hugo で作ったブログの古い記事にメッセージを表示する
2019-07-07技術ブログでよく見る「この記事は公開されてから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;
}
以上です。
comments powered by Disqus