【Hugo】固定ページを作る

以前、Hugoでオリジナルテーマを作る記事を書きました。

【Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り

この記事では記事を書いて投稿できるという本当に最低限のところまでです。

ただ、よくあるブログの構成って、記事一覧ページ＋記事詳細ページ＋固定ページですよね。

以前の記事で、記事位一覧ページ＋記事詳細ページは作っているので、
今回は固定ページを作る方法です。

もくじ

1. 変更するファイル
2. 方法
3. 書き方

変更するファイル

前回の記事から、変更するファイルはこれです。

[index.html]

{{ partial "header.html" . }}
  <article>
    <ul>
      {{ range (.Paginator 10).Pages }}
        {{ .Render "list" }}
      {{ end }}
    </ul>
  </article>
  {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
    <nav class="pagination">
      {{ if .Paginator.HasPrev }}
      <a href="{{ .Paginator.Prev.URL }}">前へ</a>
      {{ end }}
      <span class="current-page">Page {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}</span>
      {{ if .Paginator.HasNext }}
      <a href="{{ .Paginator.Next.URL }}">次へ</a>
      {{ end }}
    </nav>
  {{ end }}
{{ partial "footer.html" . }}

ulタグで囲まれているところが、記事一覧です。

その下はページネーションです。

方法

上記の書き方だと、マークダウンで書いたファイルが全て、記事一覧ページで表示されてしまいます。

方法としては、記事用のディレクトリと固定ページ用のディレクトリを分けて、
記事用のディレクトリ内で書いたマークダウンファイルだけ一覧で出力するようにすればOKです。

マークダウンファイルは「content」ディレクトリ以下で管理しています。

1. 「content」ディレクトリ以下に、「posts」と「pages」ディレクトリを作成
2. 「posts」を記事用のディレクトリに、「pages」を固定ページ用のディレクトリにしておきます。

書き方

記述は以下のように書き直します。

<article>
  <ul>
    {{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
    {{ range $paginator.Pages }}
      {{ .Render "list" }}
    {{ end }}
  </ul>
</article>

この記述についてはHugoのドキュメントに書いてあります。

Pagination

英語ができないのでGoogle先生にざっくり翻訳してもらった内容からすると、引数で指定して表示させるページを指定できるようです。

今回はpostsディレクトリ以下のマークダウンファイルを一覧に出したいので、「posts」と書いています。

この「.Paginate」はデフォルトで最大10件の記事を出す設定になっているようです。
最後に数字をしていすると表示件数を調整できます。

20件表示にしてみました。

<article>
  <ul>
    {{ $paginator := .Paginate (where .Data.Pages "Type" "posts") 20 }}
    {{ range $paginator.Pages }}
      {{ .Render "list" }}
    {{ end }}
  </ul>
</article>

最後に固定ページは、ブログ記事を書くように「pages」ディレクトリ内に例えば「about.md」など作って、内容を書きます。

最後に「hugo」とコマンドを打つと、publicディレクトリ以下にaboutディレクトリが出来ていると思います。

あとはパスを指定したらOKです。