Hugo 添加相册页面
Overview
总有那么一瞬间特别特别想发一张照片，但不是以文章形式发布。
实现思路是程序自动遍历指定文件夹内的图片，并展示在一个页面上。有了思路，剩下的就是看文档、看文档、看文档，此功能利用 Hugo 的 readDir function 函数达成。
日常更新把图片丢到 static/photos 中即可（搭配 Github Action 自动化部署更香）：
1static
2└── photos
3 ├── 落樱缤纷.jpeg
4 ├── 想象中的自由.jpeg
5 └── 儿时登过顶的狮子山.jpeg
主题集成
如需集成到自己的主题，一般如下操作，但不保证最终结果：
1.static/photos 丢几张命名好的图片先；
2.content/photos.md 创建一个md，好让 Hugo 生成页面；内容如下：
1---
2title: "我的相册"
3layout: "photos"
4---
3.layouts/_default/photos.html
1{{ define "main" }}
2<div class="post">
3 <h2 class="post-title">{{.Title}}</h2>
4</div>
5
6<div class="page-photos">
7 {{ range (readDir "./static/photos") }}
8 <figure>
9 <img src="https://cdn.jsdelivr.net/gh/tfnick/blog@gh-pages/photos/{{ .Name }}" alt="{{ .Name }}" />
10 <figcaption>{{ .Name | replaceRE "(.*)[.].*" "$1"}}</figcaption>
11 </figure>
12 {{ end }}
13</div>
14{{ end }}
图片撸了 jsdelivr CDN 的羊毛，需自行更改，或者指定图片的 src 为本地：
1<img src="{{"photos/" | absURL }}{{ .Name }}" alt="{{ .Name }}" />
4.样式参考：
1.page-photos figure{max-width:80%;margin:0 auto 3rem;}
2.page-photos figure img{box-shadow: 0 12px 40px rgba(0,0,0,.15);border-radius: 8px;}
不了了之
原依据 os.FileInfo 还加了 {{ .Modtime }} 时间显示，本地测试都可以，但同步到线上之后所有图片都一个时间，了之。