Hugo テーマ 1. single テンプレート

2026-02-23 19:15:24 hugo

hugo new theme から始まり、テンプレート single.html の編集を行います。それにより、個別のページが表示されるようにします。

やりたいこと

まずは、極力シンプルに、必要最低限の表示がされることを確認していきます。

表示確認は、このページに対して行います。

hugo new theme absence

今回のテーマ名は「absence」とします。

hugo new theme absence

すると、以下のようなファイルツリーが出来上がります。

※テーマの作成に関係のないものは除外しています。

> tree
.
|-- themes
|   |-- absence
|       |-- LICENSE.md
|       |-- archetypes
|       |   `-- default.md
|       |-- layouts
|       |   |-- 404.html
|       |   |-- _default
|       |   |   |-- list.html
|       |   |   `-- single.html
|       |   |-- index.html
|       |   `-- partials
|       |       |-- footer.html
|       |       `-- header.html
|       |-- static
|       |   |-- css
|       |   `-- js
|       `-- theme.toml

今回は、上記の中ほどにある themes/absence/layouts/_default/single.html を編集します。

表示するのは最低限とする

とりあえず、タイトルと内容が表示されるようにします。

他の、例えばメニューやらタグやら Google Analytics やらの対応は行いません。 CSS や JavaScript なんてとんでもない！ …というくらい最低限のページにします。

最終形

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<head>
    <meta charset="UTF-8">
    <title>{{ .Page.Title }} - {{ .Site.Title }}</title>
</head>
<body>
    {{ .Page.Content }}
</body>
</html>

参照したもの	URL
Site 変数	https://gohugo.io/variables/site/ ☐↗
Page 変数	https://gohugo.io/variables/page/ ☐↗

表示結果

hugo server -w -D -t absence

« Hugo テーマ 0. 作成について «

» Hugo テーマ 2. list テンプレート »