最終更新日を表示させるJavaScriptです。（以前に書いたこれとかこれの2022年版です。
やってみたこと
- 日付部分のHTMLはtime要素を使用
- datetime属性の値を日本標準時（JST）で追加
- 更新日と公開日が同じ場合は出力しない
更新日のデータは<data:post.lastUpdatedISO8601/>で取得できます。
しかし、<data:post.lastUpdatedISO8601/>で取得できるデータは協定世界時（UTC）のようです。
【みんなの知識 ちょっと便利帳】協定世界時（UTC）と日本標準時（JST）の比較対照と変換 - 協定世界時（UTC）・日本標準時（JST）対照表
このままだと実際の更新日とは異なる可能性があるので、日本標準時（JST）に変換してから表示をさせたいと思います。
勘違いがありました。new Date("<data:post.lastUpdatedISO8601/>");でもブラウザ（Chromeのconsole）上は日本標準時に変換されていました。
同じ結果が出力されました
const updated = new Date("<data:post.lastUpdatedISO8601/>");
Wed Jan 05 2022 20:00:24 GMT+0900 (日本標準時)
const updated = new Date(jstISO);
Wed Jan 05 2022 20:00:24 GMT+0900 (日本標準時)
したがってこのコードの主な機能はdatetime属性の値を日本標準時（JST）で追加することになります。
注：ウィジェットバージョン1用のコードです。
ウィジェットバージョンの確認方法は、[テーマ] > [カスタマイズ] > [HTMLの編集]の画面でhtmlタグのなかにb:defaultwidgetversion='2'とあったらバージョン2。
または、ブログ上で右クリック、「ページのソースを表示」などをクリック。Blog1でページ内検索すると確認できます。
バージョン1
<div class='widget Blog' data-version='1' id='Blog1'>
バージョン2
<div class='widget Blog' data-version='2' id='Blog1'>
未確認ですがウィジェットバージョン2では<data:post.lastUpdated/>(<data:post.lastUpdated.iso8601/>)で日本標準時（JST）が取得できるっぽいです。
最終更新日を表示
HTMLとJavaScriptです。
JavaScriptは2種類書いてみました。更新日と公開日を比べる部分が違います。以前のコードを踏襲したものと、getTimeを使って判定するものを書いてみました。
共通のHTML
<!-- 公開日を表示する場所 -->
<span class='published-date-info'>公開日<time expr:datetime='data:post.timestampISO8601'><data:post.date/></time></span>
<!-- 更新日を表示する場所 -->
<span class='updated-date-info' style='display:none;'>更新日<time id='for-display'/></span>
判定に以前のコードを踏襲したもの）
クリックすると開きます
<script>
/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/
const utc = new Date("<data:post.lastUpdatedISO8601/>");
// 協定世界時(UTC)に9時間加算して日本標準時(JST)に変換
const jst = new Date(utc.getTime() + 9 * 60 * 60 * 1000);
// ISO形式に変換
// ISO形式に変換のみ
// const jstISO = jst.toISOString();
// ISO形式に変換 + タイムゾーンを置き換え
// const jstISO = jst.toISOString().split('Z')[0] + '+09:00';
// ISO形式に変換 + タイムゾーンを置き換え ミリ秒なし
const jstISO = jst.toISOString().replace(".000Z", "+09:00");
/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/
// 更新日のデータ
const update = new Date(jstISO);
// 公開日のデータ
const published = new Date("<data:post.timestampISO8601/>");
// 公開日の桁処理(年月日) 更新日との比較に使う
const published_YEAR = published.getFullYear();
const published_MONTH = ("" + (published.getMonth() + 1)).slice(-2);
const published_DAY = ("" + published.getDate()).slice(-2);
// 更新日の桁処理(年月日) 公開日との比較に使う + 表示用
const update_YEAR = update.getFullYear();
const update_MONTH = ("" + (update.getMonth() + 1)).slice(-2);
const update_DAY = ("" + update.getDate()).slice(-2);
// 公開日と更新日が同じかどうか判定
//<![CDATA[
if (
published_YEAR == update_YEAR &&
published_MONTH == update_MONTH &&
published_DAY == update_DAY
) {
//]]>
// 公開日と更新日が同じときは出力しない
} else {
// 公開日と違うときは更新日を表示
// 更新日を表示させる場所を取得
const forDisplayDate = document.getElementById("for-display");
// datetime属性と値を付与
forDisplayDate.setAttribute("datetime", jstISO);
// 更新日を出力
forDisplayDate.textContent =
update_YEAR + "年" + update_MONTH + "月" + update_DAY + "日";
// 親要素の'display:none;'を'display:inline'に変更
forDisplayDate.parentElement.style.display = "inline";
}
</script>
判定にgetTimeを使ったもの
クリックすると開きます
/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/
const utc = new Date("<data:post.lastUpdatedISO8601/>");
// 協定世界時(UTC)に9時間加算して日本標準時(JST)に変換
const jst = new Date(utc.getTime() + 9 * 60 * 60 * 1000);
// ISO形式に変換
// ISO形式に変換のみ
// const jstISO = jst.toISOString();
// ISO形式に変換 + タイムゾーンを置き換え
// const jstISO = jst.toISOString().split('Z')[0] + '+09:00';
// ISO形式に変換 + タイムゾーンを置き換え ミリ秒なし
const jstISO = jst.toISOString().replace(".000Z", "+09:00");
/********** 協定世界時(UTC)を日本標準時(JST)に変換 **********/
// 更新日のデータ
const updated = new Date(jstISO);
// 公開日のデータ
const published = new Date("<data:post.timestampISO8601/>");
// 公開日より1日(24 * 60 * 60 * 1000 = 86400000ミリ秒)以上経過していたら更新日を出力
// >は 不等号大なり の実体参照 -XMLにおける文字参照と実体参照: https://www.javadrive.jp/xml/ini/index6.html
if (updated.getTime() >= published.getTime() + 24 * 60 * 60 * 1000) {
// 更新日を表示させる場所を取得
const forDisplayDate = document.getElementById("for-display");
// 更新日を出力
forDisplayDate.textContent =
updated.getFullYear() +
"年" +
("" + (updated.getMonth() + 1)).slice(-2) +
"月" +
("" + updated.getDate()).slice(-2) +
"日";
// datetime属性と値を付与
forDisplayDate.setAttribute("datetime", jstISO);
// 親要素の'display:none;'を'display:inline;'に変更
forDisplayDate.parentElement.style.display = "inline";
}
07月02日のように0の付いた日付がよければ
// 公開日の桁処理(年月日) 更新日との比較に使う
const published_YEAR = published.getFullYear();
const published_MONTH = ("0" + (published.getMonth() + 1)).slice(-2);
const published_DAY = ("0" + published.getDate()).slice(-2);
// 更新日の桁処理(年月日) 公開日との比較に使う + 表示用
const updated_YEAR = updated.getFullYear();
const updated_MONTH = ("0" + (updated.getMonth() + 1)).slice(-2);
const updated_DAY = ("0" + updated.getDate()).slice(-2);
// 更新日を出力
forDisplayDate.textContent =
updated.getFullYear() +
"年" +
("0" + (updated.getMonth() + 1)).slice(-2) +
"月" +
("0" + updated.getDate()).slice(-2) +
"日";
タイムゾーン、ミリ秒の要否はお好みで
// ISO形式に変換のみ
const jstISO = jst.toISOString();
// ISO形式に変換 + タイムゾーンを置き換え
const jstISO = jst.toISOString().split('Z')[0] + '+09:00';
// ISO形式に変換 + タイムゾーンを置き換え ミリ秒なし
const jstISO = jst.toISOString().replace(".000Z", "+09:00");
コメントなし: