ど素人がHugoを使ってみる ―レイアウト―

今回はサイトのデザインを作り込みます。
全てlayoutsフォルダの中に格納するので、追加でフォルダを生成しておきます。

  • archetypes
    • default.md
  • content
  • data
  • layouts
    • _default
    • partials
      ・header.html
      ・footer.html
    • index.html
    • 404.html
  • static
  • config.toml

①header.html

考え方はWordPressの時と同じです。
headerとfooterを作って、indexやその他のページにパーツとして読み込ませます。
格納場所はlayouts > partialsです。


<!DOCTYPE html>
<html lang=“{{ .Site.LanguageCode }}”>
<head>
    <meta charset=“utf-8” />
    <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”/>
    <link rel=“stylesheet” href=“{{ .Site.BaseURL }}css/style.css” />
    <その他、スクリプトなど>
    <title>{{ if ne .URL “/” }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>
</head>
<body>
{{ if eq .URL “404.html” }}
<header id=“notfound”>
{{ else }}
<header id=“header”>
{{ end }}
    <div>
        <div id=“logo”><a href=“{{ .Site.BaseURL }}”>LOGO</a></div>
        <nav>
            <ul>
                <li><a href=“{{ .Site.BaseURL }}Menu1/”>Menu1</a></li>
                <li><a href=“{{ .Site.BaseURL }}categories/Menu2”>Menu2</a></li>
                <li><a href=“{{ .Site.BaseURL }}categories/Menu3”>Menu3</a></li>
                <li><a href=“{{ .Site.BaseURL }}categories/Menu4”>Menu4</a></li>
            </ul>
        </nav>
    </div>
</header>

それでは一つずつ解説していきます。

{{ .Site.LanguageCode }}, {{ .Site.BaseURL }}
config.tomlで設定したLanguageCodeBaseURLを呼び出しています。

{{ if ne .URL “/” }}{{ .Title }} - {{ end }}{{ .Site.Title }}
.Titleは記事のタイトル、.Site.Titleconfig.tomlで設定したサイトのタイトルです。
さらにif ne .URL "/"は、“indexページのURLじゃなかったら”というif構文です。
なので{{ indexページのURLじゃなかったら }}{{ 記事のタイトルを追加で表示 }} - {{ サイトのタイトルを表示 }}であり、{{ indexページのURLだったら }}{{ サイトのタイトルのみ表示 }}という結果になります。

{{ if eq .URL “404.html” }}〜〜{{ else }}〜〜{{ end }}
先程とは少し違うif構文です。
if eq .URL "404.html"は“URLが404.htmlだったら”という意味です。
あとはごく普通のif構文と同じように、elseなどを使って分岐させます。

ナビゲーションの構造
この例ではMenu1だけ固定ページで、残りはカテゴリーアーカーブのページにリンクさせています。
config.tomlでタクソノミーの設定をすれば、サイトを生成したとき自動でアーカイブページができあがります。

格納場所はheaderと同じです。


<footer>
    <Google検索バー>
    <div>
        {{ with .Site.Params.pinterest }}<a href=“{{ . }}”>Pinterst</a>{{ end }}
        {{ with .Site.Params.facebook }}<a href=“{{ . }}”>Facebook</a>{{ end }}
        {{ with .Site.Params.twitter }}<a href=“{{ . }}”>Twitter</a>{{ end }}
        {{ if .Site.Params.showsRSS }}<a href=“{{ .Site.BaseURL }}index.xml” type=“application/rss+xml”>RSS</a>{{ end }}
        <p>{{ .Site.Params.copyright | safeHTML }}</p>
    </div>
</footer>

{{ with .Site.Params.xxx }}
config.tomlで設定した[params]の要素をそれぞれ呼び出しています。

{{ if .Site.Params.showsRSS }}
config.tomlshowsRSS = trueとなっていれば表示されます。

③index.html

headerとfooterができあがったので、読み込んでみます。
格納場所はlayoutsです。


{{ partial “header.html” . }}
<h1>Recent</h1>
  {{ range (.Paginator 5).Pages }}
    {{ .Render “li” }}
  {{ end }}
  {{ partial “pagination.html” .Paginator }}
{{ partial “footer.html” . }}

{{ partial “header.html” . }}, {{ partial “footer.html” . }}
partialsフォルダからheaderとfooterを呼び出しています。
最後の.を忘れないことと、フォルダ名はpartialsですが構文はpartialなので注意。

6〜8行目
これはまた別途ファイルを作って読み込みます。
記事のリストとページネーションに関するコードです。
{{ range (.Paginator 5).Pages }}は、{{ range }}{{ end }}で指定した範囲に記事を何件表示するかです。
デフォルトでは10件なので、(.Paginator 5).Pagesと指定すれば1ページあたり5件の記事が表示されます。
{{ .Render "xxx" }}layouts > _defaul配下にあるファイルを呼び出す構文です。
ここでは記事のリストに関するページを作って入れてあります。
{{ partial }}と違い、ここでは拡張子が必要ありません。
li.htmlpagination.htmlの詳細は次の記事で説明します。

また、同じ階層に404ページも作っておきましょう。

Categories: web
Tags: #hugo