支持在Markdown中为图像添加延迟加载

时间：2015-08-22 04:15:10

标签： ruby markdown jekyll jekyll-extensions kramdown

我使用kramdown解析器将markdown转换为html。我想在不修改原始markdown语法的情况下对图像使用延迟加载。我可以通过编辑kramdown gems中的link.rb文件来实现这一点。

enter image description here

但我不想这样做。因为如果有人更新kramdown，我将失去这些编辑。有没有其他方法可以在不修改原始图像语法的情况下执行此操作？

原始图片语法：![](some image link)

当前输出（不进行上述编辑）：<img src="some image link" alt=""/>

预期输出：<img data-src="some image link" alt=""/>

2 个答案:

答案 0 :(得分：2)

您可以使用Nokogiri改变生成的HTML，这几乎是您完成任务所需的所有代码。

def responsive_img_src(html_source)
  doc = Nokogiri::HTML::Document.parse('<html></html>', nil, 'UTF-8')
  fragment = Nokogiri::HTML::DocumentFragment.new(doc, html_source)
  fragment.css('img').each { |img| img['data-src'] = img['src'] }
  return fragment.to_html
end

您无法直接使用Nokogiri::HTML(html_source)来解析源代码，因为它会将输出封装到格式正确的HTML文档中。这就是你需要DocumentFragment的原因。

答案 1 :(得分：1)

如果您使用kramdown，则可以向降价区块添加属性。 See documentation

在你的情况下，An image: ![gras](){: data-src="some image link"}会做到这一点。

相关问题
最新问题