Hugo下载远程图片到本地
没什么意义的举动
起因
一直在纠结博客到底是使用第三方图床还是跟博客文件丢在一起，第三方图床空间大而且免费但是国内能访问的图床大多稳定性不怎么样(指随时可能因为各种原因删除你的图片)，境外图床十有八九在国内无法访问。跟博客文件放在一起的最大缺点就是占空间，毕竟我的博客源文件是放在Github仓库的只有1G的容量。
但是良心Cloudflare Page并没有限制站点总大小
于是我就想到了将图片放到图床，但是生成博客静态文件的时候把图片拉取到本地这种操作，然后在谷歌一顿找，让我找到了hugo获取远程文件的 方法
{{ $bar := resources.GetRemote "https://example.org/foo.jpg" | resources.Copy "bar.jpg" }}
<img src="{{ $bar.RelPermalink }}">
改造
既然找到方法了就和 上一篇文章 的方法结合改造一下
代码如下
<p>
{{ $image := .Page.Resources.GetMatch .Destination }}
{{ $text := .Text }}
{{ $title := .Title }}
{{ if $image }}
{{ $rawImage := $image }}
{{ $image := $image.Resize (print $image.Width "x" $image.Height " webp") }}
<a href="{{ $rawImage.RelPermalink}}" target="view_window">
<picture>
<source type="image/webp" srcset="{{ $image.RelPermalink }}">
<img
src="{{ $rawImage.RelPermalink }}"
{{ with $text }}alt="{{ . }}"{{ end }}
loading="lazy"
{{ with $title }}title="{{ . }}"{{ end }}
/>
</picture>
</a>
{{ else }}
{{ $url := .Destination | safeURL }}
{{ $image := resources.GetRemote $url }}
{{ with $image.Err }}
<a href="{{ $url }}" target="view_window">
<img
src="{{ $url }}"
{{ with $text }}alt="{{ . }}"{{ end }}
loading="lazy"
{{ with $title }}title="{{ . }}"{{ end }}
/>
</a>
{{ else }}
{{ $rawImage := $image }}
{{ $image := $image.Resize (print $image.Width "x" $image.Height " webp") }}
<a href="{{ $rawImage.RelPermalink}}" target="view_window">
<picture>
<source type="image/webp" srcset="{{ $image.RelPermalink }}">
<img
src="{{ $rawImage.RelPermalink }}"
{{ with $text }}alt="{{ . }}"{{ end }}
loading="lazy"
{{ with $title }}title="{{ . }}"{{ end }}
/>
</picture>
</a>
{{ end }}
{{ end }}
</p>
现在使用![]()引用的远程图片在hugo输出静态文件的时候被下载下来储存在网站的根目录,无法下载的图片将输出源链接(部分图床有反爬策略),而本地图片的逻辑依旧和之前一样。
效果演示
- 正常下载的图片
- 无法下载的图片
最后修改于 2023-07-24