最初にインストールした Jekyll プラグイン

Jekyll はデフォルトでは記事と単体ページを生成することができるが、たとえばカテゴリの一覧などは自分で用意する必要がある。

Jekyll はプラグイン機構を備えており、先人達がいろいろなプラグインを公開している。 本サイトでもいくつかのプラグインを導入した。

目次

プラグインのインストール

Jekyll のソースディレクトリ配下に _plugins が存在しなければ作成する。

プラグインのインストールは、ファイル(*.rb)を _plugins ディレクトリに置くだけだ。

アーカイブページ

Archive generator plugin for jekyll をインストールした。 このプラグインは後述する Jekyll Plugins - Recursive Design をベースにしている。

アーカイブページのレイアウトとアーカイブ一覧ページは自分で用意する必要がある。 また、このプラグインは Jekyll の paginator でページングするので、_config.ymlpaginate: 10 などと記述してページングを有効にした。

アーカイブページのレイアウト(_layouts/archive_index.html)は以下のようにした。

---
layout: default
---

<ul class="breadcrumbs">
  <li><a href="/archives/"><span class="icon" data-icon="R"></span> Archives</a></li>
  <li>{{ page.title }}</li>
</ul>
<ul class="alt">
{% for post in paginator.posts %}
  <li>
    <h4 class="article-title"><a href="{{post.url}}">{{post.title}}</a></h4>
    <div class="article-metainfo">
      <span class="article-date"><span class="icon" data-icon="6"></span>
        {{post.date | date: "%Y-%m-%d"}}</span>
    {% if post.categories and post.categories != empty %}
      <span class="article-category"><span class="icon" data-icon=","></span>
        {{ post.categories | join: ', '}}</span>
    {% endif %}
    {% if post.tags and post.tags != empty %}
      <span class="article-tags"><span class="icon" data-icon="B"></span>
        {{post.tags | join: ', '}}</span>
    {% endif %}
    </div>
  </li>
{% endfor %}
</ul>

<p class="navigation">
  {% if paginator.next_page %}
    <span class="alignleft"><a href="/archives/{{ page.year}}/{{ page.month }}/page/{{ paginator.next_page }}/">« Previous Entries</a></span>
  {% endif %}

  {% if paginator.previous_page %}
    {% if paginator.previous_page > 1 %}
      <span class="alignright"><a href="/archives/{{ page.year}}/{{ page.month }}/page/{{ paginator.previous_page }}/">Next Entries »</a></span>
    {% else %}
      <span class="alignright"><a href="/archives/{{ page.year}}/{{ page.month }}/">Next Entries »</a></span>
    {% endif %}
  {% endif %}
</p>

アーカイブ一覧ページ(archives/index.html)は Jekyll archives grouped by date を参考にして以下のようにした。

