在现代的互联网世界中，博客成为了信息传播的重要渠道之一。随着技术的发展，博客的表现形式也变得越来越丰富多样。其中，链接预览功能就是提升用户体验的一种方式。本文将介绍如何使用Hugo静态网站生成器来创建博客链接的预览功能。
Hugo是一个用Go语言编写的开源静态网站生成器，它以其速度快、易用性和高度可定制性而闻名。Hugo允许开发者通过模板和短代码来构建复杂的网站结构，同时保持代码的简洁和高效。
在本文中，将探讨如何利用Hugo的资源管理和图像处理功能，来实现博客链接的预览功能。这不仅能够提升博客的可读性，还能增强用户在浏览博客时的互动体验。
在Hugo中，可以通过在文章的front matter中添加图像标签来指定文章的主要图片。例如：
image:
- "/blog/myarticle/images/mainimage.jpg"
- "/blog/myarticle/images/anotherimage.jpg"
为了生成真正的缩略图，而不是直接指向全尺寸图片，需要利用Hugo的图像处理功能。Hugo允许在模板中内联处理图像，并提供生成图像的链接。这些图像被放置在资源文件夹中，可以被检入源代码控制，而不需要每次重新生成。
为了确保生成的缩略图只被创建一次并在后续构建中重用，需要将顶级的资源文件夹包含在源代码控制中。如果不小心将其包含在.gitignore中，Hugo将会在每次构建时重新生成图像，这不仅会减慢构建速度，还会增加存储的使用。
以下是生成缩略图的逻辑，为了提高可读性，将代码展开（在模板中，这将在一行内完成，以节省生成内容的空间）：
{{ if .Params.image }}
{{ $original := print "images/" (path.Base .Params.image) }}
{{ $originalImg := .Resources.GetMatch $original }}
{{ if $originalImg }}
{{ $thumbnailImg := $originalImg.Resize "90x" }}
{{ printf `` ($thumbnailImg.RelPermalink | safeHTML) }}
{{ end }}
{{ end }}
首先，检查页面是否有图像元数据。如果有，根据资源集合中存储的方式构建图像路径。然后，解析页面资源以找到匹配项。如果找到匹配项，将图像大小调整为90像素宽，提取链接并打印出meta标签。
在构建了生成缩略图的功能之后，意识到可以创建一个短代码来做类似的事情，用于相对页面链接。创建了一个名为relativelink.html的短代码：
{{ $page := .Site.GetPage (.Get 0) }}
{{ if $page.Params.image }}
{{ $original := print "images/" (path.Base $page.Params.image) }}
{{ $originalImg := $page.Resources.GetMatch $original }}
{{ if $originalImg }}
{{ $thumbnailImg := $originalImg.Fit "200x100" }}
{{ printf `` ($thumbnailImg.RelPermalink) $page.Title | safeHTML }}
{{ end }}
{{ end }}
{{ $page.Description }}
.Site.GetPage允许根据URL获取页面。然后提取标题、图像和描述来创建预览。缩略图生成的图像稍微宽一些，并限制了高度。结果是，这个短代码：
{{< relativelink "/blog/migrate-from-medium-to-hugo" >}}