HUGOで使用しているテーマ（Ananke）のカスタマイズ

September 13, 2020

概要

HUGOで使用しているテーマ（Ananke）をカスタマイズします。
デフォルトのまま日本語を表示すると、フォントがSerif体、文字サイズが大きすぎる、とあまり僕の好みではありません。
以下のようにテーマを変更していきます。

日本語対応
SNSボタンの無効化
フォントの変更
フォントサイズの変更

環境

Macbook Pro 13inch, 2016
macOS Catalina version 10.15.6
Hugo 0.74.3
Git 2.28.0
ghq 1.1.5

ソースファイルの取得

実装の確認のために使用します。

git submoduleでテーマを追加している場合は、theme/anankeにソースがあります。この作業は不要なので読み飛ばしてください。

僕はgit submoduleでテーマを追加していないので、プロジェクト内にAnankeのソースがありません。
Githubからgit cloneでソースを取得します。
ブラウザでも確認できますが、エディタで見た方が検索機能などが強力です。
僕はソース管理にghqを使用しているので、ghq getコマンドで取得しました。

$ ghq get theNewDynamic/gohugo-theme-ananke

日本語対応

config.tomlのDefaultLanguageとlanguageCodeを日本語に変更すると、ボタンの文字などが消滅します。
これはAnankeが日本語のローカライズに対応していないためです。
theNewDynamic/gohugo-theme-ananke/i18nを確認すると、jaやjpというファイルは存在していませんでした。

$ tree gohugo-theme-ananke/i18n
i18n
├── bg.toml
├── de.toml
├── en.toml
├── es.toml
├── fr.toml
├── it.toml
├── nl.toml
├── no.toml
├── pt.toml
├── ru.toml
├── sv.toml
├── uk.toml
└── zh.toml

プロジェクト内に同名のディレクトリを作成し、日本語用の設定ファイルを追加します。
僕はとりあえずボタンの文字が出ればいいので、en.tomlをコピーし、リネームして対応しました。

$ mkdir blog/i18n
$ cp gohugo-theme-ananke/i18n/en.toml blog/i18n/ja.toml
$ tree blog/i18n
i18n
└── ja.toml

config.tomlのDefaultLanguageとlanguageCodeを変更します。

DefaultContentLanguage = "ja"
languageCode = "ja"

ローカルサーバを起動して確認すると、ボタンの文字が表示されていることがわかります。

SNSボタンの無効化

AnankeはデフォルトでSNSのボタンが有効になりますが、現状必要ありません。
/archetypes/default.mdに以下を追加してSNSボタンを無効化しました。
すでに追加した記事については反映されないので個別に設定を追加してください。

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
disable_share: true
---

サマリーの追加

Anankeはサマリーに設定された内容をリスト上で表示します。
サマリーに値がない場合は本文がでろっと出力されてしまい、僕の好みではありません。
記事の頭に設定すればそれが表示されるようになりますが、記事を作成するたびに変数を追加するのは面倒です。
SNSボタン同様に/archetypes/default.mdに変数を追加しておきます。

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
disable_share: true
summary: ""
---

フォントの変更

AnankeはデフォルトだとフォントがSerif体です。
僕はSan-Serif体の方が好きです。
カスタムCSSで上書きを行います。

/static/css/にcustom.cssを追加して、フォントを指定します。

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, YuGothic,"游ゴシック", sans-serif;
}

custom.cssを使用するようにconfig.tomlに設定を追加します。
また、上記だけでは適用されないので、post_content_classesも併せて変更します。
post_content_classesが指定されていない場合、デフォルトでserif体を使用する処理が内部で動くためです。

[params]
custom_css = ["css/custom.css"]
post_content_classes = "avenir bg-near-white"

これでh1タグ以外はSan-Serif体に変更されます。
h1タグはテンプレートページでSerif体を使用するクラスが直埋めされているため、変更が適用されません。
athelasというクラスです。
CSSでは以下のように定義されています。

.athelas {
  font-family: athelas,
               georgia,
               serif;
}

変更したい場合はテンプレートページの上書きが必要です。
このクラスを参照している箇所を検索して削除してやります。
対象は以下の2ファイルです。

/layouts/_default/single.html
/layouts/partials/partials/summary-with-image.html

同一のファイルパスとファイル名で作成し、該当箇所を削除します。

/layouts/_default/single.html

-      <h1 class="f1 athelas mt3 mb1">
+      <h1 class="f1 helvetica mt3 mb1">

/layouts/partials/partials/summary-with-image.html

-          <h1 class="f3 fw1 athelas mt0 lh-title">{{ .Title }}</h1>
+          <h1 class="f3 fw1 helvetica mt0 lh-title">{{ .Title }}</h1>

フォントサイズの変更

Anankeは日本語だとフォントサイズがかなり大きくなります。
custom.cssで好みのサイズに調整しましょう。

h1 {
    font-size: 1.5rem;
}
/* リストや記事のh1で使用しているクラス
   こいつが優先されるため上書きするように書いておく */
.f1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.25rem;
}
p, li {
    font-size: 1rem;
}

まとめ

今回はHUGOで使用しているテーマ（Ananke）をカスタマイズしていきました。
アイコンなど他にも設定したいものはありますが、ひとまず終了です。
HUGOは公開されているテーマを使用すれば簡単にサイトを構築できますが、自分好みにするにはカスタマイズは必須でした。
もはや自作した方がいいような気もします。

次は作成したブログを本番環境にデプロイしていきます。

hugo