主路图像处理

Mainroad中Hugo图像的详细信息、类型和尺寸

目录

Mainroad 是一个用于 Hugo 静态网站生成器的主题，除了外观美观之外，它还具有糟糕的图片处理功能

如你所见，这个网站采用相同的方法，用 markdown 编写文本并添加图片，然后通过 hugo 生成一组美观的 html、js 和 css 文件。

topimage

位置

缩略图在页面的 front matter 中定义

thumbnail: img/thumb.jpg

缩略图的可见性在 config.toml 中配置

[Params.thumbnail]
  visibility = ["list", "post"]

Mainroad 存在一些困难

  • Mainroad 在 /static 文件夹中搜索缩略图图片，而不是在页面包中。
  • 默认情况下，一张图片同时用于列表页面的缩略图和详细页面的顶部图片。
  • 缩略图不会被调整大小，只是被复制到 public 文件夹中。

不愉快之处…

  • 上述情况导致在详细页面中使用图片作为缩略图时，带宽使用非常低效。
  • 将图片存储在 static 文件夹中非常不方便（对我而言），即使在并行的帖子树结构中，而不是在页面包中。

图片类型和尺寸

缩略图

  • 小型列表（移动视图） 73x53
  • 中型列表（桌面视图） 235x171

详细页面 - 内部

  • 最大桌面尺寸 678x495
  • iPad Pro 597x436
  • iPhone XR 374x273
  • iPhone 14 Max 390x285
  • iPad Mini 479x350

解决方案

是将以下内容进行存储：

  • 在 static 文件夹中存储中型列表（桌面视图）的缩略图图片 235x171
  • 有预定义的缩略图集，例如 10 张，使用最合适的或轮换使用
  • 在页面包中存储桌面图片 678x495
  • 在页面文本中引用它们 ![img](localimg.png)
  • 配置缩略图可见性 = [“list”]

有用的链接