mojavy.com

hekyllのimpress.jsスライドを自動的にグリッド配置するjekyllプラグイン

March 26, 2013 at 08:37 PM | categories: jekyll, impress.js, ruby |

hekyllimpress.jsjekyllテンプレのようなものだけど、スライドの位置を個別に指定する必要があってめんどうだったので適当なグリッドに配置するプラグインを書いた。

jekyllのプラグインについて

https://github.com/mojombo/jekyll/wiki/Pluginsに必要なことは大体書いてある。

jekyllのディレクトリに_pluginsディレクトリを作り、その中に*.rbをおいておけば自動的にロードされる。 プラグインの種類はおおまかに以下の4通り。サンプルは本家wikiにあるのでメモもかねて概要だけ。

  • Generators
    • カテゴリ別とか期間別といった任意のルールでページを生成する
  • Converters
    • hamlとかjsonとかのフォーマット変換をする
    • Tags
      • liquidテンプレートエンジンのタグを追加する
      • たとえば、{{ your_tag }} というタグをつかいたければ、Liquid::Tagを継承したクラスをつくって、Liquid::Template.register_tag('your_tag', Jekyll::YourTag) などとする
      • Filters
        • liquidのフィルタを追加する
        • フィルタとはいいつつどんな関数でも登録できる
        • 適当にモジュールをつくって、Liquid::Template.register_filter(Jekyll::YourModule)とすると、{{ 'arg' | your_filter }} のようにして呼びだせる
        • ソース

          wikiで説明されているpluginの書き方を踏まえた上で、それを完全に無視する方法で実装した。 Postクラスを拡張してhekyllにあうようにliquidに渡すデータを上書きしてるだけ。

          もっといい方法はあると思う。

          def once(tag)
            unless (@__once_executed__ ||= []).include? tag
              yield
              @__once_executed__ << tag
            end
          end
          
          module Jekyll
            class Post
          
              def grid_position
                pos = @site.posts.index(self)
                siz = Math::sqrt(@site.posts.size).ceil
                {
                  "x" => 1000 * (pos % siz),
                  "y" => 1000 * (pos / siz),
                }
              end
          
              once(:redefine_to_liquid) do
                alias __old_to_liquid to_liquid
                def to_liquid
          
                  dat = self.data["data"]
          
                  if dat.nil?
                    self.data["data"] = self.grid_position
                  end
                  __old_to_liquid
                end
              end
          
            end
          end
          

          https://gist.github.com/taksatou/5244991

          まとめ

          impress.jsをつかっておいて単なるグリッドというのもどうかとは思いますが、位置決めをする部分をかえればなんとでもなるのでひまなときにがんばればいいと思います


          blog comments powered by Disqus

          About Me

          pic
          mojavy

          Recent posts






          Categories



          Badges