[Middleman 3]初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

今回はMiddleman-blogにカテゴリやシリーズなどのカスタムコレクションを作ってみます。カスタムコレクションを作る機能はMiddleman-blogに用意されています。

コレクション設定

まずはカスタムコレクションページを作るための設定をconfig.rbに追記します。

activate :blog do |config|
  #...
  # Enable collection
  config.custom_collections = {
    category: {
      link: '/categories/{category}/index.html',
      template: 'category.html'
    },
    series: {
      link: '/series/{series}/index.html',
      template: 'series.html'
    }
  }
end

YAML FrontMatter

YAML FrontMatterで指定するカスタムコレクションは複数指定できますが、値は1つだけです。

---
category: <categoryName>
series: <seriesName>
---

カスタムコレクションテンプレート

カスタムコレクションテンプレートはその他のテンプレート同様にpage_articlesを使って一覧を取得できます。Middleman-blog v3.5.3ではカスタムコレクションページのページングができません。v3.6.0で使えるようになるようです。

とりあえず一覧を表示するテンプレートにしておきます。

category.html.erb

<h1><%= category %></h1>

<% page_articles.each_with_index do |article, i| %>
<div>
  <h2><%= link_to article.title, article %></h2>
  <p><%= strip_tags article.summary(100) %></p>
  <p><time date="<%= article.date.strftime('%Y-%m-%d') %>"><%= article.date.strftime('%Y-%m-%d') %></time></p>
</div>
<% end %>

series.html.erb

<h1><%= series %></h1>

<% page_articles.each_with_index do |article, i| %>
<div>
  <h2><%= link_to article.title, article %></h2>
  <p><%= strip_tags article.summary(100) %></p>
  <p><time date="<%= article.date.strftime('%Y-%m-%d') %>"><%= article.date.strftime('%Y-%m-%d') %></time></p>
</div>
<% end %>

リストを取得するヘルパーの作成

カテゴリやシリーズの一覧を取得するヘルパーを作ります。このヘルパーはすべてのコレクションで共用できます。

helpers do
def get_taxonomies(slug = 'category')
    list = []
    blog.articles.select{ |i| i.data[slug].present? }.each do |article|
      list = list.push article.data[slug]
    end

    return list.inject(Hash.new(0)){|hash, a| hash[a] += 1; hash}
  end
end

第一引数にコレクション名を指定することで全記事に指定されているカテゴリと記事数を持ったハッシュを取得できます。

<h2>カテゴリ</h2>
<% get_taxonomies('category').each do |category, count| %>
  <li class="list-item">
    <% link_to category_path(category) do %>
    <%= category %> (<%= count %>)
    <% end %>
  </li>
<% end %>

<h2>シリーズ</h2>
<% get_taxonomies('series').each do |series, count| %>
  <li class="list-item">
    <% link_to series_path(series) do %>
    <%= series %> (<%= count %>)
    <% end %>
  </li>
<% end %>

これでシンプルではありますがカスタムコレクションを作ることができました。

参考

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス

2015-04-21
Middleman 3, AngularJS 1

初めての Middleman シリーズ初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法