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