ruby - Jekyll 渲染局部 Markdown

Question

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

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

但是，我想创建一个液体标签或过滤器，以允许将全宽图像注入(inject)到页面中间。这样会关闭图片上方的三个容器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):

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 编辑器，并且它将保持您的 Markdown 清洁并可重复用于其他目的。

---

“包含”解决方案

只需在您的 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”解决方案

使用此 Markdown (或让常规/图形 Markdown 编辑器生成此 Markdown ):

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