シンプルなデザインが好きなので、ほかのテーマをカスタマイズするより、作ったほうが早そうなので作ってみました。
いろいろやったので、やったことを忘れないようにまとめました。
今使っているテーマが作ったテーマです。中身はGithubで見れます。
nobarudo/nihility
テーマの作り方
準備
テーマを試す用のサンプルを用意してくれているのでクローンすることろから始めます。
git clone https://github.com/gohugoio/hugoBasicExample.git
hugoのコマンドでテーマもnewできるので、newします。newすると基本的なファイルを作ってくれます。
hugo new theme [name]
基本的なページのテンプレートの作成
indexやリストの作り方は、下の公式に記載されているので、参考にして作成しました。
Hugo’s Lookup Order | Hugo Partial Templates | Hugo
自動で生成されるページごとに使われるhtmlファイルの名前が決まっているので、書いていくだけです。基本的にはGo言語のテンプレートエンジンの書き方で記述する必要があるので、Go言語の公式も見ておく必要があります。
baseof.htmlに基本的な構成を記述してコンテンツ部分に埋め込めるようにしておけば、ほかのhtmlはコンテンツ部分だけを記述するだけなので、ブログに必要なページを一通り作るだけならそれほど時間はかからず作ることができます。
やったこと
メニュー
ヘッダーとフッターにメニューを入れられるようにしました。Menusという機能でメニューを作成できるのですが、今まで使っていたテーマがconfig.tomlで設定するものが多かったので、自分もconfigで設定できるようにしました。
拡張性
headやcssをカスタマイズしたいときに、編集しやすいようにカスタマイズ用の空ファイルを作りました。
generator
HugoはHugoのコミュニティを成長させるために、metaタグにgeneratorを明記することを推奨しています。
以前は{{ .Hugo.Generator }}をヘッター内に記述するだけで良かったみたいですが、いまは警告が出るようになっていたので、{{ .Site.Hugo.Version }}で対応しました。
<meta name="generator" content="Hugo {{ .Site.Hugo.Version }}" />
GoogleAnalytics
GoogleAnalytics使いたいのでconfig.tomlで設定できるようにしました。
GoogleAnalyticsはテンプレートが用意されているので、_internal/google_analytics.htmlを呼び出すだけで完結しました。
テンプレートのほうで、config.tomlで設定されているかを判定してくれるので、headで呼び出すだけでした。
コメント
コメントがつけられるようにDisqusを使っていたので、そのまま使えるようにしました。 Hugoの公式のテンプレを張り付けるだけで実装できました。
Shortcodes
記事の中にHTMLを埋め込める機能があるのですが、埋め込むためのテンプレートが必要になるので、テーマのほうで基本的なものを用意しておきました。
SEO
SEOについては詳しくないので、最低限推奨されているmetaタグと、descriptionを記事ごとに設定できるようにしました。どこまで効果あるかはわからないです。
シェアボタン
記事の最後にシェアボタンを表示するようにしました。かなり簡易的に実装したので、configとかで設定できるようにしたい。
シェアボタンの見た目をきれいにするのに思ったより時間がかかってしまった。
そのうち対応したいこと
- amp
ブログでamp対応する必要あるのか微妙なので余裕があったら、勉強がてらやってみたい。 - themes.gohugo.ioに乗せてもらう
いろいろやらないといけないことがあるので、めんどくさい。余裕があったらそのうちやりたい。
感想
作ってみて、思ったよりすぐに作れました。気になるところがあれば、少しずつ直していこうと思います。
Go言語のテンプレートエンジンについて、今まで、あまり使ったことがなかったですが、少し理解が深まった気がします。