---
layout: default
title: Archives
---
<h2><span class="icon large" data-icon="R"></span> Archives</h2>
{% assign count = 1 %}
<ul class="alt">
{% for post in site.posts %}
  {% unless post.next %}
    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
    {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
    <h3>{{year}}</h3>
  {% else %}
    {% capture month %}{{ post.date | date: '%m' }}{% endcapture %}
    {% capture nmonth %}{{ post.next.date | date: '%m' }}{% endcapture %}
    {% if month != nmonth %}
    <li><a href="/archives/{{year}}/{{nmonth}}/">{{nmonth}}</a>({{count}})</li>
    {% assign count = 1 %}
    {% else %}
    {% capture count %}{{ count | plus:1 }}{% endcapture %}
    {% endif %}
    {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
    {% capture nyear %}{{ post.next.date | date: '%Y' }}{% endcapture %}
    {% if year != nyear %}
    <h3>{{ post.date | date: '%Y' }}</h3>
    {% endif %}
  {% endunless %}
{% endfor %}
    <li><a href="/archives/{{year}}/{{month}}/">{{month}}</a>({{count}})</li>
</ul>

どうもすっきりしないがとりあえずこれで。

カテゴリページ

Jekyll Plugins - Recursive Designgenerate_categories.rb をインストールした。

このプラグインもレイアウトとカテゴリ一覧ページを用意する必要がある。

カテゴリのレイアウト(_layouts/category_index.html)は以下のようにした。

---
layout: default
---

<ul class="breadcrumbs">
  <li><a href="/categories/"><span class="icon" data-icon=","></span> Categories</a></li>
  <li>{{ page.category }}</li>
</ul>
<ul class="alt">
{% for post in site.categories[page.category] %}
  <li>
    <h4 class="article-title"><a href="{{post.url}}">{{post.title}}</a></h4>
    <div class="article-metainfo">
      <span class="article-date"><span class="icon" data-icon="6"></span>
        {{post.date | date: "%Y-%m-%d"}}</span>
    {% if post.categories and post.categories != empty %}
      <span class="article-category"><span class="icon" data-icon=","></span>
        {{ post.categories | join: ', '}}</span>
    {% endif %}
    {% if post.tags and post.tags != empty %}
      <span class="article-tags"><span class="icon" data-icon="B"></span>
        {{post.tags | join: ', '}}</span>
    {% endif %}
    </div>
  </li>
{% endfor %}
</ul>

カテゴリ一覧ページ(categories/index.html)は以下のようにした。

---
layout: default
title: Categories
---
<h2 class="category-title"><span class="icon large" data-icon=","></span> Categories</h2>
<ul id="category-list" class="alt">
{% for category in site.categories %}
  <li><a href="/categories/{{category[0]}}/">{{category[0]}}</a>({{category[1].size}})</li>
{% endfor %}
</ul>

ちなみに、Jekyll Plugins - Recursive Design からは generate_sitemap.rb もインストールした。

タグページ

タグページについてはいくつか試してみたが以下のような状況で、 結局 Jekyll Plugins - Recursive Designgenerate_categories.rb をタグ向けに修正したものを使用している。

  • Jekyll tag cloud / tag pages plugin

    ページクラスに destination というメソッドがないというエラーになったので、 Page クラスの destination をコピーして、値がない @dir をパスに入れないように修正したら動作した。

    が、タグページのデザインをカスタマイズできない。 カテゴリページのプラグインみたいな設計がいいな。

  • pattex/jekyll-tagging · GitHub

    うまく動作しない…orz

こちらもレイアウトとタグ一覧ページを用意する必要がある。

レイアウト(_layouts/tag_index.html) は以下のようにした。

---
layout: default
---

<ul class="breadcrumbs">
  <li><a href="/tags/"><span class="icon" data-icon="B"></span> Tags</a></li>
  <li>{{ page.tag }}</li>
</ul>
<ul class="alt">
{% for post in site.tags[page.tag] %}
  <li>
    <h4 class="article-title"><a href="{{post.url}}">{{post.title}}</a></h4>
    <div class="article-metainfo">
      <span class="article-date"><span class="icon" data-icon="6"></span>
        {{post.date | date: "%Y-%m-%d"}}</span>
    {% if post.categories and post.categories != empty %}
      <span class="article-category"><span class="icon" data-icon=","></span>
        {{ post.categories | join: ', '}}</span>
    {% endif %}
    {% if post.tags and post.tags != empty %}
      <span class="article-tags"><span class="icon" data-icon="B"></span>
        {{post.tags | join: ', '}}</span>
    {% endif %}
    </div>
  </li>
{% endfor %}
</ul>

タグ一覧ページ(tags/index.html)は以下のようにした。

---
layout: default
title: Tags
---
<h2 class="tags-title"><span class="icon large" data-icon="B"></span> Tags</h2>
<ul id="tag-list" class="alt">
{% for tags in site.tags %}
<li><a href="/tags/{{tags[0]}}/">{{tags[0]}}</a>({{tags[1].size}})</li>
{% endfor %}
</ul>