[Jekyll] トップページに投稿一覧を表示する

Nプログラマ(@Nprog128)です。

今回は、Jekyllでトップページに投稿一覧を表示する内容を備忘録として残しておきます。

なプ

htmlの構造はなるべくシンプルにしています。

概要

目標

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

環境

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

投稿一覧の表示を作っていく

それでは投稿一覧を表示できるようにしていきます。

ディレクトリの構造

1./
2├── _posts
3└── index.html

実装前の状態

index.html(トップページ)

index.html(トップページ) コードを開く

index.html(トップページ)

 1---
 2---
 3<!DOCTYPE html>
 4<html lang="ja">
 5<head>
 6  <meta charset="UTF-8">
 7  <title>タイトル</title>
 8</head>
 9<body>
10  <h1>index</h1>
11</body>
12</html>

結果

/img/article/2019/02/19/01.png — 投稿一覧を表示していない状態

実装 (投稿一覧を表示する)

ここから投稿一覧を表示していくようにします。

_postsディレクトリに記事ファイルが入っていると、そのリストがsite.postsに入ってきます。

これを使ってループでクルクルと回しながら一覧を表示します。

記事の並び順は一番最新のものから表示されます。

事前にサンプルの記事を3つほど_postsディレクトリに作成しておきましょう。

一覧に表示するだけなので、中身は空にしておきます。

なプ

touchコマンドでポンポンっと作ってしまいます。

_postsにサンプル記事を作成

1\$ touch _posts/2018-01-01-sample01.html
2\$ touch _posts/2018-01-02-sample02.html
3\$ touch _posts/2018-01-03-sample03.html

index.html

先程のファイルに見出し2を作り、その中に投稿一覧を表示させています。

なプ

記事の中身が空なので、ファイル名からタイトルが自動生成されています。

index.html

index.html コードを開く

index.html

 1---
 2---
 3<!DOCTYPE html>
 4<html lang="ja">
 5<head>
 6  <meta charset="UTF-8">
 7  <title>タイトル</title>
 8</head>
 9<body>
10  <h1>index</h1>
11  <h2>posts</h2>
12    <ul>
13      {% for post in site.posts %}
14      <li><a href="{{ post.url}}"> {{ post.title }}</a></li>
15      {% endfor %}
16    </ul>
17</body>
18</html>

結果

/img/article/2019/02/19/02.png — 投稿一覧を表示したもの

投稿一覧が最新の日付から表示されていますね。

なプ

ついでに古い順からの表示もやってみます。

古い順で表示させる

記事の一覧を最新ではなく古い順で表示したい場合もあるかと思います。

そういうときはreversedを使うと、逆順で表示できるようになります。

ほぼ同じ内容ですので、ul要素の部分だけにします。

コード (index.html ul要素の部分)

index.html コードを開く

index.html

1<ul>
2  {% for post in site.posts reversed %} <!-- ここにreversedを追加 -->
3    <li><a href="{{ post.url }}"> {{ post.title }}</a></li>
4  {% endfor %}
5</ul>