如何使用具有srcset属性的图片元素从Asciidoc源输出具有响应图像的HTML5

Question

所以，如果我想要HTML5的输出，如下所示：

<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

(取自此(

我的AsciiDoc源代码会是什么样子？也许是一个有多个图像的人物，使用自定义后端或其他什么将其转换为这个？使用AsciiDoc/Aciiddoctor可以做到这一点吗？

Answer 1

这绝对有可能
使用内置的image宏，您可以定义以下内容：

image::pyramid.png[regular pyramid built from four equilateral triangles,sources="pyramid.svg,pyramid.webp"]

请注意，sources属性将在Image块上可用。

然后，使用自定义转换器，可以检索该属性的值来构建<source>元素(封装在<picture>元素中(
这里有一个简化的示例：

MIME_TYPES = {
".svg" => 'image/svg+xml',
".webp" => 'image/webp'
}
def convert_image node
target = node.attr 'target'
sources = (node.attr 'sources', '').split(',').map do |src|
%(<source type="#{MIME_TYPES[File.extname src]}" srcset="#{src}">)
end
%(<picture>
#{sources.join("n")}
<img src="#{target}" alt="#{node.alt}">
</picture>)
end

您当然可以使用其他属性来做更高级的事情。

请记住，也可以使用扩展来扩展AsciiDoc语法。话虽如此，在这种情况下，我认为最好使用内置的image宏来保存语义信息。