先日の「Shopifyで曜日を日本語で出力する方法」を更にカスタマイズして、ブログの投稿日をニュースサイトっぽく「○時間前に更新」と表示させてみる。
ほとんど需要のないムダ知識かと思いますが、ブログ投稿や商品登録などを頻繁に行う方には使えるテクニックかもしれません。
まずは前回のおさらいで、ブログの投稿日を曜日付きで出力させるコードです。
{%- assign weekday = article.published_at | date: '%a' -%}
{%- capture set_weekday -%}
{%- if weekday == 'Sun' -%}
{{- '日曜日' -}}
{%- elsif weekday == 'Mon' -%}
{{- '月曜日' -}}
{%- elsif weekday == 'Tue' -%}
{{- '火曜日' -}}
{%- elsif weekday == 'Wed' -%}
{{- '水曜日' -}}
{%- elsif weekday == 'Thu' -%}
{{- '木曜日' -}}
{%- elsif weekday == 'Fri' -%}
{{- '金曜日' -}}
{%- elsif weekday == 'Sat' -%}
{{- '土曜日' -}}
{%- endif -%}
{%- endcapture -%}
続いて新たに追加するコード。
{%- assign published_at = article.published_at | date: '%s' -%}
{%- assign elapsed_date = 'now' | date: '%s' | minus: published_at | divided_by: 86400 -%}
{%- assign elapsed_time = 'now' | date: '%s' | minus: published_at | divided_by: 3600 -%}
{%- capture elapsed -%}
{%- if elapsed_time < 1 -%}
{{- '1時間以内に更新' -}}
{%- elsif elapsed_time < 24 -%}
{{- elapsed_time | append: '時間前に更新' -}}
{%- elsif elapsed_date < 3 -%}
{{- elapsed_date | append: '日前に更新' -}}
{%- else -%}
{{- article.published_at | time_tag: format: 'date' | append: set_weekday -}}
{%- endif -%}
{%- endcapture -%}
上から順に説明しますと、1行目で投稿日をUNIX時間に変換、2行目で投稿日から現在までの日数、3行目は投稿日から現在までの時間を算出しています。
そして残りの4〜15行目で分岐条件をつけ、以下のコードで出力されるように設定しております。
{{ elapsed }}
1時間以内に更新された記事は「1時間以内に更新」。
24時間以内に更新された記事は「○時間前に更新」。
3日以内に更新された記事は「○日前に更新」。
それ以外は「○年○月○日○曜日」と出力されます。