Hugo初心者がテーマを自作した記録 最新記事の表示

2019-07-19 |
2019-08-09

The Hugo Gopher is designed by Renée French

今回はトップページに投稿記事全体の最新記事を表示する方法について解説していきます。

普通に最新記事を表示するだけなら、記事ページのコレクションを参照してそこから新しいのをいくつか表示すればいいんじゃ?

といった感じに簡単に考えていたのですが、実際にやってみると固定ページが混ざるという落とし穴がありました。

そこで今回は、記事ページだけを表示するようにひと工夫します。

投稿記事全体の最新記事の表示

投稿記事全体の中で、投稿日が新しいもののリンクを5件表示するようにしてみようと思います。

私はセクション機能を用いて記事ページとそれ以外のページ(aboutなどの固定ページ)を分けて管理しています。

私のcontentディレクトリ以下の構成はこんな感じになっています。

記事ページはcontent/postsに、固定ページはcontent/pagesにて管理しています。

├── content
│   ├── pages
│   │   ├── _index.md
│   │   └── about.md
│   └── posts
│       ├── _index.md
│       ├── book
│       │   └── _index.md
│       ├── life
│       │   ├── 2019-06-20-first-entry.md
│       │   ├── 2019-06-23-ap-pass.md
│       │   └── _index.md
│       ├── money
│       │   └── _index.md
│       ├── programming
│       │   ├── _index.md
│       │   └── hugo
│       │       ├── 2019-07-06-hugo-install.md
│       │       ├── 2019-07-08-create-hugo-theme.md
│       │       ├── 2019-07-11-create-hugo-theme-nav.md
│       │       ├── 2019-07-17-create-hugo-theme-breadcrumb.md
│       │       ├── 2019-07-19-create-hugo-theme-latest-area.md
│       │       └── _index.md
│       └── study
│           └── _index.md

もし、記事ページと固定ページを同じディレクトリで管理している場合は、新しく固定ページ用にディレクトリを作成して、固定ページはそこに移してもらったほうが良いと思います。

同じディレクトリ内に保管してあったとしても、markdownファイルのfront matterに設定を書くことで、記事ページと固定ページの見分けが付くようにできますが、管理が面倒に感じましたので、今回はその方法については触れません。

それでは、投稿記事全体から最新記事5件分のリンクを表示していきます。

次のコードによって最新記事5件分のリンクを表示することができると思います。

<ul>
{{ range fitst 5 (where .Site.RegularPages.ByDate.Reverse "Section" "posts") }}
<li>
  <a href="{{ .Permalink }}">{{ .Title }}</a>
</li>
{{ end }}
</ul>

私はpostsセクションに投稿記事を保存しているので、postsセクションに所属しているRegularPagesをまず参照します。

ここは各自のセクション名に置き換えて利用していただけたらと思います。

それでは簡単に解説してみたいと思います。

first 5

この書き方でなんとなく想像がつくと思いますが、rangeで参照したコレクションについて、実際に処理を行うのは最初の5個だけです。

今回は最新記事を5件表示するので5にしていますが、5を10にすれば10件表示するようになります。

(where ~ “Section” “posts”)

まず、whereを書くことで条件に一致するものを返すようにします。

SQLでもwhereを書くことで条件節みたいなのを作れますので、それに似た感じです。

どこのコレクションの要素上で処理をするのかを指定している感じですね。

また、"Section" "posts"によって、postsセクションに所属している記事ページを対象としています。

これについては、

Section Page Templates | Hugo

ここを参考にしていただくと、各ページにはkindと言われる属性があります。

そのkindの中にsectionがあり、それを利用して記事ページを絞ります。

ちょっと直感的じゃないのは、kindsectionはその記事ページが所属するセクションではなくて、一番上のセクションを返してくれるみたいです。

つまり、この記事はhugoセクションに含まれていますが、一番上のセクションはpostsですので、このページのkindで参照するsectionpostsが返されるような感じです。

私の場合はpostsセクション以下で投稿記事を管理しているので、このように指定することで投稿記事のセクションにアクセスできます。

先程も触れましたが、このセクション名のところは投稿記事を管理している一番上のセクション名を指定するように各自の設定を反映してください。

この部分は勉強不足でしっかりと説明できていませんが、このようなちょっとしたハマりポイントがあります。

.Site.RegularPages.ByDate.Reverse

これについては、.Site.RegularPagesでHugoのリストページなどを除いたページのコレクションを参照します。

次に、.ByDateによって記事の作成日について昇順で並び替えます。

最新記事から表示したいので、.Reverseによって順番を逆さにして降順に並び替えます。

このままだと、固定ページも含んだコレクションになってしまうので、先ほど触れたwhereをつかって記事ページのみに絞っていく感じです。

この結果として、Hugoにあるページのうち、記事ページだけを対象に作成日について降順で最初の5個だけについてリンクを出力するという操作を行うことができます。

おわりに

Hugoで最新記事を出力しようとしたときに、固定ページを出力しないようにセクション機能を利用して最新記事のリンクを出力するようにしました。

私のブログのトップページには、投稿記事全体の最新記事と、各カテゴリの最新記事を表示するようにしていますので、次回は各カテゴリの最新記事を表示するやり方を解説しようと思います。

参考文献

Section Page Templates | Hugo

Please share, if you like this.