2018-06-30T14:08:08Z

Bloggerに更新日を表示する

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

更新日の表示

enter image description here
最終的には、上記の表示になりました。

更新日を表示する

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

以下が仕様です。

  • JavaScript無効の場合、更新日を非表示とする。
  • 更新している場合、日付が同じなら更新日を非表示とする。
  • 日付のみを表示する。時間は表示しない。

FontAwesome用のコードは、<head>内に追記する。(FontAwesomeを別に設定している場合は、不要です)

<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>

更新日のコードを追加する。追加場所は、<data:post.dateHeader/>がある辺りです。

  <span style='margin-right:1em;'><i aria-hidden='true' class='fa fa-pencil-square-o'/> 公開日 <data:post.dateHeader/></span>
  <span class='script-updateinfo' expr:name='data:post.id' style='display:none;'><i aria-hidden='true' class='fa fa-refresh'/> 更新日 </span>
  <script>
    (function() {
      let published = new Date("<data:post.timestampISO8601/>");
      let updated = new Date("<data:post.lastUpdatedISO8601/>");
      let element = document.querySelector('.script-updateinfo[name="<data:post.id/>"]');
      if (published.getFullYear() != updated.getFullYear()
       || published.getMonth() != updated.getMonth()
       || published.getDate() != updated.getDate()) {
        element.innerHTML += updated.getFullYear()+'/'+(updated.getMonth()+1)+'/'+updated.getDate();
        element.style.display = 'inline';
      }
    })();
  </script>

参考

 コメントを書く