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

デザインの続きです。

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

①pagination.html

{{ partial "pagination.html" .Paginator }}で読み込むページを作成します。
格納場所はlayouts > partialsです。


<div>
{{if .HasNext}}
    <div>
        <a href=“{{ .Next.URL }}”>« Older Posts</a>
    </div>
{{end}}
<div>Page {{ .PageNumber }} of {{ .TotalPages }}</div>
{{if .HasPrev}}
    <div>
        <a href=“{{ .Prev.URL }}”>Newer Posts »</a>
    </div>
{{end}}
</div>

{{if .HasNext}}, {{if .HasPrev}}
“次(前)のページがあれば”というif構文です。

{{ .Next.URL }}, {{ .Prev.URL }}
次(前)のページに遷移するURLを自動で生成します。

Page {{ .PageNumber }} of {{ .TotalPages }}
今、どのページにいるのかを示します。
必ずしもこの表記である必要はありません。
ex) {{ .PageNumber }} / {{ .TotalPages }}とすれば、1/10のような表示になります。

②li.html

{{ .Render "li" }}で読み込むページを作成します。
格納場所はlayouts > _defaultです。


<article>
    <h2><a href=“{{ .Permalink }}”>{{ .Title }}</a></h2>
    <p>{{ .Date.Format “Jan 2, 2006” }}</p>
    {{ if .Params.img }}
        <div>
            <img {{ with .Params.img }} src=“/{{ . }}”{{ end }}>
        </div>
    {{ end }}
    <p>{{ .Summary }}</p>
    {{ if .Truncated }}<a href=“{{ .Permalink }}”>more ↦</a>{{ end }}
    <div>
        {{ with .Params.categories }}
            <div>Categories:{{ range . }} <a href=“/categories/{{ . }}/”>{{ . }}</a>{{ end }}
            </div>
        {{ end }}
        {{ with .Params.tags }}
            <div>Tags:{{ range . }} <a href=“/tags/{{ . }}/”>#{{ . }}</a>{{ end }}</div>
        {{ end }}
    </div>
</article>

{{ .Permalink }} 読んで字の如く、記事へのリンクを自動生成します。

{{ .Date.Format “Jan 2, 2006” }} 日付のフォーマットを指定します。
フォーマットは様々で2 January at 3:04pmと指定すれば、am/pm表示の時刻も取得できますし、Monday, Jan 2, 2006とすれば曜日も取得できます。

{{ if .Params.img }}
これは“記事にimgが設定されていたら”という構文です。
default.mdで+++の中にimg = ""と設定したのを覚えているでしょうか。
記事を作る際、このimgに何らかの画像を設定すると、コードが実行される設定です。
このブログでは、Folderの記事に使用しています。
{{ .Site.Params }}config.tomlからの呼び出しですが、{{ .Params }}は記事内の設定なので間違えないように。

{{ with .Params.img }}, {{ . }}
“+++内にあるimgの設定を使います”という構文です。
その値を{{ . }}で取得します。
この場合imgにはsrc=""に使用する画像URLを設定しています。
記事の書き方は、また別の機械に。

{{ .Summary }}, {{ if .Truncated }}
ブログの内容を70文字(?)だけ表示してくれるらしいのですが、どうもみぐさいので{{ if .Truncated }}を併用して、区切りのいいところにmoreタグを入れます。

{{ with .Params.categories }}, {{ with .Params.tags }}
{{ with .Params.img }}と同様に、+++内にある設定を使う宣言です。
{{ range }}で使用範囲を指定して、{{ . }}で設定を呼び出します。
この場合、タグ名、リンクURLの一部にそれぞれの要素が入ります。

ようやくここまで来ましたね。
次回は、個別記事とカテゴリーのページを作ります。

Categories: web
Tags: #hugo