totorajの開発日記

僕がなんかメモる

Jekyllでサムネイル画像を実装する

環境

ファイル構成

いろいろと端折ってます。

この記事を読む人はきっとすでにJekyllを使っているはずなのでなんとなく流してください。

site/
 ├─ _posts/ ← いつもの記事置き場
 ├─ assets/
 │   └─ thumbs/ ← ここに記事のサムネ画像を入れておく
 │       └─ default.png ← デフォルトのサムネ
 └─ index.html ← これに記事一覧を表示する

手順

記事ファイル

まず記事ファイル(_postsに入れている奴)のヘッダーにサムネ画像のURLを変数として定義しておきます。

記事ファイルが2016-09-20-demo.mdだとすると、サムネ画像は2016-09-20-demo.pngなどにしておくと管理しやすと思います。

---
title: "記事のタイトル"
thumb: /assets/thumbs/2016-09-20-demo.png
---

ここに本文

表示する

index.htmlに記事ファイルで登録したサムネ画像を表示するソースコードを書きます。

記事ファイルのヘッダーで定義した変数は元からあるpost.titleなどの変数と同じように扱うことができます。

ですが変数がなかったときにエラーが出てしまうので、その回避をしておきます。

(このソースコードは一例ですのでサムネ画像表示部分以外はご自分の環境に合わせてください。)

---
title: 記事一覧
---

{% for post in site.posts %}
<article>
    <header class="post-head">
        <!-- 日付 -->
        <time>{{ post.date | date: "%F" }}</time>
        <!-- タイトル -->
        <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
        
        <!-- サムネイル -->
        {% if post.thumb %}
        <!-- 変数が存在したら定義されているサムネ -->
        <img src="{{ post.thumb }}">
        {% else %}
        <!-- 変数が存在しなければデフォルトのサムネ -->
        <img src="/assets/thumbs/default.png">
        {% endif %}
        
    </header>
</article>
{% endfor %}

おわりに

全体的に説明が雑い。

Jekyll便利だからぜひ使ってみてください。