Creating a custom block tag in liquid

问题

I'm trying to make a custom tag {% render-slider, ['image1.jpg', 'image2.jpg',...] %} that renders in to the following html code.

<div class="slider">
    <a href="#" class="unslider-arrow prev icon-chevron-with-circle-left"></a>
    <a href="#" class="unslider-arrow next icon-chevron-with-circle-right"></a>
    <ul>
        <% images.each do |image| %>
            <li style="background-image: url(<%= asset_path image %>);">
        <% end %>
       </li>
    </ul>
</div>

This will feature be used on a blog website, so that users can use this custom tag while making blogposts to generate a certain layout for their pictures where-ever they feel like in their blogpost. I've been google-ing and reading for hours, but the documentation is just not easy enough for a beginner like me. So far I've got this (which again could be completely wrong):

class FillSlider < Liquid::Block
def initialize(tag_name, images, tokens)
    super
    @images = images
end
def render(context)
    **template filled with images**
end

As you can see, I'm stuck at writing the render method. I know it has to be something that looks like this, but I can't put the 2 together...

<div class="slider">
    <a href="#" class="unslider-arrow prev icon-chevron-with-circle-left"></a>
    <a href="#" class="unslider-arrow next icon-chevron-with-circle-right"></a>
    <ul>
        {% for image in images%}
            <li style="background-image: url({{image}});">
        {% end %}
       </li>
    </ul>
</div>

Can anyone help me with it? And don't let it stop you if you have trouble with the asset_path helper, that's something we can figure out later, now I just want to get how this custom tag should be build.

来源：https://stackoverflow.com/questions/31999241/creating-a-custom-block-tag-in-liquid

标签

html

ruby-on-rails

template-engine

liquid