如何用雨果检测浏览器

问题描述

我正在寻找一种解决方案，以根据浏览器类型显示不同类型的图像。如果浏览器是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));

如何在雨果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 }}

感谢和问候

解决方法

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

html hugo javascript