图床配置与webp服务

博客 · 2024-11-16

本周给博客把图床搭建好了，并配置了 webp 服务用于提高页面加载效率

以下是测试图片，用于验证图床及 webp 服务有效性：

像只鱼儿在你的荷塘

配置自动将图床链接转换为 webp 服务代理后链接

图床服务是使用 Cloudflare 的 R2 存储搭建的，所以在经自定义域名后，图床链接一般是 https://pics.saitoler.cn/DSC_0992.jpg 这种的。但是使用 webp 服务代理后，图片的链接是要变更成 webp 的域名的。如果博客中图片少的话可以自行替换，但如果大量图片手动替换就很闹心了。 webp 官方给了 hugo 的代理通用方法，简单改了下后就能自动进行图片域名的转换了。

博客根目录下创建 layouts/_default/_markup/render-image.html 文件，内容如下：

{{ if site.Params.webpCloudProxy.enable }}
    {{ if hugo.IsServer }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
    {{ else }}
        {{ $image_ext := index (split .Destination ".") (sub (len (split .Destination ".")) 1) }}
        {{ if in site.Params.webpCloudProxy.convertTypeList $image_ext }}
<p class="md__image">
    <img src='{{ replace .Destination site.Params.webpCloudProxy.sourceUrl site.Params.webpCloudProxy.proxyUrl | safeURL }}'
        alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
        {{ else }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
        {{ end }}
    {{ end }}
{{ else }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
{{ end }}

hugo.toml 添加webp的代理设置

[params.webpCloudProxy]
enable = true
proxyUrl = "https://webp.saitoler.cn"
convertTypeList = ["jpg", "jpeg", "png", "gif"]
sourceUrl = "https://pics.saitoler.cn"

上面的 proxyUrl 就是 webp 服务我设置的自定义代理域名；sourceUrl 是我的图床域名。添加了后按正常步骤添加博客并构建，图片的链接会自动被转换成webp的代理域名的对应链接

#图床 #webp