jekyll ではじめる Static Web Site シリーズjekyllでFontAwesomeアイコンを表示するLiquid Tagを作った
はじめに
jekyllの記事内でHTML書きたくないなーって個人的には思っていて、Liquid Tagについて調べていたら思った以上に簡単に作れたので、FontAwesomeアイコンを表示するLiquid Tagプラグインを作ってみました。独自のLiquid Tagはjekyllのプラグインとして簡単に作れます。
Rubyはほとんど使ったことがなくて調べながら書いたのでおかしいところがあればコメントで指摘してください。
ソースコード
プラグインのソースコードはGistで公開しています。
https://gist.github.com/nukos/f19ab09efd18b0a035ec
Liquid Tagにする利点
そんなに難しく考えてなかったけれど、いくつか利点を挙げてみるとこんなものかな。
- jekyllのテーマ内で自由に使える
- Markdown内にHTMLを書かなくてすむ
- FontAwesomeのプレフィックス
faを自由に変更できる - 一々プレフィックス
fa-を指定しなくて良い - 全記事への変更が容易にできる（プラグインの修正）
プラグインの使い方
このタグは記事内だけではなく、jekyllのテーマ全般で利用できます。
タグの指定
HTMLで書いた場合のclassをほぼそのまま使います。faがLiquid Tag名なのでそれ以降がFontAwesomeのclass指定です。HTMLと違うのはプレフィックスのfa-がいらないことです。
{% fa pencil %}
{% fa pencil 3x %}
{% fa circle-o-notch spin %}
{% fa quote-left 3x pull-left border %}
{%と%}の間のスペースはソースを表示する関係で入れているものなので、実際にはスペースなしで入力してください。
表示サンプル
リストなどの親要素にclass指定がひつようなものには対応していません。アイコンだけを表示するときに使えると思ってください。
Basic Icons
fa-camera-retro
{% fa camera-retro %} fa-camera-retro
Larger Icons
- 1x
- 2x
- 3x
- 4x
- 5x
* {% fa pencil %} 1x
* {% fa pencil 2x %} 2x
* {% fa pencil 3x %} 3x
* {% fa pencil 4x %} 4x
* {% fa pencil 5x %} 5x
Fixed Width Icons
- home
- Library
- Applications
- Settings
* {% fa home fx %} home
* {% fa book fx %} Library
* {% fa pencil fx %} Applications
* {% fa cog fx %} Settings
Bordered & Pulled Icons
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
> { % fa quote-left 3x pull-left border % } ...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Spinning Icons
{% fa spinner spin %}
{% fa circle-o-notch spin %}
{% fa refresh spin %}
{% fa cog spin %}
Rotated & Flipped
- normal
- rotete-90
- rotete-180
- rotete-270
- flip-horizontal
- flip-vertical
* {% fa shield %} normal
* {% fa shield rotate-90 %} rotete-90
* {% fa shield rotate-180 %} rotete-180
* {% fa shield rotate-270 %} rotete-270
* {% fa shield flip-horizontal %} flip-horizontal
* {% fa shield flip-vertical %} flip-vertical
Gistで公開しているソース
FontAwesomeのプレフィックス指定
FontAwesomeのプレフィックスをfa以外にしている場合はjekyllのコンフィグ（_config.yml等）で独自のプレフィックスを指定できます。特にカスタマイズしていない方はコンフィグ指定は不要です。
また、アイコンに指定している特定のclassに対してプレフィックス（fa-）を指定したくない場合にfa_exclude:に除外するclassを配列で指定できます。pull-leftクラスだけデフォルトで除外対象になっています（どうしてpull-leftだけプレフィックスがついていないのかは謎）。
除外クラスを指定した例
fa_prefix: fa
fa_exclude:
- color-red
- color-blue
終わりに
Liquid Tagプラグインの簡単な書き方まで紹介しようと思ったけど、長くなってしまったので今回はここまで。jekyllプラグインはRubyをかじるのにも丁度良い題材だと思った。近々Liquid Tagの作り方を紹介したいと思います。本編のGrunt × jekyllもそのうち。
ではでは。