Jekyll Plugin パンくずリストを作ろう

パンくずリストは記事ごとに異なるものになるので、Jekyllのジェネレータプラグインで作ります。プラグインについてはJekyll - Pluginを作るも参照してください。

カテゴリーを使ったパンくずリストを作る

プラグインの中でPostオブジェクト.data["breadcrumbs"]にパンくずリストのHTMLを作り、表示させたい場所(post.html)でその値を取り出します。

さて、各ポストのYAML front matterに記述したカテゴリーがあります。

1
2
3
4
5
6
7

---
layout: post
title: Jekyll - Pluginを作る
date: 2015-04-20
    ...
categories : [Ruby, Jekyll_Tips]
---

そのカテゴリーと日付でディレクトリーが作られHTMLファイルの場所を表すURLとなります。上の例では、ディレクトリー構造は

1

_site/ruby/jekyll_tips/2015/04/20/index.html

となり、URLは

1

/ruby/jekyll_tips/2015/04/20/日付と拡張子を除いたファイル名

となるわけです。そのURLはPostオブジェクト.urlで取り出すことができます。この場合作りたいパンくずリストは

1

Ruby > Jekyll_Tips > Jekyll - Pluginを作る

の形で、カテゴリー名のところは「categories.html」の該当カテゴリーへのリンクになってほしいです。「categories.html」の該当カテゴリーの個所には別のプラグインでidを付ける(今回はそのプラグインの話はしません)ことにします。

そこで、URLを使うのではなく、YAML front matter に記述するカテゴリーを取得しそれを使ってパンくずリストを作ることにしましょう。カテゴリーとタイトルはPostオブジェクト.categoriesとPostオブジェクト.titleで取得できます。

File:categotry_breadcrumbs.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

module Jekyll
  class CategotryBreadcrumbs <  Generator
    def generate(site)
      site.posts.each do |post|
        cats = post.categories

        html = "<ol class='breadcrumbs'>"
        cats.each_with_index do |parts_i, i|
          html += "<li>"
          text = parts_i
          id = cats.slice(0, i + 1).join('-').downcase
          href = "/categories.html##{id}"
          html +=  (i < cats.length - 1) ?  "<a href='#{href}'>#{text}</a>" : post.title
          html += "</li>"
        end
        html += "</ol>"

        post.data["breadcrumbs"] = html
      end
    end
  end
end

18行目でpost.data["breadcrumbs"]にパンくずリストのhtmlを入れました。それを取り出すのには、post.htmlに {{ page.breadcrumbs }} を埋め込みます。

File:post.html

1
2
3
4
5
6

<div class="page-header">
  {{ page.breadcrumbs }}
  <h1>{{ page.title }}  ...  </h1>
</div>

     ...

これで完成です。