[Hugo] 公開した記事数によって表示する画像を切替えてみた
Nプログラマ(@Nprog128)です。
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ディレクトリに配置します。
1static
2└── img
3 └── icons
4 ├── 000.jpg
5 ├── 010.jpg
6 ├── 020.jpg
7 ├── 030.jpg
8 ├── 040.jpg
9 ├── 050.jpg
10 ├── 060.jpg
11 ├── 070.jpg
12 ├── 080.jpg
13 ├── 090.jpg
14 └── 100.jpg
画像名のケタを増やせば、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）
切り替えのコード
投稿記事数の取得のコードは以下のようになります。
1{{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
このコードで投稿した記事数を取得することができるので、これを使い記事数に応じた画像を表示します。
コード コードを開く
1<div>
2 {{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
3 {{ $tmp_post_count := $post_count }}
4 {{ if gt $tmp_post_count 100 }}
5 {{ $tmp_post_count = 100 }}
6 {{ end }}
7 {{ $file_name := div $tmp_post_count 10 | mul 10 | printf "%03d" }}
8
9 <img src="/img/icons/{{ $file_name }}.jpg" width="64px">
10 <div>
11 現在の記事数: {{ $post_count }}
12 </div>
13</div>
コードの説明
ファイル名の取得
1{{ $post_count := len (where .Site.RegularPages "Section" "==" "post") }}
2{{ $tmp_post_count := $post_count }}
3{{ if gt $tmp_post_count 100 }}
4 {{ $tmp_post_count = 100 }}
5{{ end }}
6{{ $file_name := div $tmp_post_count 10 | mul 10 | printf "%03d" }}
表示する画像のファイル名を作っている処理です。
$tmp_post_countに公開している記事数が入ってきているので、それを10で割り、10をかけ、3ケタの0詰めに変換します。
これで1のケタを切り捨てた画像名が$file_nameに入ってきます。
- 記事数を10で割る
35 / 10 = 3 - 割った結果に10をかける
3 x 10 = 30 - 30を0詰めの3ケタ表示
030
また記事が100以上の時は100の画像を表示させたいので、if文で$tmp_post_countの中身を書き換えて100記事目の画像を表示させるようにしています。
画像の表示
先程の$file_nameに表示する画像名が入っているので、これを使って画像を表示します。1 <img src="/img/icons/{{ $file_name }}.jpg" width="64px">
拡張子は.jpgになっていますが、.pngなど使うケースに応じて変更します。
widthの指定はお好みで。。。
表示結果
これを使った結果が、当ブログのサイドバーに表示されているメダルの画像です。
画像やcssなどでサンプルと見た目がちょっと異なるかもしれません。
メダルの上のメダルリストは手動で表示しています。
ここもいずれ自動化を考えています。
おわりに
今回はHugoで記事数に応じて表示する画像を切り替える、という内容でした。
サンプルでメダルの画像を使いましたが、プロフィール画像や季節の画像など色々と使えると思います。 良かったら参考にしてみてください。
それでは、このへんで。
バイナリー！
