时间戳

首页 > 解决方案 > 如何使用hugo检测浏览器

javascript - 如何使用hugo检测浏览器

问题描述

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

我认为这个线程已经提供了正确的 js 代码：如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？

// 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 }}

谢谢并恭祝安康

标签： javascripthtmlhugo

解决方案

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

推荐阅读