右侧圆形头像
这是一个偏首页 Hero 的用法。图片本身不负责承载额外说明，只是贴在段落前面，然后让后续文字自然围绕它排版。这样你的首页仍然是纯 Markdown 内容，但视觉上会比现在单调的纯文字块更有层次。
这一类图片适合用作头像、栏目形象图、作者插图。圆形和轻微悬浮效果只在桌面端生效，移动端会自然退化成普通居中块，不会破坏阅读节奏。
右侧教程截图
这种形式更适合教程。你只需要先插入图片，再直接写步骤说明，正文就会自然围绕图片排版，而不需要再维护额外的图文组件结构。对于“讲解一个面板里几个关键按钮”的场景，这种排版会明显比单独占一整行更紧凑。
如果后续段落足够长，文本会继续环绕；如果后面直接进入新章节、代码块或列表，样式会自动清除浮动，避免新模块被卡在图片侧边。
这种形式更适合教程。你只需要先插入图片，再直接写步骤说明，正文就会自然围绕图片排版，而不需要再维护额外的图文组件结构。对于“讲解一个面板里几个关键按钮”的场景，这种排版会明显比单独占一整行更紧凑。
如果后续段落足够长，文本会继续环绕；如果后面直接进入新章节、代码块或列表，样式会自动清除浮动，避免新模块被卡在图片侧边。 这种形式更适合教程。你只需要先插入图片，再直接写步骤说明，正文就会自然围绕图片排版，而不需要再维护额外的图文组件结构。对于“讲解一个面板里几个关键按钮”的场景，这种排版会明显比单独占一整行更紧凑。
如果后续段落足够长，文本会继续环绕；如果后面直接进入新章节、代码块或列表，样式会自动清除浮动，避免新模块被卡在图片侧边。
左侧教程截图
左侧布局适合你想把说明文字放在视觉主线右边的时候使用。比如某些教程里，界面结构固定在左边，右边跟着写操作步骤，会比所有图片都靠右更有变化，也更像成熟教程网站的排版方式。
你后面写大量教程时，其实只需要在合适段落前切换 align="left" 或 align="right"，就足够让页面节奏丰富起来。
左侧布局适合你想把说明文字放在视觉主线右边的时候使用。比如某些教程里，界面结构固定在左边，右边跟着写操作步骤，会比所有图片都靠右更有变化，也更像成熟教程网站的排版方式。
你后面写大量教程时，其实只需要在合适段落前切换 align="left" 或 align="right"，就足够让页面节奏丰富起来。
普通居中图
居中图依然保留，因为并不是所有图片都适合环绕。像分类视觉图、流程总览图、封面类插图，居中展示通常更稳定，也更符合读者预期。
圆形但不悬浮
如果你只想要一个安静的圆形头像，而不想加任何动态效果，也可以只用 shape="circle"。这样就能把它当作一个纯静态视觉锚点，适合更克制的页面开场。