このサイトのAboutページの「エンジニア歴〇〇年」という部分は、Hugoで使えるショートコード(関数)によって自動計算して出力しています。この記事では実際に書いたコードを解説したい思います。

HugoとGo言語

HugoはGo言語(Golang)で構築された静的サイトジェネレーターです。そのため、テンプレート内ではGo言語の標準的なテンプレートエンジンの仕組みを利用して、プログラムに近い処理を記述することができます。 つまり、本格的なカスタマイズにはGo言語の知識が必要です。

実装したコードの解説

Hugoでは記事を書いているMarkdownに直接プログラム処理を書くことができないため、処理部分は別のhtmlファイルに記述します。今回作成したショートコードはlayouts/shortcodes/experience.htmlに書きました。

中身は以下の通りです。

{{- $startYear := 2021 -}}
{{- $currentYear := now.Format "2006" | int -}}
{{- sub $currentYear $startYear -}}

以下、詳しく解説します。

1行目:変数の代入と開始年の固定

{{- $startYear := 2021 -}} Go言語のテンプレートでは、$変数名 := 値という構文で変数を定義します。ここではエンジニア活動を開始した「2021年」を固定値として$startYearに代入しています。

2行目:現在の年を取得して数値に変換

{{- $currentYear := now.Format "2006" | int -}}

now

ビルドした瞬間の現在時刻を取得します。

Format “2006”

日付を「西暦4桁」の形式に整形します。Go言語では西暦4桁を指定する際に、基準日である2006という数字を使う決まりがあります。

| int

パイプ記号(|)を使い、文字列として取得された西暦を数値として扱えるように変換しています。

3行目:引き算の実行

{{- sub $currentYear $startYear -}}

Hugo(Goテンプレート)の関数は、「関数名 引数1 引数2」という順番で記述します。

sub

引き算(Subtraction)を行う関数です。

$currentYear $startYear

$currentYear - $startYear を計算します。

出力方法

出力したいファイル(Markdown)に以下のように記述します。前述したexperience.htmlをショートコードとして使用することができます。

エンジニア歴は {{< experience >}} 年目になります。

以下、コードの解説です。

< > (角括弧)

中身を「そのままのHTML」として出力します。

experience という名前

layouts/shortcodes/experience.htmlというファイル名と紐付いています。Hugoは{{< 名前 >}}と書かれると、自動的にlayouts/shortcodes/名前.htmlを探しに行きます。

補足:引数を渡す場合

引数を渡す場合は以下のような記述になります。

{{- $startYear := .Get 0 -}}

.Get 0: 呼び出し時に渡された1番目のパラメータを取得します。

Markdownファイルでは以下のように記述します。

{{< experience 2021 >}}

この記事のまとめ

  • ロジック(HTML): layouts/shortcodes/ 内にプログラムを記述
  • 呼び出し(Markdown): {{< ファイル名 >}} で記事内に結果を表示


関連記事