如何解决如何根据是否启用暗模式更改Hugo-Coder头像? 环境背景问题摘要需要解决方案
环境背景
问题摘要
需要解决方案
希望我添加了足够的信息!
源代码存储库:GitHub Repo
解决方法
您可能会考虑类似于onweru/newsroom
中使用的简码:
图片您要在设备上启用暗模式而在光模式下启用常规图像时使用暗模式图像吗?它需要3个位置参数
将这些图像存储在
static/images
目录中。... {{< picture "lightModeImage.png" "darkModeImage.png" "Image alt text" >}} ...
它使用layouts/shortcodes/picture.html
:
{{- $normal := .Get 0 }}
{{- $dark := .Get 1 }}
{{- $alt := .Get 2 }}
{{- $normalPath := absURL (printf "images/%s" $normal) }}
{{- $darkPath := absURL (printf "images/%s" $dark) }}
<picture class = 'nav_logo'>
<source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
<img srcset = '{{ $normalPath }}' alt = '{{ $alt }}'>
</picture>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。