第九块石头

给Octopress增加生成QR二维码功能

| Comments

花了半天总算把QRCode边栏改为了可以直接像img标签那样的用法,方便在blog中随时添加带有URL的QRCode。当然稍微修改一下还能在里面包含其他的信息,不过我目前没那种需求,所以就做这个支持了。

为了让它能像img那样的使用,因此我很干脆的直接调用了ImageTag类进行解析。

需要修改plugins/image_tag.rb

image_tag.diff start:40
1
2
3
4
5
6
7
8
9
10
11
12
13
    def render(context)
      if @img
        "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
      else
        "Error processing input, expected syntax: <img class="[class name(s)]" src="[http[s]:/]/path/to/image" title="[width [height]] [title text | \&#34;title text\&#34; [\&#34;alt text\&#34;]]" alt="[width [height]] [title text | \&#34;title text\&#34; [\&#34;alt text\&#34;]]">"
      end
    end
+
+    def img_info
+      @img
+    end
  end
end

创建插件plugins/qrcode.rb:

qrcode.rb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module Jekyll
  class QRCode < Liquid::Tag
    @size = ""
    @img = nil

    def initialize(tagname, markup, tokens)
        super
        if markup =~ /([^ ]+x[^ ]+ )?(.*)/i
            if !$1.nil?
                @size = $1.strip
            else
                @size = "100x100"
            end
        end
        @img = ImageTag.new('img', $2, nil)
    end

    def render(context)
        url = @img.img_info['src']
        @img.img_info['src'] = "http://chart.apis.google.com/chart?chs=#{@size}&cht=qr&chld=|0&chco=165B94&chl=#{url.start_with?('/') ? context.registers[:site].config['url']+url : url}"
        "<a href=#{url}>#{@img.render(context)}</a>"
    end
  end
end
Liquid::Template.register_tag('qrcode', Jekyll::QRCode)

用法:

img类似,就是多了一个大小的设置:

{% qrcode 150x150 http://github.com %}

效果:

Comments

comments powered by Disqus