[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>

結果

/img/article/2019/02/19/02.png
古い順で投稿一覧を表示

これはドキュメントの方にも書いてある方法なので、合わせて確認しておくといいと思います。

reverseではなくreversedであることに注意です。

Liquidのドキュメントは Iteration のところに記載されています。

おわりに

今回は、Jekyllで投稿一覧を表示してみる、という内容でした。

これができると、サイドバーに最近の投稿を表示することもできそうです。

投稿一覧にページングなどもつけると、見た目がいい感じに見えてきますね。

シンプルなものであればプラグインを利用することで実装できるので、試してみてください。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事