rcmdnk's blog

1f604_200_200

Octopressへ絵文字の導入jekyll-emoji と言うプラグインを入れてましたが、フィルターを使った導入はちょっと面倒があるので、 タグを使って書く octopress-gemoji というプラグインを作りました。

Sponsored Links

フィルター時の問題

jekyll-emoji

source/_include/article.html
1
2
-  <div class="entry-content">{{ content | excerpt }}</div>
+  <div class="entry-content">{{ content | excerpt | emojify }}</div>

といった感じでコンテンツにemojifyと言うフィルターをかけて 変換するのですが、このフィルターはcodeblock 等にも有無をいわさず適用されます。 rawを使ってもそれより先にフィルターが適用されるので駄目です。

従って、codeblockの中に:a:の様な物があるとaの様に コードの中で変更されてしまいます。

:&#58;で書いたりするとcodeblockの中だとなんとかなったり しますが、それでも上手く行かない部分があるのと 1、 コード内だと結構この様な場面があって気づかずに変換されてる事も多いのでやっぱり面倒です。

ということで、タグを使って書くプラグインを作りました。

octopress-gemoji導入

プラグインはGitHubにおいてあります。

のでcloneしたり中身を直接取ってきたりしてください。

$ git clone [email protected]ithub.com:rcmdnk/octopress-gemoji.git

取ってきたら、まず、plugins/gemoji.rbpluginsへ、 また、sass/custom/_gemoji.scsssass/custom/へコピー。

_gemoji.scsssass/custom/_styles.scss

@import "gemoji";

の様にimport。

さらに、_config.yml

emoji_dir: /images/emoji

emojiの画像をインストールするディエレクトリを指定。

最後にGemfileへ

gem 'gemoji'

を加え

$ bundle install

を実行。

_gemoji.scssの中ではemojiクラスの指定がありますが、 これはjekyll-emojiでも使ってるもので、そちらを導入時に書いてあればそのまま使えます。

それ以降のemoji_dirgemojiについても同様、 jekyll-emoji 用に入れてあれば再度設定する必要はありません。

使い方

タグを使って

{%gemoji smile%}

こんな感じで書けばsmileと。使える絵文字は EMOJI CHEAT SHEET を参考に。

同じような感じのoctemojiという プラグインもありますが、こちらはemojiの種類が中にある物限定なので、 gemojiを使う octopress-gemoji の方が沢山種類があります。

Sponsored Links
Sponsored Links

« はてなの人気エントリーのウィジェットのテーマを変える 月間アーカイブ for Octopress »