3

我想使用Jekyll Responsive Image 插件srcset为我的帖子图像生成带有/sizes属性的适当响应图像。

但我也希望能够在一个提供实时预览的软件中编辑我的帖子，比如MacDown，它只理解图像的标准 Markdown 语法。

这就是为什么我想知道是否有一种方法——某种插件——告诉 Jekyll 转换图像的标准 Markdown 语法，我会将其放入我的 Markdown 文件中……</p>

![alt text](path/to/image.jpg)

…进入Jekyll Responsive Image 插件特有的语法：

{% responsive_image path: path/to/image.jpg alt: "alt text" %}

然后，Jekyll 可以继续使用 Kramdown 生成 HTML……</p>

我还在插件的 Github 中创建了一个问题，但更一般的答案也会很好，并且可能对其他需求有用。

4

3 回答 3

5

是的，这绝对是可能的。从 Jekyll 3 开始，每个文件扩展名可以有多个转换器。这允许您创建一个转换器，如：

class ResponsiveImageify < Jekyll::Converter
  priority :high

  def matches(ext)
    ext.downcase == ".md"
  end

  def convert(content)
    content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: \1  %}')
  end
end

该转换器将gsub任何.md文件的内容。

希望这可以帮助！

于 2016-02-25T19:03:53.810 回答
2

最简单的解决方案是使用新的Jekyll 钩子

一个非常原始的插件可以是：

Jekyll::Hooks.register :posts, :pre_render do |post, payload|
  docExt = post.extname.tr('.', '')
  # only process if we deal with a markdown file
  if payload['site']['markdown_ext'].include? docExt
    newContent = post.content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: \1  %}')
    post.content = newContent
  end
end

将其存储在_plugins/img-tag-transform.rb

于 2016-02-25T18:28:05.977 回答
0

此处发布的示例破坏了 alt 标签。alt 字符串需要被引用，否则它会被截断为一个单词。

例如content.gsub(/\!\[(.+)\]\((.+)\)/, '{% responsive_image path: \2 alt: "\1" %}')

此外，Nicolas Hoizey 的帖子是唯一适用于最新版本 Jekyll (3.7) 的帖子，我似乎无法让其他示例输出 html。在插入液体标签之前，Markdown 似乎已被渲染。

于 2018-05-08T05:44:18.580 回答