Question

我正在尝试制作一个自定义标记{% render-slider, ['image1.jpg', 'image2.jpg',...] %}，该标记会转换为以下html代码。

<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>

这将在博客网站上使用，以便用户可以使用此自定义标记，同时制作博客帖子，为他们的图片生成特定的布局 - 他们在博客帖子中的感觉。我一直在谷歌阅读和阅读几个小时，但对于像我这样的初学者来说，文档并不容易。到目前为止，我已经有了这个（这可能是完全错误的）：

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

正如您所看到的，我一直在编写渲染方法。我知道它必须是这样的东西，但我不能把它们放在一起......

<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>

任何人都可以帮助我吗？如果你在使用asset_path帮助器时遇到问题，请不要让它阻止你，这是我们稍后可以解决的问题，现在我只想知道应该如何构建这个自定义标记。

在液体中创建自定义块标签

0 个答案: