Hugo立ち上げとテーマ適用、サマリ長すぎ問題の修正

Hugoで静的サイトを作る際の問題点として「サマリ長すぎ問題」が挙げられる。

原因は、デフォルトのサマリは70 words （69回のスペース区切り）で要約を表現していることである。99%のテーマ作者はCJK言語圏のことを考慮していないので、デフォルトをそのまま使い、問題となる。

サマリ長すぎ

Hugoユーザは色々と自力で色々やらなければならない。大切なのは根気である。

本記事では静的サイトを新規に作り、テーマの適用を行い、サマリ長すぎ問題を解決する。

静的サイトの新規作成

hugo new site bloblo
cd bloblo
git init

テーマは https://themes.gohugo.io/hugo-h5bp/ を見つけたとする。 [Download]のurlをコピーして、以下のコマンドにする。

git submodule add https://github.com/garvincasimir/hugo-h5bp-simple.git themes/h5bp

config.toml を次のようにする。

baseURL = "/"
languageCode = "ja"
title = "bloblo"
theme = "h5bp"

適当に記事を hugo new posts/hello-hugo.md に書く。

---
title: "Hello Hugo"
date: 2017-08-27T21:31:12+09:00
draft: false
---

吾輩は猫である。名前はまだない。

hugo server

静的サイトができている。

なお、

hugo

とすれば、静的サイトがビルドされる。

さて、いよいよこいつ。

大まかな流れは、既存のテーマでサマリを描画しているところを特定して、テンプレートHTMLをオーバーライドすることだ。

テーマに内蔵されているテンプレートファイルや静的ファイルは、それに対応するファイルを置けば、探索の優先順位はそちらが高いので、オーバーライドになる。詳しくは Hugo | Customize a Theme を参照されたい。

まずは、 hugo server --debug によって、ログ出力を詳細にし、テンプレートの挙動を追いかける。

ログより themes/h5bp/layouts/index.html を見ていることがわかった。実際、{{.Summary}} がある。

複雑なテーマでは、パーシャルHTMLをさらに読んでいて、そして該当しそうなパーシャルファイルが複数見つかることがある。そのときはpartialsをパスに含むものを優先する。

これを、パスの関係性を維持しながら、複製する。

cp themes/h5bp/layouts/index.html layouts/index.html

試しに、複製したほうに、テスト用の改変を仕込んでみる。

{{ .Title }} !!!!

うまくいっている。

{{ .Summary }} を意図通りのコードに書き換えれば、

{{ if gt (len .Summary) 200 }}
  {{slicestr .Summary 0 200}}...
{{ else }}
  {{ .Summary }}...
{{ end }}