Static Site Generator Advent Calendar 2020 11日目の記事です。
Hugo を利用、テーマをカスタマイズする際に Go 言語を書く必要はありません。大事なことなので本文先頭にも書きました。
定期的に Twitter で Hugo に関してのつぶやきを検索して、いいねを押し、リツイートし、それが疑問であれば回答したり、参考文献を紹介したりするなどして Hugo を布教する日々を送っています。
ごくまれにですが「Hugo の利用・カスタマイズに Go 言語が必要」だと誤解されているユーザーを見かけます。Go 言語を書く必要があったり、Go 言語関連の知識が必要になることはありませんので安心してください。
基本的に Go 言語で記述されたツールはビルド済み実行バイナリが配布されていることが多く、実行する際にコンパイラ等は必要ありません。
Hugo も go install
でインストールしたりしない限り、バイナリをインストールすることになるので go
の事前インストールは不要です。
ただ、後述する Hugo Modules を利用したい場合には Go の実行環境が必要になります。
Hugo テーマをカスタマイズ・作成する際には Go Template の拡張である Hugo Template を利用します。 Go の文法と比べると非常に簡単です。(このテンプレートを指して Go 言語と言う人はいないと思います)
例えば、このブログのアイキャッチ画像は以下のように実装されています。
{{ if .Params.eyecatch }}
{{ $image := resources.Get (printf "%s" ($.Params.eyecatch | safeURL)) }}
{{ $small := $image }}
{{ $medium := $image }}
{{ $large := $image }}
{{ if hugo.IsExtended }}
{{ $small = $image.Resize "480x webp" }}
{{ $medium = $image.Resize "768x webp" }}
{{ $large = $image.Resize "1024x webp" }}
{{ else }}
{{ $small = $image.Resize "480x jpg" }}
{{ $medium = $image.Resize "768x jpg" }}
{{ $large = $image.Resize "1024x jpg" }}
{{ end }}
<figure class="image container">
<picture>
<source media="(max-width: 480px)" srcset="{{ $small.RelPermalink }} 480w">
<source media="(max-width: 768px)" srcset="{{ $medium.RelPermalink }} 768w">
<source media="(max-width: 1024px)" srcset="{{ $large.RelPermalink }} 1024w">
<img
src="{{ $large.RelPermalink }}"
alt="{{ $.Params.Description }}"
decoding="async"
loading="lazy"
/>
</picture>
</figure>
{{ end }}
hugo-theme-iris/eyecatch.html at master · peaceiris/hugo-theme-iris
HTML などに {{
と }}
で囲った if 文などを記述していきます。
最近の Hugo はテーマやブログパーツをパッケージとして扱うことを可能にする Hugo Modules という機能を持っています。
( partials , shortcodes だけにとどまらず、JavaScript/CSS ライブラリ、画像、フォントなども管理対象にできます)
これは Go Modules を利用しているため Hugo Modules を利用する際には Go Modules の仕様を知っていると理解が早いですが、特に知らなくても問題なく利用できると思います。
ご利用の Hugo テーマが Hugo Modules を利用していない限り Hugo Modules の利用は必須ではありません。 テーマを作成するというのであれば凄く便利なのでぜひ活用してほしいです。
以上「Hugo を利用するのに Go 言語を書くことはありません」という話でした。
ʕ◔ϖ◔ʔ
Keyboard Shortcuts
Command | Function |
---|---|
? (Shift+/) | Bring up this help modal |
g+h | Go to Home |
g+p | Go to Posts |
g+e | Open Editor page on GitHub in a new tab |
g+s | Open Source page on GitHub in a new tab |
r | Reload page |