Bloggerに更新日を表示する

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

更新日の表示

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

更新日を表示する

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

以下が仕様です。

  • JavaScript無効の場合、更新日を非表示とする
  • 更新していても、日付が同じなら更新日を非表示とする
  • 日付のみを表示する。時間は表示しない
  • FontAwesome部分は、削除されています

<span class='published-info'>投稿日&amp;nbsp;<data:post.date/></span>
<span class='updated-info' style='display:none;'>&amp;nbsp;&amp;nbsp;更新日&amp;nbsp;<span class='date' expr:data-publishd='data:post.timestampISO8601' expr:data-updated='data:post.lastUpdatedISO8601'/></span>

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

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

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

補足

投稿とページ

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

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

新テーマと旧テーマ

新テーマ(Contempo、Soho、Emporio、Notable)であれば、下記のテンプレートタグを使用することでJavaScript不要で実現できます。

<data:post.lastUpdated/>
<data:post.lastUpdated.year/>
<data:post.lastUpdated.month/>
<data:post.lastUpdated.day/>

参考

コメントを書く