NanocでFont Awesomeを使う

基本的にはファイルを設置するだけなのだが、名前がほぼ同じで拡張子だけ違うファイルがあるので、単にcontent以下に突っ込むとサイトのコンパイル時にエラーになる。identifierがかぶってしまうため。

解決策としてはStaticデータソースを使えば良い。

ファイルの準備

サイトを作るところから整理してみる。
Font Awesomeのファイルは~/Download以下に落としてきて解凍してあるという前提で。

$ nanoc create-site nanoc-with-font-awesome-sample
$ cd nanoc-with-font-awesome-sample
$ mkdir static
$ cp -r ~/Download/font-awesome/css/ static
$ cp -r ~/Download/font-awesome/font/ static

contentの下ではなく同じ階層に作るのがミソ。
最初contentの下に作って少しはまってしまった。

nanoc.yamlの編集

古いNanocだとconfig.yamlだったファイル。どちらの名前でも問題ない。

data_sourcesにstaticの設定を追加する。

data_sources:
  -
    type: static
    items_root: /
    allow_periods_in_identifiers: true

ここでおもむろにコンパイル。

$ nanoc

      create  [0.00s]  output/css/font-awesome-ie7.css.css
      create  [0.00s]  output/css/font-awesome-ie7.min.css.css
      create  [0.00s]  output/css/font-awesome.css.css
      create  [0.00s]  output/css/font-awesome.min.css.css
      create  [0.00s]  output/font/fontawesome-webfont.eot.eot
      create  [0.00s]  output/font/fontawesome-webfont.svg.svg
      create  [0.00s]  output/font/fontawesome-webfont.ttf.ttf
      create  [0.00s]  output/font/fontawesome-webfont.woff.woff
      create  [0.00s]  output/font/FontAwesome.otf.otf

なんということでしょう。拡張子が二重になってしまいました。
これも若干はまったところなので記録しておく。

Rulesの編集

上記の問題に関してはRulesに以下の行を追加すればOK。

route %r{/(font|css)/} do item.identifier.chop; end

これを指定しておかないと

route '*' do
  if item.binary?
    # Write item with identifier /foo/ to /foo.ext
    item.identifier.chop + '.' + item[:extension]
  else
    # Write item with identifier /foo/ to /foo/index.html
    item.identifier + 'index.html'
  end
end

で処理されるので拡張子が二重になってしまうというわけでありまして。

動作確認

layout/default.htmlを編集

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./css/font-awesome.css">

hrefはローカルで確認するために相対パスで指定しているが、実運用では通用しないので注意。

あとはcontent/index.htmlを編集して適当にアイコンを埋め込んでみるなど。

サンプル

akahigeg/nanoc-with-font-awesome-sample – GitHub

nanoc create-siteしてからの変更点はこれだけ

2013/08/02 サンプルにGuard::NanocとPowの設定を追加

Guard::NanocとPowで快適Nanoc生活

スタイルシートのパスを変更しているのでご注意ください。

参考