[Hugo] 公開した記事数によって表示する画像を切替えてみた



Nプログラマです。

Hugoでサイドバーに表示されているアイコンなどの画像を、公開した記事数によって切り替えてみました。
JavaScriptではなく、Hugoのテンプレートでの対応になります。

当サイトのサイドバーでは、公開した記事数に応じた記念メダルを表示しています。
最近までは手動で更新していましたが、これを記事数を見て自動的に画像を切り替えるようにしました。

記念メダルについて

クロネさんという方が公開している記念メダルを利用させて頂いています。
クロネのブログ講座「100記事講座」に記念メダルが登場!

画像切替のルール

100記事まで10記事単位で画像を切り替える、というルールになります。

例外として、0記事目は空のメダル、100を超えたら100記事のメダルを表示するということにします。

記事数 表示する画像
0 0の画像
10 10の画像
20 20の画像
30 30の画像
90 90の画像
100以降 100の画像

画像の準備

実装しやすいように画像名を揃えておきます。
今回は0詰めの3ケタにします。

画像名 表示する画像 備考
000.jpg 0 - 9 記事
010.jpg 10 - 19 記事
020.jpg 20 - 29 記事
030.jpg 30 - 39 記事
040.jpg 40 - 49 記事
050.jpg 50 - 59 記事
060.jpg 60 - 69 記事
070.jpg 70 - 79 記事
080.jpg 80 - 89 記事
090.jpg 90 - 99 記事
100.jpg 100記事以降

これらの画像ファイルをhugoのstaticディレクトリに配置します。

static
└── img
    └── icons
        ├── 000.jpg
        ├── 010.jpg
        ├── 020.jpg
        ├── 030.jpg
        ├── 040.jpg
        ├── 050.jpg
        ├── 060.jpg
        ├── 070.jpg
        ├── 080.jpg
        ├── 090.jpg
        └── 100.jpg
ケタ数は3ケタで十分!

画像名のケタを増やせば、10記事毎の節目が増えるので画像の切り替えを長く楽しむことができます。
その分の画像が必要になってきますが。。。

ケタ 必要な節目の画像数 期間
3ケタ 1000 / 10 = 100 1000 / 365 = 約2.7年
4ケタ 10000 / 10 = 1000 10000 / 365 = 約27年
5ケタ 100000 / 10 = 10000 100000 / 365 = 約270年

こうして見てれば3ケタで十分そうですね!
長く続ける場合は4ケタもアリですが。。。

※節目の画像数はキリが良くなるように+1して算出しています(3ケタならMAXで999なので+1で1000)

切り替えのコード

投稿記事数の取得のコードは以下のようになります。

{{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
len | HugoのExample2を引用

このコードで投稿した記事数を取得することができるので、これを使い記事数に応じた画像を表示します。

コード コードを開く
コード

<div>
  {{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
  {{ $tmp_post_count := $post_count }}
  {{ if gt $tmp_post_count 100 }}
    {{ $tmp_post_count = 100 }}
  {{ end }}
  {{ $file_name := div $tmp_post_count 10 | mul 10 | printf "%03d" }}

  <img src="/img/icons/{{ $file_name }}.jpg" width="64px">
  <div>
    現在の記事数: {{ $post_count }}
  </div>
</div>

コードの説明

ファイル名の取得

{{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
{{ $tmp_post_count := $post_count }}
{{ if gt $tmp_post_count 100 }}
  {{ $tmp_post_count = 100 }}
{{ end }}
{{ $file_name := div $tmp_post_count 10 | mul 10 | printf "%03d" }}

表示する画像のファイル名を作っている処理です。

$tmp_post_countに公開している記事数が入ってきているので、それを10で割り、10をかけ、3ケタの0詰めに変換します。
これで1のケタを切り捨てた画像名が$file_nameに入ってきます。

例. 記事が35の場合

  1. 記事数を10で割る
    35 / 10 = 3
  2. 割った結果に10をかける
    3 x 10 = 30
  3. 30を0詰めの3ケタ表示
    030

また記事が100以上の時は100の画像を表示させたいので、if文で$tmp_post_countの中身を書き換えて100記事目の画像を表示させるようにしています。

画像の表示

先程の$file_nameに表示する画像名が入っているので、これを使って画像を表示します。

  <img src="/img/icons/{{ $file_name }}.jpg" width="64px">

拡張子は.jpgになっていますが、.pngなど使うケースに応じて変更します。
widthの指定はお好みで。。。

表示結果

これを使った結果が、当ブログのサイドバーに表示されているメダルの画像です。
画像やcssなどでサンプルと見た目がちょっと異なるかもしれません。

メダルリストについて

メダルの上のメダルリストは手動で表示しています。
ここもいずれ自動化を考えています。

おわりに

今回はHugoで記事数に応じて表示する画像を切り替える、という内容でした。

サンプルでメダルの画像を使いましたが、プロフィール画像や季節の画像など色々と使えると思います。 良かったら参考にしてみてください。

それでは、このへんで。
バイナリー!



関連した記事