Hugo中使用图片的一些心得

研究了一会儿hugo中怎样使用图片，顺便做个记录。

最高效正确的方法应该就是使用Markdown render hooks，即可通过以下的markdown形式快速地调整图片大小

1
2
3
4
5
6
7
![Petrified Forest](a.jpg?w=500)

![Bryce Canyon](images/b.jpg?h=200&f=webp)

![Zion](images/c.jpg?w=150&h=150&m=fill&q=50&f=png&i=my-id&c=my-class)

![Hugo logo](https://gohugo.io/img/hugo-logo.png?w=200)

但是我太懒还没学会，最简单的应该就是用html自带的img标签，但不知道为什么我这无法显示，如果这样的话我目前发现有两种解决办法

在theme的css中添加需要的样式，我使用的papermod主题默认在post-single文件中

1
2
3
4
5
6
7
.post-content img[src*="#minipic"] { 
  max-width:  200px; 
  display: block;
}

//使用
![a](../1.png#minipic)

也可以把标签加在alt中，但这样局限性很大，最多定义几种常用大小。

另外一种方法就是使用shortcodes，类似于组件，官方已经写好了一个figure

1
{{去掉#< figure src="../1.png#center" width=250px >}}

除此之外还有的需求尤其是移动端就是要能够放大图片，于是我在这个issue下找到了答案

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# render-image.html
{{- if and (ne .Page.Kind "section") (.Page.Section ) }}
    <!-- Generate a unique id for each image -->
    {{- $random := (substr (md5 .Destination) 0 5) }}
    <input type="checkbox" id="zoomCheck-{{$random}}" hidden>
    <label for="zoomCheck-{{$random}}">
        <img class="zoomCheck" loading="lazy" decoding="async" 
            src="{{ .Destination | safeURL }}" alt="{{ .Text }}" 
            {{ with.Title}} title="{{ . }}" {{ end }} />
    </label>
{{- else }}
    <img loading="lazy" decoding="async" src="{{ .Destination | safeURL }}" 
        alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}

# extend_footer.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js" integrity="sha512-N9IJRoc3LaP3NDoiGkcPa4gG94kapGpaA5Zq9/Dr04uf5TbLFU5q0o8AbRhLKUUlp8QFS2u7S+Yti0U7QtuZvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
const images = Array.from(document.querySelectorAll(".post-content img"));
images.forEach(img => {
  mediumZoom(img, {
    margin: 20, /* The space outside the zoomed image */
    scrollOffset: 40, /* The number of pixels to scroll to close the zoom */
    container: null, /* The viewport to render the zoom in */
    template: null, /* The template element to display on zoom */
    background: 'rgba(0, 0, 0, 0.8)'
  });
});
</script>


<!-- https://ionic.io/ionicons -->

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

在以上两个文件中添加代码后就可以愉快缩放了，剩下的效果自由发挥。

目前我更换主题后，要看具体情况更改（比如主题自带对image的处理），querySelectorAll后的内容可通过F12定位css的具体位置。