Mezzanine の デフォルトテンプレートの日付表示は、Django の timesince を使った 3 週間<wbr>, 5 日<wbr> 前 というフォーマットの日付表示になります。
この表示がわかりやすいかというと個人的にはわかりずらかったので、日付表示を変更してみました。

変更時に実施したことを記載します。

変更前、変更後の Template 上の 日付表記について

変更前の日付表記、変更後の日付表記について記載します。

変更前

mezzanine/blog_post_list.html at master · stephenmcd/mezzanine

blog_post_list.html の以下記述が、公開日付の記載箇所になります。 

{% blocktrans with sometime=blog_post.publish_date|timesince %}{{ sometime }} ago{% endblocktrans %}
この記述で日付表記が、3 週間<wbr>, 5 日<wbr> 前 となります。

変更後の日付表記

2017-09-16 (3 週間<wbr>, 5 日<wbr> 前) という記述にしたいです。

調べたこと

実装にあたって、調べたことを記載します。

Django Template 上で、日付の形式を指定する方法

以下、Stack Overflow の文書が参考になりました。
* How to format dateTime in django template? - Stack Overflow

Django の 設定 ドキュメントにも日付が記載があります。
* 設定 | Django documentation | Django

Template 上では以下記述で、ISO 形式の日付が、取得可能で、 

{{ value|date:"c"}}

以下記述で、Y-m-d 形式での日付が取得できそうです。 

{{ value|date:'Y-m-d' }}

他の考慮する要素 time タグを使う

SEO対策に役立つかもしれない、普段あまり注目されていないタグたちまとめ(HTML 5.1版) - Qiita の time タグを使います。

Template の記述を変更する

変更後の Template タグの内容と、後日追加した更新日について記載します。

投稿日の日付形式の変更

以下記述に変更しました。 

<time datetime="{{ blog_post.publish_date|date:"c"}}">{{ blog_post.publish_date|date:'Y-m-d' }}</time> ({% blocktrans with sometime=blog_post.publish_date|timesince %}{{ sometime }} ago{% endblocktrans %})

参考記事には、itemprop="datePublished" の記載がありますが、構造化マークアップを JSON-LD で記述しているので、対象の記述は削除しました。

更新日の追加

過去記事の訂正や追記があり、更新することがありますが、Google 検索の結果一覧を見る限り、記事の更新日が更新日付として表示されていませんでした。
そもそも更新日は表示していなかったため、クローラが拾ってくれるわけはなさそうで、更新日も表示するようにしました。
このため最終的に以下のような記載になりました。 

<span class="divider">/</span>
<span>投稿日:<time datetime="{{ blog_post.publish_date|date:"c"}}">{{ blog_post.publish_date|date:'Y-m-d' }}</time> (
    {% blocktrans with sometime=blog_post.publish_date|timesince %}
        {{ sometime }} ago{% endblocktrans %})</span>
<span class="divider">/</span>
<span>更新日:<time datetime="{{ blog_post.updated|date:"c"}}">{{ blog_post.updated|date:'Y-m-d' }}</time> (
    {% blocktrans with sometime=blog_post.updated|timesince %}
        {{ sometime }} ago{% endblocktrans %})</span>
<span class="divider">/</span>

以上です。

コメント

カテゴリー

最近の投稿