Jekyll 在 Markdown 中渲染部分内容

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 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">');;
  });
});