三次元日誌(hugo)

hugoの仕組みも気になることだし作ってみることにした。

新しくテーマを作る

$ hugo new theme hoge

themes/hogeにテーマのテンプレートが作成される。

3つのテンプレート

layout/index.html

<!DOCTYPE html>
<html>
<body>
  {{- range first 10 .Data.Pages }}
    <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
  {{- end }}
</body>
</html>

layout/_default/single.html

<!DOCTYPE html>
<html>
<head>
  <title>{{ .Title }}</title>
</head>
<body>
  <h1>{{ .Title }}</h1>
  <h6>{{ .Date.Format "Mon, Jan 2, 2006" }}</h6>
  {{ .Content }}
  <h4><a href="{{ .Site.BaseURL }}">Home</a></h4>
</body>
</html>

layout/_default/list.html

<!DOCTYPE html>
<html>
<body>
  <h1>Articles</h1>
  {{- range first 10 .Data.Pages }}
    <h4><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
  {{- end }}
  <h4><a href="{{ .Site.BaseURL }}">Home</a></h4>
</body>
</html>

partial導入

layout/_default/header.html

bootstrap

2column

tags

付ける

frontmatterに

tags = ["hugo"]

のように書く。よくわからないがアルファベットの大文字は避けた方がよさげ。マルチバイト文字はOKぽい。

single

.Params.tagsに格納されているので以下のようにして使う

{{ range .Params.tags }}
<a href="/tags/{{ . | urlize }}/">{{ . }}</a>
{{ end }}

list

.Data.Pagesを列挙して中から取り出せる

{{ range .Data.Pages }}
    <hr>
    {{ range .Params.tags }}
    <a href="/tags/{{ . | urlize }}/">{{ . }}</a>
    {{ end }}
{{ end}}

サイトのタグ一覧

{{ range $name, $value := $.Site.Taxonomies.Alphabetical }}
    <li>
        <a href="{{ $.Site.BaseURL }}/tags/{{ $name }}/">
        <div><span class="badge">{{ .Count }}</span>{{ $name }}</div>
        </a>
    </li>
{{ end }}

pagination

more

目次

syntax highlight

prev/next

作業中

あまりかっこよくならんね…。 とりあえず読めるようにはなってきた。 まぁ、見易さ優先で。