起因

一直在纠结博客到底是使用第三方图床还是跟博客文件丢在一起，第三方图床空间大而且免费但是国内能访问的图床大多稳定性不怎么样(指随时可能因为各种原因删除你的图片)，境外图床十有八九在国内无法访问。跟博客文件放在一起的最大缺点就是占空间，毕竟我的博客源文件是放在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输出静态文件的时候被下载下来储存在网站的根目录,无法下载的图片将输出源链接(部分图床有反爬策略),而本地图片的逻辑依旧和之前一样。

效果演示

正常下载的图片
无法下载的图片 (不知道为什么Cloudflare Page构建的时候能下载了，凑合看吧)

最后修改于 2023-07-24