2019-03-19T16:23:38Z

Bloggerに更新日を表示する

Bloggerで更新日表示したかったけどテーマの標準で表示しなかったので修正した話です。

更新日の表示

更新日
最終的には、上記の表示になりました。(画像作成時からある程度変化しています)

更新日を表示する

<data:post.lastUpdatedISO8601/>タグを使用して、更新日を表示する。ただし、更新日フォーマットがISO8601のため、JavaScriptを使用してフォーマットを変更する。

以下が仕様です。

  • JavaScript無効の場合、更新日を非表示とする
  • 更新していても、日付が同じなら更新日を非表示とする
  • 日付のみを表示する。時間は表示しない
  • FontAwesome部分は、削除されています
<span style='display:none;'>
<span class='published' itemprop='datePublished'><data:post.timestampISO8601/></span>
<span class='updated' itemprop='dateModified'><data:post.lastUpdatedISO8601/></span>
</span>
<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
&amp;nbsp;&amp;nbsp;
<span class='updated-info' style='display:none;'>更新日&amp;nbsp;</span>

※HTML部分。追加場所は、<b:includable id='post' var='post'>の直後辺りです

<script>
(function() {
  // 更新日を表示する
  let articles = document.querySelectorAll('article');
  for (let i=0; i<articles.length; i++) {
    let tp = new Date(articles[i].querySelector('.published').innerText);
    let tu = new Date(articles[i].querySelector('.updated').innerText);
    if (Math.floor(tp.getTime()/86400000) != Math.floor(tu.getTime()/86400000)) {
      let u = articles[i].querySelector('.updated-info');
      if (u) {
        u.innerHTML += tu.getFullYear()+'/'+('0'+(tu.getMonth()+1)).slice(-2)+'/'+('0'+tu.getDate()).slice(-2);
        u.style.display = 'inline';
      }
    }
  }
})();
</script>

※SCRIPT部分。追加場所は、</body>の直前辺りです

補足

Bloggerには、投稿とページがあります。投稿とページで投稿日と更新日の仕様が異なるため、記載します。

種別 投稿日 更新日
投稿 投稿した日 最終更新日
ページ 最終更新日(エディタ) 最終更新日(API)

参考

 コメントを書く