图库 Beta 版上线
最近不忙了，有了一些折腾的时间，于是对原 相册 页面进行了全面的改版，加入了更多的功能特性，目前 Beta 版本的功能包括：
- 图库列表页、详情页、分类页、标签页
- 是否显示 NSFW 的图片
- 详情页中图片的视图切换
- 从主图获取图片色板
- 常用图片信息的展示
在折腾的过程中发现了一些很有意思的玩法，下面简单分享一下。
一. 获取图片的主要颜色值
Hugo 官方关于 Color 的介绍在这里查看，示例代码：
1{{ with resources.Get "images/a.jpg" }}
2 {{ .Colors }} → [#bebebd #514947 #768a9a #647789 #90725e #a48974]
3{{ end }}
它的作用如下：
-
{{ with resources.Get "images/a.jpg" }}：这一行使用with语句获取资源。with语句在 Go 模板中用于设置作用域。如果resources.Get找到了对应的文件，那么它会设置一个新的作用域，其中的.变量将代表这个图片资源。 -
{{ .Colors }}：在这个新的作用域内，.现在代表通过resources.Get获取到的图片资源。.Colors属性是 Hugo 的图片处理功能中的一个方法，它试图分析图片并返回一个颜色值的列表，这些颜色是图片的主要组成颜色。这个属性通常返回一个颜色数组，每个颜色是一个十六进制的字符串。 -
→ [#bebebd #514947 #768a9a #647789 #90725e #a48974]：这个箭头和括号中的颜色值不是 Hugo 语法的一部分，用来展示.Colors会返回什么样的数据。实际上，这部分不会执行任何操作，并且在实际的 Hugo 模板中不会产生输出。
我在图库的详情页里根据这个用法完成了 2 个实践，一是从文章目录的下 images 文件夹里的第一张图片获取主色，二是每张图片 img 标签从图片获取主色作为背景色，作为图片加载时的显示处理方式，只有在网速很卡的时候才会感觉到，如果你好奇是什么样子的，可以在图库的详情页卡，打开 Chrome 的开发者模式，在网络里设置 “停用缓存” 和 “高速3G”，然后刷新页面就可以看到效果。
1.每张图片 img 标签从图片获取主色作为背景色：
1{{ $maxColors := 6 }}
2<!-- 设置要显示的最大颜色数 -->
3{{ $imageResources := .Resources.Match "images/*" }}
4<!-- 匹配图片资源 -->
5{{ range $index, $element := $imageResources }} {{ if and (eq
6$element.ResourceType "image") (ne $element.Name ".DS_Store") }}
7<!-- 排除.DS_Store文件并确保资源是图片类型 -->
8{{ if eq $index 0 }}
9<!-- 检查是否是第一个匹配项 -->
10{{ with $element.Colors }}
11<!-- 使用with确保Colors可用 -->
12<div class="info-box">
13 <span-title>色板</span-title>
14 <div class="colors-content">
15 {{ range first $maxColors . }}
16 <!-- 限制颜色的数量为最多6个 -->
17 <div class="color-single" id="colortip">
18 <span
19 class="color-block"
20 style="background-color: {{ . }}"
21 data-color="{{ . }}"
22 ></span>
23 <span class="color-code">{{ . }}</span>
24 </div>
25 {{ end }}
26 </div>
27</div>
28{{ end }} {{ end }} {{ end }} {{ end }}
2.每张图片 img 标签从图片获取主色作为背景色：
1<div class="image-list">
2 {{ .Content }} {{ $images := .Resources.Match "images/*" }}
3 {{ range $image := $images }} {{ if ne $image.Name ".DS_Store" }} {{ $colors := $image.Colors }}
4 <!-- 获取图像的主色 -->
5 {{ with index $colors 0 }}
6 <!-- 使用第一个颜色值，或根据需要调整 -->
7 <img
8 class="--lazy"
9 src="{{ $image.RelPermalink }}"
10 style="background-color: {{ . }}"
11 />
12 {{ end }} {{ end }} {{ end }}
13</div>
另外，关于图片处理的更多方法，可以 看这里 。
二. 查看同分类下的上下篇文章
原来 Hugo 前或后一篇文章代码已经支持同 分类 内的，赞 👍 Question regarding Next Prev navigation - support - HUGO
1{{ if .NextInSection }}
2 <a href="{{ .NextInSection.Permalink }}">
3 {{ .NextInSection.Title }}
4 </a>
5{{ end }}
6{{ if .PrevInSection }}
7 <a href="{{ .PrevInSection.Permalink }}">
8 {{ .PrevInSection.Title }}
9 </a>
10{{ end }}
我的相关代码示例：
1<!-- 查看同分类下的上一篇文章 -->
2{{ if gt $currentIndex 0 }}
3{{ $prevPage := index $paginator (sub $currentIndex 1) }}
4<div class="pagenav left" data-tippy-content="点击或按键盘 ← 键">
5 <a href="{{ $prevPage.Permalink }}" class="nav-svg prev-page">
6 <svg
7 width="24"
8 height="24"
9 viewBox="0 0 24 24"
10 fill="none"
11 xmlns="http://www.w3.org/2000/svg"
12 >
13 <rect
14 x="0.5"
15 y="0.5"
16 width="23"
17 height="23"
18 rx="5.5"
19 fill="var(--color-background)"
20 style="fill: var(--color-background); fill-opacity: 1"
21 />
22 <rect
23 x="0.5"
24 y="0.5"
25 width="23"
26 height="23"
27 rx="5.5"
28 stroke="var(--color-border)"
29 style="stroke: var(--color-border); stroke-opacity: 1"
30 />
31 <path
32 d="M11.205 11.9991L14.9175 15.7116L13.857 16.7721L9.08398 11.9991L13.857 7.22607L14.9175 8.28657L11.205 11.9991Z"
33 fill="var(--color-foreground)"
34 style="fill: var(--color-foreground); fill-opacity: 1"
35 />
36 </svg>
37 </a>
38</div>
39
40{{ end }}
41
42<!-- 查看同分类下的下一篇文章 -->
43{{ if lt $currentIndex (sub (len $paginator) 1) }}
44{{ $nextPage := index $paginator (add $currentIndex 1) }}
45<div class="pagenav right" data-tippy-content="点击或按键盘 → 键">
46 <a href="{{ $nextPage.Permalink }}" class="nav-svg next-page">
47 <svg
48 width="24"
49 height="24"
50 viewBox="0 0 24 24"
51 fill="none"
52 xmlns="http://www.w3.org/2000/svg"
53 >
54 <rect
55 x="0.5"
56 y="0.5"
57 width="23"
58 height="23"
59 rx="5.5"
60 fill="var(--color-background)"
61 style="fill: var(--color-background); fill-opacity: 1"
62 />
63 <rect
64 x="0.5"
65 y="0.5"
66 width="23"
67 height="23"
68 rx="5.5"
69 stroke="var(--color-border)"
70 style="stroke: var(--color-border); stroke-opacity: 1"
71 />
72 <path
73 d="M12.7965 11.9991L9.08398 8.28657L10.1445 7.22607L14.9175 11.9991L10.1445 16.7721L9.08398 15.7116L12.7965 11.9991Z"
74 fill="var(--color-foreground)"
75 style="fill: var(--color-foreground); fill-opacity: 1"
76 />
77 </svg>
78 </a>
79</div>
80
81{{ end }}