January 26, 2016

Hugoでトップページに更新情報を表示する

ウェブページのトップに、更新履歴の最初の10件を表示したい、今月のお知らせを表示したいといった場合で、過去の更新履歴や過去の月のお知らせは別ページに表示したいという場合にもHugoは便利な機能を持っています。
ここでは、更新情報のうち、最初の3件をトップページに表示することを考えます。
まず、更新情報は以下のように個別の.mdファイルとしてコンテンツを作成することにしましょう。
+++
date = "2016-01-01"
+++

あけましておめでとうございます!
+++
date = "2016-01-02"
+++

もうお正月も二日目。
+++
date = "2016-01-07"
+++

七草粥で健康に。
...
+++
date = "2016-03-05"
+++

そんなこんなで3月になりました。

次に作成したコンテンツの一覧ページを作成しましょう。更新情報を保存したwhats-newフォルダに対応させてレイアウトを作成します。
<html>
<body>
<p>更新情報の一覧:</p>
{{ range .Data.Pages }}
  <p>{{ .Date.Format "02 Jan 2006"}}</p>
  <p>{{ .Content}}</p>
{{ end }}
</body>
</html>

hugoを実行してレンダリングすると以下のようなページが作成されます。
<html>
<body>
<p>更新情報の一覧:</p>
<p>01 Jan 2016</p>
<p>あけましておめでとうございます!</p>
<p>02 Jan 2016</p>
<p>もうお正月も二日目。</p>
<p>07 Jan 2016</p>
<p>七草粥で健康に。</p>

...
<p>05 Mar 2016</p>
<p>そんなこんなで3月になりました。</p>
</body>
</html>

このリストの一部だけをトップページに表示するため、以下のようにindex.htmlのレイアウトを作成します。(トップページのみコンテンツ(.mdファイル)は存在せずレイアウトのみであることに注意してください。)
記事のデータを.Data.Pagesで参照し、Sectionが"whats-new"であるもののみを抽出、そのうち、最初の3件についてrangeで繰り返し処理して出力します。
<html>
<body>
<h1>トップページ</h1>
<p>更新情報(最新3件):</p>
{{ range first 3 (where .Data.Pages "Section" "whats-new" }}
  <p>{{ .Date.Format "02 Jan 2006"}}</p>
  <p>{{ .Content}}</p>
{{ end }}
<a href="whats-new/">...more</a>
</body>
</html>
レンダリングされたトップページは以下のようになり、更新情報の最初の3件が出力されました。なお、ここで最初の、としていますが、記事の順番は記事に指定されたdate、weight、ファイル名などによって決まりますので、希望する順番になるように適切にこれらを設定してください(通常はdateを設定しておけば、新しいものから順に並ぶ)。
<html>
<body>
<h1>トップページ</h1>
<p>更新情報(最新3件):</p>
<p>01 Jan 2016</p>
<p>あけましておめでとうございます!</p>
<p>02 Jan 2016</p>
<p>もうお正月も二日目。</p>
<p>07 Jan 2016</p>
<p>七草粥で健康に。</p>
<a href="whats-new/">...more</a>
</body>
</html>

No comments :

Post a Comment