如何使用來自 Asciidoc 源的具有 srcset 屬性的圖片元素的 output HTML5 具有響應式圖像？

Question

所以，如果我想要 HTML5 output 看起來像這樣：

<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/Asciidoctor 來實現嗎？

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宏來保存語義信息。