通过Hugo短代码功能实现图片及其EXIF信息展示

我有一个习惯就是在网络上分享图片时不管是调整尺寸还是压缩，都习惯保留元数据，当然也希望在分析图片时能够展示元数据。本文介绍如何在 Hugo 静态博客中借助短代码实现图片展示功能，包括单张图片和图片组的短代码实现，以及自动获取并格式化显示图片 EXIF 信息的方法。 具体效果如下图所示： 也可见 万圣节和亳都·新象的一些照片 和 天津两日纪行 等文章。 需实现的功能 支持单张图片和图片组两种展示方式 自动从图片 EXIF 数据中提取拍摄信息 格式化显示焦距、光圈、快门、ISO、相机品牌和镜头型号 支持自定义标题和多种参数传递方式 短代码实现 1. 单张图片短代码 (figure.html) 创建 layouts/shortcodes/figure.html 文件： <!-- layouts/shortcodes/figure.html --> {{ $page := .Page }} <!-- 支持两种语法：位置参数和命名参数 --> {{ $imageParam := .Get 0 }} {{ $src := .Get "src" }} {{ $title := .Get "title" }} {{ $alt := .Get "alt" }} {{ $class := .Get "class" }} <!-- 如果使用了位置参数（新语法） --> {{ if $imageParam }} {{ $imagePath := $imageParam }} {{ $customTitle := "" }} <!-- 检查参数是否包含自定义标题（使用冒号分隔） --> {{ if in $imageParam ":" }} {{ $parts := split $imageParam ":" }} {{ $imagePath = index $parts 0 }} {{ $customTitle = index $parts 1 }} {{ end }} {{ $src = $imagePath }} {{ $title = $customTitle }} {{ end }} {{ $imageResource := $page.Resources.GetMatch $src }} {{ if $imageResource }} {{ $exif := $imageResource.Exif }} {{ $autoTitle := $title | default $exif.Tags.ImageDescription | default (humanize (path.Base $src | replaceRE "\\..*$" "" | replaceRE "-|_" " ")) }} {{ $autoAlt := $alt | default $autoTitle }} <figure class="{{ $class }}"> <a href="{{ $imageResource.RelPermalink }}" class="no-a-style" data-fancybox="global-gallery" data-caption="{{ $autoTitle }}"> <img title="{{ $autoTitle }}" alt="{{ $autoAlt }}" src="{{ $imageResource.RelPermalink }}" loading="lazy" > </a> {{ if or $autoTitle $exif }} <figcaption> {{ if $autoTitle }}<span class="title">{{ $autoTitle }}</span>{{ end }} {{ with $exif }} {{ $exifParts := slice }} <!-- 1. 焦距 --> {{ with .Tags.FocalLength }} {{ $focalLength := . }} {{ if findRE "^[0-9]+/[0-9]+$" $focalLength }} {{ $parts := split $focalLength "/" }} {{ $numerator := float (index $parts 0) }} {{ $denominator := float (index $parts 1) }} {{ if gt $denominator 0 }} {{ $value := div $numerator $denominator }} {{ if eq (mod $value 1) 0 }} {{ $focalLength = printf "%.0fmm" $value }} {{ else }} {{ $focalLength = printf "%.1fmm" $value }} {{ end }} {{ end }} {{ else }} {{ $focalLength = printf "%smm" $focalLength }} {{ end }} {{ $exifParts = $exifParts | append $focalLength }} {{ end }} <!-- 2. 光圈 --> {{ with .Tags.FNumber }} {{ $fnumber := . }} {{ if findRE "^[0-9]+/[0-9]+$" $fnumber }} {{ $parts := split $fnumber "/" }} {{ $numerator := float (index $parts 0) }} {{ $denominator := float (index $parts 1) }} {{ if gt $denominator 0 }} {{ $fnumber = printf "f/%.1f" (div $numerator $denominator) }} {{ end }} {{ else }} {{ $fnumber = printf "f/%s" $fnumber }} {{ end }} {{ $exifParts = $exifParts | append $fnumber }} {{ end }} <!-- 3. 快门速度 --> {{ with .Tags.ExposureTime }} {{ $exposureTime := . }} {{ if findRE "^[0-9]+/[0-9]+$" $exposureTime }} {{ $parts := split $exposureTime "/" }} {{ $numerator := float (index $parts 0) }} {{ $denominator := float (index $parts 1) }} {{ if gt $denominator 0 }} {{ $value := div $numerator $denominator }} {{ if ge $value 1 }} {{ $exposureTime = printf "%.0fs" $value }} {{ else }} {{ $exposureTime = printf "1/%.0fs" (div 1 $value) }} {{ end }} {{ end }} {{ else }} {{ $exposureTime = printf "%ss" $exposureTime }} {{ end }} {{ $exifParts = $exifParts | append $exposureTime }} {{ end }} <!-- 4. ISO - 尝试多个可能的标签 --> {{ $isoValue := "" }} {{ with .Tags.ISOSpeedRatings }}{{ $isoValue = . }}{{ end }} {{ if not $isoValue }}{{ with .Tags.ISOSpeed }}{{ $isoValue = . }}{{ end }}{{ end }} {{ if not $isoValue }}{{ with .Tags.ISO }}{{ $isoValue = . }}{{ end }}{{ end }} {{ if not $isoValue }}{{ with .Tags.PhotographicSensitivity }}{{ $isoValue = . }}{{ end }}{{ end }} {{ with $isoValue }} {{ $isoInt := int . }} {{ if gt $isoInt 0 }} {{ $exifParts = $exifParts | append (printf "ISO%d" $isoInt) }} {{ end }} {{ end }} <!-- 5. 相机品牌 --> {{ with .Tags.Model }} {{ $cameraModel := . }} {{ if findRE "iPhone" $cameraModel }} {{ $cameraModel = "iPhone" }} {{ else if findRE "iPad" $cameraModel }} {{ $cameraModel = "iPad" }} {{ else if findRE "Canon" $cameraModel }} {{ $cameraModel = "Canon" }} {{ else if findRE "Nikon" $cameraModel }} {{ $cameraModel = "Nikon" }} {{ else if findRE "Sony" $cameraModel }} {{ $cameraModel = "Sony" }} {{ else if findRE "ILCE-" $cameraModel }} {{ $cameraModel = "Sony" }} {{ else if findRE "FUJIFILM" $cameraModel }} {{ $cameraModel = "Fujifilm" }} {{ else if findRE "X-T" $cameraModel }} {{ $cameraModel = "Fujifilm" }} {{ end }} {{ $exifParts = $exifParts | append $cameraModel }} {{ end }} <!-- 6. 镜头型号（完整显示） --> {{ with .Tags.LensModel }} {{ $lensModel := . }} {{ $lensModel = trim $lensModel " " }} {{ if and $lensModel (ne $lensModel "") }} {{ $exifParts = $exifParts | append $lensModel }} {{ end }} {{ end }} {{ if gt (len $exifParts) 0 }} <span class="exif">{{ delimit $exifParts " · " }}</span> {{ end }} {{ end }} </figcaption> {{ end }} </figure> {{ else }} {{ errorf "图片未找到: %s" $src }} {{ end }} 剩余 157 行代码 展开剩余代码 使用方法：