Jekyll 使用 data-src 处理图像答案

【问题标题】：Jekyll using data-src for imagesJekyll 使用 data-src 处理图像
【发布时间】：2017-11-23 17:43:06
【问题描述】：

使用 Jekyll，我尝试对所有图像使用 data-src 而不是 src。

最好的方法是什么？创建我自己的插件？我不认为使用包含是一个很好的选择......

现在我正在添加这样的图像：

![my alt text]({{"http://example.com/myImage.gif"}})

我见过related issues，但答案总是建议使用外部库。没有更直接的方法吗？

【问题讨论】：

标签： jekyll liquid jekyll-extensions

【解决方案1】：

按照@JoostS 的建议，您可以创建一个插件，更具体地说是一个自定义液体标签。

例如使用：

<p>{% render_img http://example.com/myImage.gif "my alt text" %}</p>

您可以在_plugins/images.rb 中拥有render_img 插件：

module Jekyll
  class RenderImgTag < Liquid::Tag

    def initialize(tag_name, variables, tokens)
      super
      @variables = variables.split(" ", 2)
      @url = @variables[0]
      @alt = @variables[1]
    end

    def render(context)
      "<img data-src='#{@url}' alt='#{@alt}' />"
    end
  end
end

Liquid::Template.register_tag('render_img', Jekyll::RenderImgTag)

【讨论】：

谢谢。工作吧。

【解决方案2】：

是的，我认为创建自己的插件是（唯一）正确的解决方案。包括导致污染的内容，而 javascript 在这里并不是一个真正的选择。

【讨论】：

关于插件的创建.. 我真的找不到非常清晰或直接的文档。我在创建 <img 标记时遇到问题。即使使用`