004. 静的ファイルの配置と配信
サイトは公開したものの、デフォルトのイケてないデザインを画像やCSSを使って調整したいと思うでしょう。今回は静的ファイルの配置について説明します。
配置ディレクトリ
静的ファイルは share/static ディレクトリ以下に配置するルールになっています。そこに配置したファイルは /static/image.jpg と言ったURLでアクセス可能となります。share/static/img, share/static/css, share/static/jsなどとディレクトリを掘るのがお行儀が良いかも知れません。
配置した画像は以下のようにすれば、Blogエントリーから参照可能です。
なんとテンプレートに使われているXslateの記法をmdファイル内でも使えるのが無理矢理なおしゃれポイントです。uri_forを使う必要は必ずしもありませんが、ディレクトリの深さが異なる環境で動かした場合にリンクが切れたりする可能性があるので、なるべく丁寧に指定したほうが良いでしょう。
デフォルトテンプレートで使われているCSS, JSについて
デフォルトのテンプレートでは以下のライブラリが使われています。
- jQuery
- Google Code Prettify
- Bootstrap
色々めんどくさいので同梱はせずに外部リソースに直接向ける形になっています。パーソナルユースだったら十分かなと思います。BootstrapのCDNは公式じゃなかったりして若干不安もありますが、気になるようでしたら自分で適宜テンプレートを調整して下さい。
favicon.ico
ちょっとした例外として、favicon.icoはtmpl/static/favicon.ico に配置すれば'/favicon.ico' | uri_forで参照できるようになっています。
今回はここまでです。
次回の内容
静的ファイルを配置したら、今度はhtmlを編集したくなってくるでしょう。次回はテンプレートの編集について説明します。