[Jekyll] トップページに投稿一覧を表示する
もくじ
Nプログラマ(@Nprog128)です。
今回は、Jekyllでトップページに投稿一覧を表示する内容を備忘録として残しておきます。
概要
目標
- トップページに投稿一覧を表示する
環境
- Mac OSX High Sierra
- Jekyllの環境 (環境構築の記事は こちら )
投稿一覧の表示を作っていく
それでは投稿一覧を表示できるようにしていきます。
ディレクトリの構造
1./
2├── _posts
3└── 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>
結果
実装 (投稿一覧を表示する)
ここから投稿一覧を表示していくようにします。
_postsディレクトリに記事ファイルが入っていると、そのリストがsite.postsに入ってきます。
これを使ってループでクルクルと回しながら一覧を表示します。
記事の並び順は一番最新のものから表示されます。
事前にサンプルの記事を3つほど_postsディレクトリに作成しておきましょう。
一覧に表示するだけなので、中身は空にしておきます。
_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 コードを開く
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>
結果
投稿一覧が最新の日付から表示されていますね。
古い順で表示させる
記事の一覧を最新ではなく古い順で表示したい場合もあるかと思います。
そういうときはreversedを使うと、逆順で表示できるようになります。
ほぼ同じ内容ですので、ul要素の部分だけにします。
コード (index.html ul要素の部分)
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>
結果
これはドキュメントの方にも書いてある方法なので、合わせて確認しておくといいと思います。
reverseではなくreversedであることに注意です。
Liquidのドキュメントは Iteration のところに記載されています。
おわりに
今回は、Jekyllで投稿一覧を表示してみる、という内容でした。
これができると、サイドバーに最近の投稿を表示することもできそうです。
投稿一覧にページングなどもつけると、見た目がいい感じに見えてきますね。
シンプルなものであればプラグインを利用することで実装できるので、試してみてください。
それでは、このへんで。
バイナリー！
＼ ちょっとお買い物 ／
