Jekyllのテーマを自作する 基本編 – 第6回 – トップページに記事一覧を作成する

今回は、お待ちかねの記事一覧の作成です。ページネーションの作成については次回に紹介します。

Jekyllのテーマを自作する 基本編 記事一覧

適当にサンプル投稿を10記事くらい作成する

表示確認のため、サンプル投稿をあらかじめ作成しておきましょう。

$ touch 2017-02-22-sample.md 2017-02-21-sample.md 以下続く

全ての記事一覧を取得する

トップページのファイル「index.html」を開きます。

これを以下のように変更します。for文を使ったループです。

{{ site.posts }} で記事一覧を取得できます。for文を使って1記事ずつのデータを取り出してループしていきます。

$ jekyll serve

してプレビューしてみましょう。

記事一覧の表示数を指定する

上記の方法では全ての記事を取得しますが、表示数を指定する場合は、以下のように書きます。

{% for post in site.posts limit:5 %}

スタイルを書く

後は前回までに作成したスタイルシートに追記します。

以上、投稿記事の一覧作成でした。次回はページネーションを作成します。