Liquidで変数をTagに渡す方法

Persons in Context: The Challenge of Individuality in Theory and Practice: 32 (Psychoanalytic Inquiry Book Series)

Octopressで画像を設置する{% img~ %}等には、通常第二引数以降は単に文字列として渡すので yamlブロックで指定した値やLiquid文法でassignした変数をそのまま渡すことが出来ません。 (単なる文字列として処理される)

ただ、変数を渡すためには一旦文字列で変数名を与えて何らかの形でタグクラスの中で文字列を変換してあげれば出来たのでその方法について。

やりたいこと
contextから取れる
まとめ

やりたいこと

サイトのロゴを_config.ymlで指定していたりする場合その画像を

sitelogo: /images/MacApp/MacLogoMiddle.png

と指定しておいて

<img src="{{site.sitelogo}}"/>

としてやれば{{site.sitelogo}}部分は変換されて正しく表示できますが、

{% img {{site.sitelogo}} %}

のようにimgタグを使うことは出来ません。この場合、{{site.sitelogo}}部分はそのまま{{site.sitelogo}}という文字列として渡されます。両側の{{~}}を外してもそのまま渡されるだけです。

1つの決まった画像ならhtmlでも良いのですが、他のタグ等でも直接変数が渡せたら便利だと思ったのでそのやり方について調べてみました。

contextから取れる

Liquid::Tagを継承して新しいタグを作っているプラグインを見ると、

module Jekyll
  class NewTag < Liquid::Tag
    def initialize(tag_name, markup, tokens)
      @markup = markup
      # または"markup"から適当な変数を摘出
      super
    end

    def render(context)
      # 処理
    end
  end
end

Liquid::Template.register_tag('newtag', Jekyll::Newtag)

大体こんな感じです。 initializeの方のtag_nameはタグの名前(つまりこの場合は必ずnewtag)、 markupにはタグに書いた第二引数以降が入ります(imgタグならクラスや画像位置等)。 tokensは

Finally, the tokens are all of the other tags that appear within this block tag, including the closing endnavigation tag.
GIANT ROBOTS SMASHING INTO OTHER GIANT ROBOTS Custom Tags in Liquid

なんだそうで、特にBlockタグの場合に中で処理するのに必要なんだと思います。通常、継承したクラスで自分で扱うことはあまり無いです ¹。

imgタグを定義してるplugins/image_tag.rbでは

if markup =~ /(?<class>\S.*\s+)?(?<src>(?:https?:\/\/|\/|\S+\/)\S+)(?:\s+(?<width>\d+))?(?:\s+(?<height>\d+))?(?<title>\s+.+)?/i
  @img = attributes.reduce({}) { |img, attr| img[attr] = $~[attr].strip if $~[attr]; img }
  ...

こんなかんじでmarkupを@imgに入れていってrenderで使います。 (http(s)://で始まったり/を含むような文字列の場合それをsrcとする)

一方、render関数ではcontextという引数を持っていてページの情報等を持っています。従って、上のsite.sitelogoの情報も持っていて、 context['site.sitelogo']としてやれば_config.ymlで指定したsitelogoの値を取ってこれます²。

同じようにページの途中で

{% assign img=/image/a.jpg %}

とassignしたものやcaptureブロックで設定した値もそのまま使えます。

これを適用してあげればいいんですが、普段は直接URLを書いて必要なときだけ変換して欲しいので、画像パスにval:と言う値をつけた時だけ変換するようにしました。

image_tag.rb.diff

diff --git a/plugins/image_tag.rb b/plugins/image_tag.rb
index 4567000..55e8ea3 100644
--- a/plugins/image_tag.rb
+++ b/plugins/image_tag.rb
@@ -24,7 +24,7 @@ module Jekyll
     def initialize(tag_name, markup, tokens)
       attributes = ['class', 'src', 'width', 'height', 'title']
 
-      if markup =~ /(?<class>\S.*\s+)?(?<src>(?:https?:\/\/|\/|\S+\/)\S+)(?:\s+(?<width>\d+))?(?:\s+(?<height>\d+))?(?<title>\s+.+)?/i
+      if markup =~ /(?<class>\S.*\s+)?(?<src>(?:https?:\/\/|\S*\/|val:)\S+)(?:\s+(?<width>\d+))?(?:\s+(?<height>\d+))?(?<title>\s+.+)?/i
         @img = attributes.reduce({}) { |img, attr| img[attr] = $~[attr].strip if $~[attr]; img }
         if /(?:"|')(?<title>[^"']+)?(?:"|')\s+(?:"|')(?<alt>[^"']+)?(?:"|')/ =~ @img['title']
           @img['title']  = title
@@ -39,6 +39,12 @@ module Jekyll
 
     def render(context)
       if @img
+        @img['src'] = context[@img['src'].split(':')[1]] if @img['src'] =~ /^val:/
+        if @img['class'] and ! @img['class'].include?('noimgpath')
+          if context['site.imgpath'] and @img['src'] !~ /^(http|#{context['site.imgpath']})/
+            @img['src'] = context['site.imgpath']+@img['src']
+          end
+        end
         "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
       else
         "Error processing input, expected syntax: {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | \"title text\" [\"alt text\"]] %}"

initializeの方でval:という値の時にもsrcに入れて、 renderの中でval:だった場合には変換しています。

加えて、画像置き場を変えたい時もあるので、その値をimgpathとして _config.ymlで設定して、httpから始まるものでない場合にはそのパスを最初に与えるようにもしました。自己サイト内の別の場所も指定できるように、パスを追加したくない場合はnoimgpathをクラスに(つまりは画像URLより先に書く) 与えます。