Jekyll渲染部分内部标记
Jekyll渲染部分内部标记
提问于 2017-11-16 20:25:33
我们正在尝试将站点移动到Jekyll，并有一个BS4主题。为了使其用户对内容管理器友好，我在页面布局中放置了以下内容：
<div class="container">
<div class="row">
<div class="col-md-12">
{{ content }}
</div>
</div>
</div>然而，我想要创建一个液体标签或过滤器，以允许全宽度的图像被注入到页面的中间。这将关闭图像上方的三个容器div，写出图像，并在下面创建新的div，然后继续编写标记文件。即
{% 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)回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-16 23:38:01
你的问题看起来像是逃跑的问题。
虽然我喜欢您的解决方案的简单性，但我会考虑两个备选方案。第一个(‘包括’解决方案)，因为它更容易实现(任何人都可以使一个工作)。第二个('javascript‘解决方案)，因为它将允许您的内容编辑器使用常规/图形化的标记编辑器，并且它将使您的标记保持干净，并可用于其他目的。
“‘Include”解
只需在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”解
使用此标记(或让常规/图形化的标记编辑器生成此标记)：
{: .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">');;
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47338474
复制相关文章
相似问题
腾讯云开发者
