Question

我们正在尝试将网站移至Jekyll，并拥有BS4主题。为了使内容管理员对用户友好，我在页面布局中放置了以下内容：

<div class="container">
     <div class="row">
          <div class="col-md-12">
                {{ content }}
          </div>
    </div>
</div>

但是，我想创建一个液体标签或过滤器，以允许将全宽图像注入页面中间。这将关闭图像上方的三个容器div，写出图像，然后在下面创建新的div，并继续写下markdown文件。即。

{% fullwidth xenia-map.png %}

会在页面中间产生类似的内容：

       </div>
    </div>
</div>
<img src="input.jpg" class="img-responsive" />
<div class="container">
     <div class="row">
          <div class="col-md-12">

我已经能够创建一个80％的过滤器和标签（类），但是它们都不会在输出的开头写出结束标记。我刚收到<img>代码。

这是我的班级：

class FullWidth < Liquid::Tag
    def initialize(tag_name, image, tokens)
    super
    @image = image.strip
    end

    def render(context)
        "</div></div></div><img src='uploads/#{@image}' class='img-responsive'>"
    end
end

Liquid::Template.register_tag('fw', FullWidth)

Answer 1

您的问题看起来像一个逃避问题。

虽然我喜欢你的解决方案的简单性，但我会考虑两种选择。第一个（'包含'解决方案），因为它更容易实现（任何人都可以使这一个工作）。第二个（'javascript'解决方案），因为它将允许您的内容编辑使用常规/图形降价编辑器，它将保持您的降价清洁和可重复用于其他目的。

'包含'解决方案

只需在你的markdown / html中添加一个include：

{% include fullwidth.html image="/uploads/xenia-map.png" %}

...并使用此'fullwidth.html'：

    </div>
  </div>
</div>
<img src="{{ include.image }}" class="img-responsive" />
<div class="container">
  <div class="row">
    <div class="col-md-12">

'Javascript'解决方案

使用此降价标记（或让常规/图形降价编辑器生成此标记）：

![Xenia map](/uploads/xenia-map.png){: .fullwidth}

...并使用这个jQuery：

$(document).ready(function(){
  $('img.fullwidth').each(function() {
        var img = $(this).parent().html();
        $(this).unwrap();
        document.body.innerHTML = document.body.innerHTML.replace(img, 
            '</div></div></div>'+img+'<div class="container"><div class="row"><div class="col-md-12">');;
  });
});

Jekyll渲染部分内部降价

1 个答案:

'包含'解决方案

'Javascript'解决方案