图片
虽然图片是 Markdown 的一等公民,也是核心语法的一部分,但在处理图片时可能会遇到一些困难。Material for MkDocs 使得处理图片更加舒适,提供了图片对齐和图片标题的样式。
配置
通过以下配置,可以使图片对齐、给图片添加标题(将其呈现为图表),以及标记大图片进行延迟加载。在mkdocs.yml中添加以下行:
查看附加的配置选项:
灯箱效果
如果您想要在文档中添加图像缩放功能,glightbox插件是一个很好的选择,因为它与 Material for MkDocs 完美集成。使用pip安装插件:
然后,在mkdocs.yml中添加以下行:
我们建议查看可用的配置选项。
使用方法
图片对齐
当启用[属性列表]时,可以通过在align属性中添加相应的对齐方向来对齐图片,例如align=left或align=right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.
如果在图片旁边渲染文本的空间不足,图片将会拉伸到视口的整个宽度,例如在移动视口上。
图片标题
遗憾的是,Markdown 语法不支持图片标题,但可以始终使用[在 HTML 中使用 Markdown]扩展和字面的figure和figcaption标签:
<figure markdown>
{ width="300" }
<figcaption>图片标题</figcaption>
</figure>
图片延迟加载
现代浏览器通过loading=lazy指令提供了原生支持图片延迟加载,在不支持的浏览器中会降级为急加载:
亮色和暗色模式
如果您添加了一个颜色调色板切换,并且想要为亮色和暗色模式显示不同的图片,可以在图片 URL 后面添加#only-light或#only-dark哈希片段:


