在降价中添加后备图像

如何解决在降价中添加后备图像

我一直在用 .webp 替换我现有的网站图像。在 HTML 中，添加回退支持相对容易，例如不支持 .webp。但是，我正在努力寻找 Markdown 的等价物？

HTML

<img src="img.webp" />

支持后备的 HTML

<picture>
  <source srcset="img.webp" type="image/webp">
  <source srcset="img.jpg" type="image/jpeg"> 
  <source srcset="img.png" type="image/png"> 
</picture> 

例如

降价

![](img.webp)

提供后备支持的 Markdown

![](img.webp,img.png)

解决方法

我认为 Markdown 中没有像这样的后备图像规范，但是如果您使用 markdown-it（这是 Eleventy 中的默认 Markdown 解析器），您可以添加自定义插件来扩展语法。您也可以只将 HTML 放在 Markdown 中，或者如果您使用 Eleventy，甚至可以在 Markdown 中使用短代码。

使用短代码

您可以在 Eleventy 中定义 custom shortcodes，然后定义 use them in your markdown。这可能比设置 markdown-it 插件更简单、更灵活，但缺点是将非 Markdown 内容放入 Markdown。

使用 markdown-it 插件

如果您已经有要使用的预生成图像，您可能需要使用类似 markdown-it-picture 的内容并修改它以设置 type 属性，方法是解析文件扩展名或更改接受 type 的媒体查询/标题点。您需要将代码复制到项目中的新文件中，进行修改，然后像这样注册：

// .eleventy.js
module.exports = function(eleventyConfig) {
  const mdPicture = require('/path/to/plugin.js')
  const md = require('markdown-it')()
  md.use(mdPicture)
  eleventyConfig.setLibrary('md',md)
  // ...
};

用eleventy-image

或者，如果您还没有生成图像并希望在 11ty 构建步骤中生成它们，您可以使用 eleventy-image (Docs)。此 Twitter thread 讨论了创建自定义 markdown-it 渲染器，我已将其修改为与下面的 eleventy-image 一起使用。

// you might want to put this in another file
// such as ./utils/markdown.js

// responsive images with 11ty image
// this overrides the default image renderer
// titles are also used for size setting (optional)
//
// ![alt text](/path/to/img.png '(max-width: 768px) 100vw,768px')

const md = require('markdown-it')();
const Image = require('@11ty/eleventy-img')

md.renderer.rules.image = function (tokens,idx,options,env,self) {
  const token = tokens[idx]
  let imgSrc = token.attrGet('src')
  const imgAlt = token.content

  // you can modify the default sizes,or omit
  const imgSize = token.attrGet('title') || '(max-width: 768px) 100vw,768px'

  const widths = [250,426,580,768] // choose your own widths,or [null] to disable resize
  const imgOpts = {
    widths: widths
      .concat(widths.map((w) => w * 2)) // generate 2x sizes for retina displays
      .filter((v,i,s) => s.indexOf(v) === i),// dedupe widths
    formats: ['webp','jpeg'],// choose your own formats (see docs)
    urlPath: '/assets/img/',// src path in HTML output
    outputDir: './_site/assets/img/' // where the generated images will go
  }

  // generate the images
  // see https://www.11ty.dev/docs/plugins/image/#synchronous-usage
  Image(imgSrc,imgOpts)

  const metadata = Image.statsSync(imgSrc,imgOpts)

  return Image.generateHTML(metadata,{
    alt: imgAlt,sizes: imgSize,loading: 'lazy',decoding: 'async'
  })
}

// in your .eleventy.js
module.exports = function(eleventyConfig) {
  // you may need to `require` the file with
  // your markdown config with the custom renderer
  // const md = require('./utils/markdown.js')
  eleventyConfig.setLibrary('md',md)
  // ...
};

这个渲染器会自动生成不同尺寸的图片，以及不同的格式，然后在你的 HTML 中输出 <picture> 标签。由于 markdown-it 不能很好地与 async 函数配合使用，因此我们使用 eleventy-image 的 syncronous pattern。有关配置的更多信息可以在 docs 中找到。

您可能需要注意的一件事是，markdown 中的图像路径应该是图像在网站源中的位置，不是最终发布的 URL。例如，我的图像可能位于 src/images/img.png，但发布在 https://example.com/images/img.png。降价应为 ![alt text](src/images/img.png) 和 NOT ![alt text](/images/img.png)。您还可以在渲染器函数中进行额外的解析。

,

不确定这是否可行，但您可以尝试一下：

[![my image](img.webp)](image_url)