Hugoのテーマ作り

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

Hugo のテーマを何個か作ったので知見をまとめてみる https://gohugo.io/tutorials/creating-a-new-theme/

新しくテーマを作る

$ hugo new theme hoge

themes/hoge にテーマのテンプレートが作成される。３つのテンプレート 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 layout/_default/footer.html bootstrap

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

http://getbootstrap.com/

2column sticky-footer tags

http://text.baldanders.info/hugo/section/ http://text.baldanders.info/hugo/categories-and-tags-list/

付ける 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}}

サイトのタグ一覧

Hugo で web サイト構築(12) タグの列挙 https://gohugo.io/taxonomies/ordering/

{{ 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

http://wdkk.co.jp/note/2015/0915-hugo-pagination/ https://gohugo.io/extras/pagination/

Content summaries

Hugo generates summaries of your content.