Bloggerのすべての記事に投稿日時と更新日時を表示する

作成:2018.03.25 03:00 更新:2021-02-10T13:53:17Z

Bloggerでブログを書いていて投稿日時と更新日時を表示したいですよね。

もちろん、Bloggerのデータタグには投稿の日時を表すタグがあります。ただ、日時を表すタグはいくつかあって、結局どれ使えばいいの？となってしまったので、記事にしました。

結論は、

投稿日時は「posts.timestampISO8601」から取得
更新日時は「posts.lastUpdateISO8601」から取得
ISO8601形式をJavaScriptで日時の文字列に変換する

です。

これが一番正確で、すべての記事に間違いなく表示できるからです。

posts.dateHeaderの先頭のみ表示される問題

「posts.dateHeader」はそのままブログに表示できる表示形式なのでよく使われますが、同じ日に複数記事を投稿した場合、先頭の記事のみに日付が入ります。先頭以外の記事には日付が入りません。

この事実はBloggerのデータタグのヘルプにも明記されているので、周知の事実です。これを回避するため、よく使われているのが、JavaScriptで先頭記事の日付を覚えて使いまわすというものです。

このブログでも、日付が出てない記事ありました。。そうこのブログでも「posts.dateHeader」を使って表示していましたが、JavaScriptでの対策はあまりしたくないなぁ、ということで放置していました。。

どうやって対策するの？

最初に書いた通り、

投稿日時は「posts.timestampISO8601」から取得
更新日時は「posts.lastUpdateISO8601」から取得
ISO8601形式をJavaScriptで日時の文字列に変換する
になります。

結局JavaScript使うんかい。。という感じですが、仕方ないですね。だって他に良い方法がないんだもん。

ソースコード

HTML

<i class="far fa-clock"></i> <time class="published-date" expr:datetime="data:post.timestampISO8601"><data:post.timestampISO8601/></time>
<i class="fas fa-sync-alt"></i> <time class="updated-date" expr:datetime="data:post.lastUpdatedISO8601"><data:post.lastUpdatedISO8601/></time>

JavaScript

var elems = document.querySelectorAll('time');
      Array.prototype.forEach.call(elems, function(elem, index) {
        var date = new Date(elem.innerHTML);
        var date_str = date.getFullYear() + '.' + (date.getMonth()+1) + '.' + date.getDate()
        elem.innerHTML = date_str;
      });