在 Hugo 中创建一个文章预览

我最喜欢的 Medium 功能之一是能够链接任何站点并嵌入带有缩略图、标题和摘要的预览。例如，粘贴指向我的 Durable Dungeon GitHub 仓库的链接

 JeremyLikness/DurableDungeon

生成如下预览

从那以后，我迁移到了 Hugo，那么现在怎么办？

Hugo 具有极高的可定制性，很可能构建代码来获取网站并抓取元数据，但我决定从更易于理解的内容开始，为博客内部链接创建预览。 我知道我可以很容易地通过 Hugo 访问数据。这个想法始于我第一次实现 Google 搜索。我注意到一些搜索结果有缩略图，而另一些则没有。 在研究这个之后，我发现您可以将缩略图作为网页的元数据提供

<meta name="thumbnail" content="thumbnail.jpg">

我总是使用 image 标签标记我前置内容中的博文的主图像

image: "/blog/myarticle/images/mainimage.jpg" 
images:
 - "/blog/myarticle/images/mainimage.jpg"
 - "/blog/myarticle/images/anotherimage.jpg"

我想创建一个真实的缩略图，而不是指向全尺寸图像。我花了一些时间阅读 Hugo 图像处理 的文档，并意识到这根本不会很难。Hugo 将内联处理图像并提供生成的图像的链接。它们也放置在 resources 文件夹中，因此它们可以被签入源代码控制，并且不必每次都重新生成。

⭐ 提示：确保在源代码控制中包含您的顶级 resources 文件夹！我错误地将其包含在我的 .gitignore 中，这迫使 Hugo 每次都重新生成图像。签入它们可确保它们仅生成一次并在后续传递中重复使用。这使构建速度更快，并使用更少的存储空间。

我的缩略图生成的逻辑如下所示，为了可见性而展开（在模板中，我将其放在一行中以节省生成的空间，但我也使用 --minify 选项，因此这可能是多余的）。我删除了多余的括号以使逻辑更易于阅读，但每个语句都包含在双括号中。

if .Params.image
    $original := print "images/" (path.Base .Params.image)
    $originalImg := .Resources.GetMatch $original
    if $originalImg 
        $thumbnailImg := $originalImg.Resize "90x"
        printf `<meta name="thumbnail" content="%s">`
            $thumbnailImg.RelPermalink | safeHTML
    end
end

我首先检查我是否在具有图像元数据的页面上。如果是，我根据它们在页面的资源集合中的存储方式来构造图像的路径。 我解析页面资源以进行匹配。如果找到匹配项，我调整大小为 90 像素宽，提取链接并打印 meta 标签。

构建此功能后，我意识到我可以创建一个短代码来对相对页面链接执行类似的操作。 我创建了一个名为 relativelink.html 的短代码

{{$page := .Site.GetPage (.Get 0)}}
<div class="container alert alert-secondary">
    <div><a href="{{$page.RelPermalink}}" alt="{{$page.Title}}">
        <strong>{{ $page.Title }}</strong>
    </a></div>
    <div class="float-left m-2">
    {{ if $page.Params.image }}
        {{ $original := print "images/" (path.Base $page.Params.image) }}
        {{ $originalImg := $page.Resources.GetMatch $original }}
        {{ if $originalImg }}
            {{ $thumbnailImg := $originalImg.Fit "200x100" }}
            {{ printf `<img src="%s" alt="%s">` 
                $thumbnailImg.RelPermalink $page.Title | safeHTML }}
        {{end}}
    {{end}}
    </div>
    <p><small>{{$page.Description}}</small></p>
    <div class="clearfix"></div>
</div>

.Site.GetPage 允许我根据其 URL 获取页面。 然后我提取标题、图像和描述以创建我的预览。 缩略图生成会生成稍宽的图像并约束高度。结果是这个短代码

{{<relativelink "/blog/migrate-from-medium-to-hugo" >}}

生成此预览