hugo主题魔改(二)

收录于 Hugo

2022-11-12 约 886 字预计阅读 2 分钟

图片的插入方式

通过markdown格式插入

注意

用![1](1.png)这种方式插入，图片是放在content\posts下与md文件同名的文件夹中的

1

![1](1.png)

注意

用![1](/images/1.png)这种方式插入，图片是放在Blog\static\images下

1

![1](/images/1.png)

利用hugo内置Shortcodes figure插入

1

{{< figure src="first.png" >}}

利用扩展Shortcodes image插入

image shortcode 是figure的代替，image可以充分利用 lazysizes 和 lightgallery 两个依赖库

1

{{< image src="1.png" >}}

关于图片大小

markdown格式插入的图片

对于通过![1](1.png)这种方式插入的图片，我们无法更改图片的大小，并且插入后显示出来的图片比原图缩小50％

figure方式插入的图片

对于{{< figure src="1.png" >}}这种方式插入的图片，插入后图片大小保持不变

技巧

对于 {{< figure src=“1.png” >}} 这种方式插入的图片，我们可以通过figure自带的width属性来更改图片的大小

1

{{< figure src="1.png" width="150px" >}}

1

{{< figure src="1.png" width="10%" >}}

关于width=“10%” 的理解

注意：这里的10％是相对于figure标签的大小，如下：

image方式插入的图片

对于 {{< image src="1.png" >}}插入的图片，同![1](1.png) 一样，插入后图片默认缩小一半，不过可以采用width来改变大小

1

{{< image src="1.png" width="10%" >}}

与figure中width=“10%” 的区别

这里的10%是相对于整个页面的宽度800而言，如下：

修改图片的默认插入大小

由于![1](1.png)方式和{{< image src="1.png" >}}方式默认插入后的图片都会缩小一半，即图片大小÷2，对其进行修改，将其修改为插入图片大小变为原来大小的0.8即可，即图片大小÷1.25

修改Blog\themes\FixIt\layouts\partials\plugin\image.html的代码

1
2
3
4
5
6
7
8


//对第39代码进行修改
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
//修改为
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.25x, {{ $large | safeURL }} 1.25x"
//对第54代码进行修改
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
//修改为
data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.25x, {{ $large | safeURL }} 1.25x"

1

{{< image src="1.png" >}}

原图片大小为360，变为原来的0.8，恰好为288，如下：

赞赏

微信