【问题标题】：How can I build a gallery tag for Jekyll?如何为 Jekyll 建立一个画廊标签？
【发布时间】：2014-01-02 18:48:20
【问题描述】：

我想像这样在 Jekyll 中使用图库标签：

{% gallery columns="2" %}
    ../images/2013/12/image.png "This is one caption"
    ../images/2013/12/bli.png "Another caption"
    ../images/2014/01/bla.png
    ../images/2013/12/blup.png "The other one has no caption."
{% endgallery %}

应该给出gallery like this:

我试过了

module Jekyll
  class GalleryTag < Liquid::Tag

    def initialize(tag_name, text, tokens)
      super
      @text = text
      @tokens = tokens
    end

    def render(context)
        lines = @text.split("\n")
        lines.strip!
        rendered = '<ul class="gallery mw-gallery-traditional">'
        lines.each do |line|
            words = line.split(" ")
            words.strip!
            src, alt, *rest = words
            rendered += '<li class="gallerybox" style="width: 155px">'
            rendered += '<div style="width: 155px">'
            rendered += '<div class="thumb" style="width: 150px;">'
            rendered += '<div style="margin:21px auto;">'
            rendered += '<a href="'+src+'" class="image">'
            rendered += '<img src="'+src+'" alt="'+alt+'" width="120" height="108"/>'
            rendered += '</a>'
            rendered += '</div>'
            rendered += '</div>'
            rendered += '<div class="gallerytext">'+alt+'</div>'
            rendered += '</div>'
            rendered += '</li>'
        end
        rendered += "</div>"
        return rendered
    end
  end
end

Liquid::Template.register_tag('gallery', Jekyll::GalleryTag)

但它不起作用：

Liquid Exception: Unknown tag 'endgallery' in _posts/2013-03-10-abc.md

如何生成这样的画廊标签？

【问题讨论】：

我刚刚找到Liquid Blocks。一旦我有一个完整的工作插件，我会发布一个答案。

标签： jekyll liquid

【解决方案1】：

all sources is on GitHub 的当前最新插件。下面我就不更新了！

gallery_tag.rb

创建文件_plugins/gallery_tag.rb:

module Jekyll
  class GalleryTag < Liquid::Block
    def initialize(tag_name, markup, tokens)
        super
        @markup = markup
        @tokens = tokens
    end

    def parseAttributes()
        @markup
    end

    def render(context)
        rendered = '<ul class="gallery mw-gallery-traditional">'
        @nodelist.each do |node|
            lines = node.split("\n")
            lines.each do |line|
                if line.nil?
                    puts "Line was nil!"
                else
                    words = line.split(" ")
                    if words.count() >= 1
                        words.push("") # make sure this one has at least two elements
                        src, alt, *rest = words
                        rendered += '<li class="gallerybox" style="width: 155px">'
                        rendered += '<div style="width: 155px">'
                        rendered += '<div class="thumb" style="width: 150px;">'
                        rendered += '<div style="margin:21px auto;">'
                        rendered += '<a href="'+src+'" class="image">'
                        rendered += '<img src="'+src+'" alt="'+alt+'" width="120" height="108"/>'
                        rendered += '</a>'
                        rendered += '</div>'
                        rendered += '</div>'
                        rendered += '<div class="gallerytext">'+alt+'</div>'
                        rendered += '</div>'
                        rendered += '</li>'
                    end
                end
            end
        end
        rendered += "</div>"
        return rendered
    end
  end
end

Liquid::Template.register_tag('gallery', Jekyll::GalleryTag)

CSS

来自 de.wikipedia：

ul.gallery {
    margin: 2px;
    padding: 2px;
    display: block;
}

li.gallerybox {
    vertical-align: top;
    display: inline-block;
}

li.gallerybox div.thumb {
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    margin: 2px;
}

div.gallerytext {
    overflow: hidden;
    font-size: 94%;
    padding: 2px 4px;
    word-wrap:break-word;
}

【讨论】：