支持为 Markdown 中的图片添加延迟加载

Question

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

但我不想再这样下去了。因为如果有人更新 kramdown 我会丢失这些编辑。在不修改原始图像语法的情况下，还有其他方法可以做到这一点吗？

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

当前输出（没有上面的编辑）：<img src="some image link" alt=""/>

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

Answer 1

您可以使用 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 的原因。

Answer 2

如果您使用kramdown，您可以将属性添加到您的降价块。 See documentation

在你的情况下 An image: ![gras](){: data-src="some image link"} 就可以了。

支持为 Markdown 中的图片添加延迟加载

Support for adding lazy load for images in Markdown

ruby

markdown

jekyll

jekyll-extensions

kramdown