图库 Beta 版上线

最近不忙了,有了一些折腾的时间,于是对原 相册 页面进行了全面的改版,加入了更多的功能特性,目前 Beta 版本的功能包括:

  • 图库列表页、详情页、分类页、标签页
  • 是否显示 NSFW 的图片
  • 详情页中图片的视图切换
  • 从主图获取图片色板
  • 常用图片信息的展示

在折腾的过程中发现了一些很有意思的玩法,下面简单分享一下。

一. 获取图片的主要颜色值

Hugo 官方关于 Color 的介绍在这里查看,示例代码:

1{{ with resources.Get "images/a.jpg" }} 
2	{{ .Colors }} → [#bebebd #514947 #768a9a #647789 #90725e #a48974] 
3{{ end }}

它的作用如下:

  1. {{ with resources.Get "images/a.jpg" }}:这一行使用 with 语句获取资源。with语句在 Go 模板中用于设置作用域。如果 resources.Get 找到了对应的文件,那么它会设置一个新的作用域,其中的 . 变量将代表这个图片资源。

  2. {{ .Colors }}:在这个新的作用域内,. 现在代表通过 resources.Get 获取到的图片资源。.Colors 属性是 Hugo 的图片处理功能中的一个方法,它试图分析图片并返回一个颜色值的列表,这些颜色是图片的主要组成颜色。这个属性通常返回一个颜色数组,每个颜色是一个十六进制的字符串。

  3. → [#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 }}

欢迎留言