Middleman で Slim をサクッと使えるようにする

Middleman の build と、Movable Type の publish ってなんだかシンパシーを感じてしまいますね。ところで、静的サイトジェネレーターの Middleman *1 で Rails で使われるとてもシンプルなテンプレートエンジン Slim *2 をサクっと使う方法をまとめました。

導入編

もうすでに project をつくってしまった状態で Slim 化する想定です。なお、様々なプロジェクトテンプレートが用意されており、プロジェクト作成時にそれを使うのもよいでしょう。

$ gem install middleman
$ middleman init PROJECT_NAME
$ cd PROJECT_NAME
$ bundle exec middleman s

Slim の導入

Gemfile を編集

gem "slim"

Bundle / Bundle Install

$ bundle

Config.ru を編集

Slim::Engine.set_default_options :pretty => true

Slim::Engine.set_default_options :shortcut => {
  '#' => {:tag => 'div', :attr => 'id'},
  '.' => {:tag => 'div', :attr => 'class'},
  '&' => {:tag => 'input', :attr => 'type'}
}

Slim ファイルの作成と確認

適当な拡張子の slim ファイル (aaaaa.html.slim) を /source 以下に作ってみます。

.welcome
  h1 Middleman is Watching
  p.doc
    = link_to "Read Online Documentation", "http://middlemanapp.com/"

ただそのまま http://localhost:4567/aaaaaa.html にアクセスしても設定がロードされていないので Not Found になります。そこで middleman server を再起動すれば Slim で記述された内容がレンダリングされます。

Ctrl-C 
$ bundle exec middleman s

デフォルトの application layout を Slim 化してみる

Middleman で用意している layout.erb (source/layouts/layout.slim) を Slim 化したサンプルを下記に貼り付けておきますので、ご参考にどうぞ。

html
  head
    meta charset="utf-8"
    /! Always force latest IE rendering engine or request Chrome Frame
    meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"
    /! Use title if it's in the page YAML frontmatter
    title= current_page.data.title
    = stylesheet_link_tag "normalize", "all"
    = javascript_include_tag  "all"
  body class= page_classes
    = yield

*1:http://middlemanapp.com/jp/

*2: Haml よりも少し高速に動作し、より少ない文字量でマークアップが可能 http://slim-lang.com/