如何使用hugo检测浏览器答案

【问题标题】：How to detect the browser with hugo如何使用hugo检测浏览器
【发布时间】：2020-10-29 03:34:41
【问题描述】：

我正在寻找一种解决方案来根据浏览器类型显示不同类型的图像。如果浏览器是 safari，我想显示 png 文件，如果浏览器不是 safari，我想显示 webp 文件。

我认为这个线程已经提供了正确的 js 代码：How to detect Safari, Chrome, IE, Firefox and Opera browser?

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

如何在 hugo if 语句中调用结果？

有点像这样：

{{ $safari := isSafari }}
{{ if eq safari true }}
  <img src="{{ "img/bannerphone.png" | absURL }}" alt="phone">
{{ else }}
  <img src="{{ "img/bannerphone.webp" | absURL }}" alt="phone">
{{ end }}

感谢和问候

【问题讨论】：

如果浏览器支持，请改用图片元素并显示 webp 图片。这样，如果 Safari 获得支持，它将自动开始使用 webp。 developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
@Karl-JohanSjögren - 多么棒的解决方案！非常感谢！！！

标签： javascript html hugo

【解决方案1】：

JS 仅在网站加载到浏览器后执行。雨果被提前处决。在构建过程中没有办法实现这一点。您必须在前端处理 img src 切换，或者更好地使用像 cloudinary 这样的 img cdn ...

【讨论】：