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

あともうちょっと!

  • archetypes
    • default.md
  • content
  • data
  • layouts
    • _default
      li.html
      ・list.html
      ・single.html
    • partials
      header.html
      footer.html
      pagination.html
    • index.html
    • 404.html
  • static
    • css
      ・style.css
    • js
      ・各種ファイル
  • config.toml

①list.html

カテゴリーページを作ります。
格納場所はlayouts > _defaultです。


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

今までの組み合わせなので超簡単!
どうしてもわからないのは、なぜカテゴリー名が{{ .Title }}で取得できるのかということ。

②single.html

個別記事のページを作ります。
格納場所はlayouts > _defaultです。


{{ partial “header.html” . }}
<h2>{{ .Title }}</h2>
<section>
    <p>{{ .Date.Format “Jan 2, 2006” }}</p>
</section>
<section>{{ .Content }}</section>
<section>
    {{ 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 }}
</section>
{{ partial “footer.html” . }}

{{ .Content }}
記事の中身を呼び出します。
markdown記法で書けるので、いちいちhtmlを打ち込む手間が省けます。

③cssとか

cssやjs等はstaticに格納します。
headerで設定した通りになるようにフォルダを構成してください。

④dataフォルダ

このブログには必要なさそうなので、空っぽにしてあります。
はっきり言って、よくわかりません!
config.toml以外にサイト全体で共有するパラメータを書く場所だそうです。
参照:Hugoでwebサイト構築(10) データファイル(パラメータを作る)(こちらのサイトはかなりお世話になりました。)

これでレイアウトは完成です。
次は記事の更新方法です。

Categories: web
Tags: #hugo