[Jekyll] トップページに「最近の投稿」を表示させる

Nプログラマです。

今回の内容は、前回の記事の延長でトップページに最近の投稿一覧を表示する内容を備忘録として残します。

Liquidの変数を使うのですが、変数宣言と変数への加算方法でハマったりして、最終的にforloop.indexに落ち着きました。

概要
1. 目標
2. 環境
実装前の状態
1. ディレクトリの構造
2. index.html
実装（最近の投稿一覧を表示）
おわりに

概要

目標

トップページに最近の投稿一覧を表示する

環境

Mac OSX High Sierra
Jekyllの環境 (開発環境の記事はこちら)

実装前の状態

ディレクトリの構造

./
├── _config.yml
├── _posts
└── index.html

index.html

h1タグで「最近の投稿」という部分を作り、その下にh2のタグで最近の投稿一覧を表示するための実装を追加していきます。

---
---
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<h1>最近の投稿一覧</h1>
<!-- ココにh2タグで最近の投稿一覧を表示していく -->
</body>
</html>

実装（最近の投稿一覧を表示）

今回は、最近の投稿一覧3件分を表示するようにします。

_postsへサンプル記事の作成

前回と同様に、touchコマンドで作っていきます。

空の投稿をtouchコマンドで作る

touch _posts/2018-01-01-sample01.html
touch _posts/2018-01-02-sample02.html
touch _posts/2018-01-03-sample03.html
touch _posts/2018-01-04-sample04.html
touch _posts/2018-01-05-sample05.html

作成後のディレクトリ構造

./
├── _config.yml
├── _posts
│   ├── 2018-01-01-sample01.html
│   ├── 2018-01-02-sample02.html
│   ├── 2018-01-03-sample03.html
│   ├── 2018-01-04-sample04.html
│   ├── 2018-01-05-sample05.html
└── index.html

今回は2通りの方法で実装していきます。

方法1: forループ内のloop変数を使う

for文の中では、forloopオブジェクトを使うことができるみたいで、これにループ中に使える情報が詰まっています。

Jekyllのドキュメントの中にFor loopsという項目があり、その中にcertail properties availableのリンク先に書いてありました。
(Convert an HTML site to JekyllのFor loopsより引用)

詳しい使い方は、ドキュメントの方でご確認ください。

ここでは、forloop.index0を使います。これは0から始まるループインデックスです。1から始まるのは、forloop.indexです。

最初forloop.indexを使っていて、インデックスが想定よりひとつズレていたので、最近の投稿が3つではなく2つしか表示されなくて苦労しましたｗ

コード

<h2>一覧: forloop.indexを使って表示</h2>
<ul>
  {% for post in site.posts %}
    {% if forloop.index0 > 2 %}
      {% break %}
    {% else %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endif %}
  {% endfor %}
</ul>

コード内ではマジックナンバーを使っていますが、configに設定してそこから読み出したほうがいいかもしれませんね。

方法2: 一時変数を使う

最初はこの実装だったけど、forloop変数が使えることを知ったので書き直しました。

使う場所は限られているので、お好みで選べばいいと思います。

コード

<h2>一覧: 一時変数を使って表示</h2>
<ul>
  {% assign count = 0 %}
  {% for post in site.posts %}
    {% if count == 3 %}
      {% break %}
    {% else %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endif %}
    {% assign count = count | plus:1 %}
  {% endfor %}
</ul>