Hugoで構築したサイトはごく一部を除いて, 英語のテーマを使っているのでちょいちょいっと手を加えて日本語化して行きます.

僕が使っているthemeは, hugo-nuo で,

  • 投稿日時が英語で記述されてしまう
  • 「記事を読む」が READ MORE
  • 次へ, 前へがOLDEST POST, NEWER POST

となっているのでこの辺を日本語にして読みやすくしていきます.

layouts 以下のファイルをコピー

Hugoのhtml類のファイルは, TestSite/themes/<テーマ>/layouts/ に入っているので, これを修正していくわけですが,

直接修正するのはあれなのでTestSiteにlayouts以下のファイルを全てコピーしてきます.

$ cd TestSite
$ cp -r themes/<テーマ>/layouts/* layouts/
$ cp themes/<テーマ>/layouts/* layouts/

すでに何か編集している場合は, 上書きしてしまわないように注意が必要です.

layouts ディレクトリの構成

僕のサイトの場合は, 以下のような構成になっています.

$ tree layouts
layouts
├── 404.html
├── _default
│   ├── about.html
│   ├── archives.html
│   ├── baseof.html
│   ├── links.html
│   ├── list.html
│   ├── resume.html
│   └── terms.html
├── index.html
├── partials
│   ├── adsense.html
│   ├── footer.html
│   ├── gitment.html
│   ├── head.html
│   ├── header.html
│   └── polyfill.html
├── post
│   ├── single.html
│   └── summary.html
└── shortcodes

_default/baseof.htmlが基盤になって, その他のhtmlファイルを埋め込んで各ページが構成されます.

hugo-nuo では,

  • 記事リスト(初期ページ)のテンプレートがsummary.htmlに,
  • 各記事のテンプレートが, single.htmlに

入っています.

他のhtmlファイルの読み込み

基本的にはテンプレートを漁って, 該当部分を日本語に書き換えていけばよいのですが, どのファイルに探している記述があるか辺りをつけるために埋め込みの仕組みを簡単にしっておきます.

基本は,

{{ range .Pages }}
    {{ .Render "summary"}}
{{ end }}

とか,

{{ partial "header.html" . }}

でテンプレートを埋め込んでいるので, .Renderとpartialをたどっていけば直したい部分にたどり着けます.

日付のスタイル変更

僕の場合は, summary.htmlとsingle.htmlに 投稿日時を表示している部分が見つかりました.

{{ .Date.Format "Jan 2, 2006" }}

この, “Jan 2, 2006"を

{{ .Date.Format "2006年 1月 2日" }}

に変更することで日付フォーマットが日本語になりました.

READ MORE

同様に, summary.htmlに

<a class="read-more" href="{{ .Permalink }}">READ MORE →</a>

があったので,

<a class="read-more" href="{{ .Permalink }}">記事を読む →</a>

に変更します.

OLDER POST, NEWER POST

summary.htmlにはなかったので, index.html(index.html -> summary.htmlを呼び出している)を見てみると,

<a class="pagination-next" href="{{ $paginator.Next.URL }}">
OLDER POST →
</a>

があるので, 同様にこちらも編集して完成です.

テーマによって細かい部分は違うと思いますが, 該当部分を探すのはそんなに難しい作業ではないので簡単にいじれると思います.

閲覧ありがとうございました.

他のHugo関連の記事は, Hugo から見れるのでよければそちらもどうぞ