图片在博客显示各式各样,以美国超人气动画《Rick and Morty》图片为例,现在让我一一道来。
1.插入本地图片
引入本地图片分二种:•本地路径(放在static
目录下) •相对路径(需与博客文件名一致且在同一路径)假如有一张关于动画的图片,路径放在根目录static/images
下,图片命名是Rick and Morty.jpg
。
1.1本地路径

1.2相对路径

2.上传到对象存储COS
2.1带图片的文字链接
[Rick and Morty](https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg)
2.2带网址的图片链接
[<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg" alt="Rick and Morty">](https://www.rickandmorty.com/)
2.3缩小图片
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:20%;" />

2.4扩大图片
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:150%;" />

2.5.1悬浮文字说明

2.6.1图片文字说明之一
|  |
|:--:|
| **Rick and Morty** |
Rick and Morty |
2.6.2文字图片说明之二
{/{< figure src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg" title="Rick and Morty" >}/}(去掉斜杠即可)
2.7文字提示折叠图片
<details>
<summary>Rick and morty</summary>
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" style="zoom:10%;" />RICK:"Your future stems from your present,which,if you're living right.keeps changing.you're gonna be a lot happier if your focus on the moment.rather than on how you're gonna die.
</details>
Rick and Morty

2.8添加动图

3.多图片处理方式
3.1HTML并列
<figure class="third">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
<img src="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%2520and%2520Morty.jpg"title="150" width="150" height="150">
</figure>



3.2简码图库并列
这个我在网上参考了Li-Wen Yip的简码日志Hugo Easy Gallery,我所举列的是最简单的短码例子,详细情况可以参考其GitHub主题页面,参数配置可以根据自己的喜好来,配置好就行。😉
{/{< gallery >}}
{/{< figure link="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick%20and%20Morty.jpg" caption="Rick and Morty" >}}
{/{< figure link="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Morty.jpg" caption="Rick1" >}}
{/{< figure link="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Morty2.jpg" caption="Rick2" >}}
{/{< figure link="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick.jpg" caption="Morty" >}}
{/{< figure link="https://css-1252531711.cos.ap-chongqing.myqcloud.com/picture/Rick2.png" caption="Morty2" >}}
{/{< /gallery >}}("/"去掉就行)
4.图片轮播
最后,就是插入图片轮播的方式了。这里,最终我还是参考了小球飞鱼的文章《在文章中插入轮播图片》,之前。引入Bootstrap尝试了一下图片轮播,是可以实现轮播效果,但是问题是引入了Bootstrap的CSS会导致文章页面背景色出现问题。所以还是决定用小球飞鱼写的文章方法,不过我看这个轮播,这种方式是基于swiper的滑动插件引入而成,所以。这个和Bootstrap轮播效果比起来各有千秋,没有谁更好更差的争论。过程我就不描述了,引入后的shortcode是这种表现形式:
{/{< imgloop "URL1,URL2,URL3,URL4,URL5" >}/}(左右斜杠去掉就行)
效果可见。😂
参考网页:1.Hugo Easy Gallery2.在文章中插入轮播图片
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
© 阿波尔的博客2019-2023