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

标签 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=""/>

最佳答案

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

关于ruby - 支持为 Markdown 中的图片添加延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32152230/

相关文章:

ruby - Class#allocate 及其用途

ruby-on-rails - 在 Ruby 中扫描数组以查找字符串匹配项

react-native - 标记为 react 原生

markdown - Github Markdown 中的列表项之间出现额外的行

ruby - 无法在 Ubuntu 12.04 上运行 Jekyll

jekyll - 将 susy 与 Jekyll 一起使用

ruby - 使用 array.delete(array.min) 删除值的一个实例

ruby - Ruby 中对象的哈希/数组

html - 如何使用 blackfriday 将 markdown 渲染到 golang 模板(html 或 tmpl)?

redirect - Jekyll 重定向不是在 GitHub 上生成的