记录了博客文章插入图片的多种方式！

inlineimage标签

1
{% inlineimage https://pic1.imgdb.cn/item/685a6ecb58cb8da5c86b8407.png, height=250px %}
  • 图片固定靠左显示，height用于调节图片高度，它的宽度会等比例增大或缩小，如右栏图1。
  • 当图片太长时，会导致只显示一部分图片，可以适当调小点height值。
  • 这标签前后都可以加字，变成行内图片（此时height属性作用就不大了），如右边行内图2显示。
  • 根据上面的启发，你也可以将两个标签在同一行写，就形成了一行两张图片的样式，如右图3

图1：

图2：

图3：

img前端标签

1
<img src="https://s3.bmp.ovh/imgs/2025/08/02/a85492c6778f7484.png" alt="示例图片" style="zoom:50%;" />
  • TMD，别想那么多，没法像前端那样加属性&值，会导致博客其它地方样式变化，想像前端一样得用raw标签
  • style用来调整图片大小，值越大则图片越大。
  • alt为点开图片后，图片下面显示的描述信息。

markdown语法

1
![code](https://pic1.imgdb.cn/item/68652aff58cb8da5c88a23eb.png)
  • 通用性不大，了解一下就行。

image标签

1
{% image https://pic1.imgdb.cn/item/68650fff58cb8da5c88969b9.png, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}
  • 默认居中显示，alt的文字会直接显示在图片的下面，width用于调整图片高度。
  • 删了width后，图片会正好显示“左右宽度占满div”。

画廊图片

画廊分类页：

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 '/gallery/MC/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/1.jpg %}
{% galleryGroup Gundam 哦咧哇gundam哒！ '/gallery/Gundam/' https://cdn.cbd.int/akilar-candyassets@1.0.36/image/20200907110508327.png %}
</div>

画廊详细页：

1
2
3
4
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}

见我博客那画廊分类页面效果，还有那画廊详细页面效果，图片会自动调整大小（瀑布流模型）。

阿里图标 icon

1
{% icon icon-rat,2 %}
  • icon-rat：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
  • font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。