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

Jekyll Jekyll

Nプログラマです。

今回は、トップページに投稿一覧を表示する内容を備忘録として残しておきます。
htmlの構造はなるべくシンプルにしています。

概要

目標

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

環境

投稿一覧の表示

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

ディレクトリの構造

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

実装前の状態

index.html (トップページ)

---
---
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
  <h1>index</h1>
  </body>
</html>

結果

cap-01
投稿一覧を表示してない状態

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

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

_postsディレクトリに記事ファイルが入っていると、そのリストがsite.postsに入ってきますので、それをループで表示します。
記事の並び順は一番最新のものから表示されます。

事前にサンプルの記事を3つほど_postsディレクトリに作成しておきましょう。
一覧に表示するだけなので、中身は空にしておきます。
touchコマンドでポンポンっと作ってしまいます。

_postsにサンプル記事を作成

touch _posts/2018-01-01-sample01.html
touch _posts/2018-01-02-sample02.html
touch _posts/2018-01-03-sample03.html

index.html

見出し2を作り、その中に投稿一覧を表示させています。
記事の中身が空なので、ファイル名からタイトルが自動生成されています。

---
---
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
  <h1>index</h1>
  <h2>posts</h2>
    <ul>
      {% for post in site.posts %}
      <li><a href="{{ post.url}}"> {{ post.title }}</a></li>
      {% endfor %}
    </ul>
  </body>
</html>

結果

cap-02
投稿一覧を表示

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

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

古い順で表示させる

記事の一覧を最新ではなく古い順で表示したい場合もあるかと思います。
そういうときはreversedを使うと、逆順で表示されるようになります。

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

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

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

結果

cap-03
古い順で投稿一覧を表示

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

reverseではなく、reversedであることに注意です。ドキュメントもIterationのところに記載されています。

Iteration
An overview of iteration or 'loop' tags in the Liquid template language.

終わりに

今回は、投稿一覧を表示してみるという内容でした。
これができると最近の投稿も作れそうです。

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

シンプルなものであればプラグインを利用することで実装できるので、試してみてください。 (ページングの記事はこちら)

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

参考

Jekyll

Posts
Blogging is baked into Jekyll. You write blog posts as text files and Jekyll provides everything you need to turn it into a blog.

Liquid

Iteration
An overview of iteration or 'loop' tags in the Liquid template language.

reversedの使い方を参考にしました。

タイトルとURLをコピーしました