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の設定を追加
スタイルシートのパスを変更しているのでご注意ください。
