Middlemanでグローバルナビゲーションの今見ているページへのリンクにcurrentクラスをつける

Middleman便利ですね。

Webサイトといえばナビゲーションとかメニューが普通だとありますよね。 もちろんpartialなりlayoutなりに書いていると思うのですが、こうやって共通化してしまうと、一個だけ困る事があります。
まぁ、タイトルから推測がつくでしょう。 今みているページを示すナビゲーション要素を装飾したいときに困るんですよね。

こんな感じ。今Homeにいるから下にバーが出てる、という例。

ここで「しょうがない、メニューぜんぶ個別のページに書くか・・・」なんて考えるのはちょっと早い！ 何とかするのが技術者、と思うわけです。

というわけで以下ハウツー。

本題

ヘルパーを追加する

まず、以下のヘルパーを追加しておきます。
"current_page?" はRailsなんかだとUrlHelperに含まれているのですが、Middlemanにはないので、適当に作ってしまいます。

# config.rb
require "lib/helpers"
helpers Helpers

# lib/helpers.rb
module Helpers

  def current_page?(path)
    current_page.url == path
  end

  def nav_link(link_text, link_path)
    class_name = current_page?(link_path) ? 'current' : ''

    content_tag(:li, :class => class_name) do
      link_to link_text, link_path
    end
  end
end

directory_indexes をオンに

以下のコードも適当な位置に追加しておいてください。

#config.rb

activate :directory_indexes

ナビゲーションのパーシャルを定義

僕はslim派ですが、別に何でも良いと思います。

/_nav.slim
ul
  = nav_link "Home", '/'
  = nav_link "Profile", '/profile/'
  = nav_link "Works", '/works/'
  = nav_link "Links", '/links/'
  = nav_link "Contact", '/contact/'

ここで、先のcurrent_page? の実装が甘いので、最後のスラッシュが必要になります。
directory_indexes がオフな環境でどうするかは調べていないのですが、適当にcurrent_page.url なり current_page.path なりを見て検査すれば何とかなると思います。

参考

• navigation - Best way to add "current" class to nav in Rails 3 - Stack Overflow