如何为Jekyll构建一个gallery标签?

时间:2014-01-02 18:48:21

标签: jekyll liquid

我想在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

enter image description here

我试过

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

如何生成这样的图库标记?

1 个答案:

答案 0 :(得分:0)

目前最新的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;
}
相关问题