图片¶

虽然图片是Markdown的第一类公民，并且是核心语法的一部分，但处理它们可能会很困难。Material for MkDocs使得处理图片更加舒适，提供了图片对齐和图片标题的样式。

配置¶

此配置增加了对齐图片、为图片添加标题（将其呈现为图形）以及标记大图片以进行懒加载的能力。将以下行添加到mkdocs.yml中：

markdown_extensions:
  - attr_list
  - md_in_html
  - pymdownx.blocks.caption

查看其他配置选项：

• 属性列表
• HTML中的Markdown
• 标题

灯箱¶

0.1.0 glightbox

如果您想为文档添加图片缩放功能，glightbox插件是一个很好的选择，因为它与Material for MkDocs完美集成。使用pip安装它：

pip install mkdocs-glightbox

然后，将以下行添加到mkdocs.yml中：

plugins:
  - glightbox

我们建议查看可用的配置选项。

使用¶

图片对齐¶

当启用属性列表时，可以通过添加相应的对齐方向来对齐图片，使用align属性，即align=left或align=right：

![图片标题](https://dummyimage.com/600x400/eee/aaa){ align=left }

![图片标题](https://dummyimage.com/600x400/eee/aaa){ align=right }

如果没有足够的空间在图片旁边渲染文本，图片将拉伸到视口的全宽，例如在移动视口上。

图片标题¶

遗憾的是，Markdown语法不提供对图片标题的原生支持，但始终可以使用HTML中的Markdown扩展与字面figure和figcaption标签：

<figure markdown="span">
  ![图片标题](https://dummyimage.com/600x400/){ width="300" }
  <figcaption>图片标题</figcaption>
</figure>

然而，标题提供了一种替代语法，可以为任何Markdown块元素（包括图片）添加标题：

![图片标题](https://dummyimage.com/600x400/){ width="300" }
/// 标题
图片标题
///

图片懒加载¶

现代浏览器通过loading=lazy指令提供原生支持懒加载图片，在不支持的浏览器中降级为急加载：

![图片标题](https://dummyimage.com/600x400/){ loading=lazy }

明亮和黑暗模式¶

8.1.1

如果您添加了颜色调色板切换并希望在明亮和黑暗配色方案中显示不同的图片，可以在图片URL后附加#only-light或#only-dark哈希片段：

![图片标题](https://dummyimage.com/600x400/f5f5f5/aaaaaa#only-light)
![图片标题](https://dummyimage.com/600x400/21222c/d5d7e2#only-dark)

[data-md-color-scheme="custom-light"] img[src$="#only-dark"],
[data-md-color-scheme="custom-light"] img[src$="#gh-dark-mode-only"] {
  display: none; /* 在明亮模式下隐藏黑暗图片 */
}

[data-md-color-scheme="custom-dark"] img[src$="#only-light"],
[data-md-color-scheme="custom-dark"] img[src$="#gh-light-mode-only"] {
  display: none; /* 在黑暗模式下隐藏明亮图片 */
}